From 001be05d59506eaefd74d971f710b6992699d65f Mon Sep 17 00:00:00 2001 From: xiangheng <11675084@qq.com> Date: Tue, 21 Mar 2023 19:24:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9F=BA=E7=A1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .commitlintrc.js | 3 + .editorconfig | 12 + .env | 5 + .env.development | 2 + .env.production | 5 + .eslintignore | 2 + .eslintrc.js | 32 + .gitignore | 25 + .husky/commit-msg | 4 + .husky/pre-commit | 4 + .postcssrc.js | 5 + .prettierrc.js | 7 + .stylelintignore | 2 + .stylelintrc.js | 36 + .vscode/extensions.json | 8 + .vscode/settings.json | 10 + README.md | 70 + build/proxy.js | 37 + build/utils.js | 28 + docs/1.工程化实践/1. eslint.md | 159 + docs/1.工程化实践/2. stylelint.md | 102 + docs/1.工程化实践/3. husky.md | 83 + docs/1.工程化实践/4. commitlint.md | 96 + docs/2.全家桶/1. 路由.md | 58 + docs/2.全家桶/2. 全局状态管理.md | 30 + docs/2.全家桶/3. 组件库.md | 5 + .../1. Axios 封装及接口管理.md | 20 + docs/3.更多功能/2. Css 样式处理.md | 103 + docs/3.更多功能/3. Vite 基础配置.md | 176 + index.html | 13 + jsconfig.json | 9 + package.json | 64 + public/favicon.ico | Bin 0 -> 4286 bytes src/App.vue | 5 + src/api/demo.js | 11 + src/assets/logo.png | Bin 0 -> 6849 bytes src/components/HelloWorld.vue | 45 + src/hooks/useRouter.js | 35 + src/layouts/BaseLayout.vue | 106 + src/main.js | 20 + src/router/constants.js | 5 + src/router/guard/index.js | 9 + src/router/guard/permission.guard.js | 14 + src/router/index.js | 24 + src/router/modules/demo.modules.js | 29 + src/router/modules/index.js | 3 + src/store/index.js | 8 + src/store/modules/demo.js | 12 + src/styles/global/utils.less | 18 + src/styles/global/variables.less | 5 + src/styles/index.less | 8 + src/styles/normalize.css | 351 ++ src/styles/reset.css | 133 + src/utils/env.js | 15 + src/utils/request.js | 57 + src/views/demo/components/StyleTxt.vue | 33 + src/views/demo/pinia.vue | 59 + src/views/demo/route.vue | 65 + src/views/demo/style.vue | 101 + vite.config.js | 71 + yarn.lock | 6187 ++++++++++++++++++++ 61 files changed, 8644 insertions(+) create mode 100644 .commitlintrc.js create mode 100644 .editorconfig create mode 100644 .env create mode 100644 .env.development create mode 100644 .env.production create mode 100644 .eslintignore create mode 100644 .eslintrc.js create mode 100644 .gitignore create mode 100644 .husky/commit-msg create mode 100644 .husky/pre-commit create mode 100644 .postcssrc.js create mode 100644 .prettierrc.js create mode 100644 .stylelintignore create mode 100644 .stylelintrc.js create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json create mode 100644 README.md create mode 100644 build/proxy.js create mode 100644 build/utils.js create mode 100644 docs/1.工程化实践/1. eslint.md create mode 100644 docs/1.工程化实践/2. stylelint.md create mode 100644 docs/1.工程化实践/3. husky.md create mode 100644 docs/1.工程化实践/4. commitlint.md create mode 100644 docs/2.全家桶/1. 路由.md create mode 100644 docs/2.全家桶/2. 全局状态管理.md create mode 100644 docs/2.全家桶/3. 组件库.md create mode 100644 docs/3.更多功能/1. Axios 封装及接口管理.md create mode 100644 docs/3.更多功能/2. Css 样式处理.md create mode 100644 docs/3.更多功能/3. Vite 基础配置.md create mode 100644 index.html create mode 100644 jsconfig.json create mode 100644 package.json create mode 100644 public/favicon.ico create mode 100644 src/App.vue create mode 100644 src/api/demo.js create mode 100644 src/assets/logo.png create mode 100644 src/components/HelloWorld.vue create mode 100644 src/hooks/useRouter.js create mode 100644 src/layouts/BaseLayout.vue create mode 100644 src/main.js create mode 100644 src/router/constants.js create mode 100644 src/router/guard/index.js create mode 100644 src/router/guard/permission.guard.js create mode 100644 src/router/index.js create mode 100644 src/router/modules/demo.modules.js create mode 100644 src/router/modules/index.js create mode 100644 src/store/index.js create mode 100644 src/store/modules/demo.js create mode 100644 src/styles/global/utils.less create mode 100644 src/styles/global/variables.less create mode 100644 src/styles/index.less create mode 100644 src/styles/normalize.css create mode 100644 src/styles/reset.css create mode 100644 src/utils/env.js create mode 100644 src/utils/request.js create mode 100644 src/views/demo/components/StyleTxt.vue create mode 100644 src/views/demo/pinia.vue create mode 100644 src/views/demo/route.vue create mode 100644 src/views/demo/style.vue create mode 100644 vite.config.js create mode 100644 yarn.lock diff --git a/.commitlintrc.js b/.commitlintrc.js new file mode 100644 index 0000000..a4f4369 --- /dev/null +++ b/.commitlintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['@commitlint/config-conventional'] +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..ebe51d3 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,12 @@ +# EditorConfig is awesome: https://EditorConfig.org + +# top-most EditorConfig file +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = false +insert_final_newline = false \ No newline at end of file diff --git a/.env b/.env new file mode 100644 index 0000000..4aeeba1 --- /dev/null +++ b/.env @@ -0,0 +1,5 @@ +# prot +VITE_PORT = 8000 + +# output dir +VITE_OUTPUT_DIR = dist \ No newline at end of file diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..089040e --- /dev/null +++ b/.env.development @@ -0,0 +1,2 @@ +# public path +VITE_PUBLIC_PATH = / \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..ff9f6fc --- /dev/null +++ b/.env.production @@ -0,0 +1,5 @@ +# public path +VITE_PUBLIC_PATH = / + +# 是否兼容传统浏览器 +VITE_LEGACY = false \ No newline at end of file diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..c257d21 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +public +dist \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..492c840 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,32 @@ +const { defineConfig } = require('eslint-define-config') + +module.exports = defineConfig({ + root: true, + env: { + browser: true, + node: true, + es6: true + }, + parser: 'vue-eslint-parser', + parserOptions: { + ecmaFeatures: { + jsx: true + } + }, + extends: [ + 'eslint:recommended', + /** + * 继承 eslint-plugin-vue 插件的规则 + * @link https://eslint.vuejs.org/user-guide/#installation + */ + 'plugin:vue/recommended', + /** + * 继承 eslint-plugin-prettier 插件的规则 + * @link https://github.com/prettier/eslint-plugin-prettier + */ + 'plugin:prettier/recommended' + ], + rules: { + 'vue/multi-word-component-names': 'off' + } +}) diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..44da05a --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/settings.json +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/.husky/commit-msg b/.husky/commit-msg new file mode 100644 index 0000000..741b0fb --- /dev/null +++ b/.husky/commit-msg @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +pnpm commitlint --edit diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 0000000..a5a29d9 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +pnpm lint-staged diff --git a/.postcssrc.js b/.postcssrc.js new file mode 100644 index 0000000..961986e --- /dev/null +++ b/.postcssrc.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: { + autoprefixer: {} + } +} diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..bc5d055 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,7 @@ +module.exports = { + semi: false, + singleQuote: true, + printWidth: 80, + trailingComma: 'none', + arrowParens: 'avoid' +} diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000..c257d21 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,2 @@ +public +dist \ No newline at end of file diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 0000000..43f1529 --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,36 @@ +module.exports = { + root: true, + extends: [ + 'stylelint-config-standard', + 'stylelint-config-rational-order', + 'stylelint-config-prettier', + 'stylelint-config-html/vue' // 需要放在最后一位 + ], + defaultSeverity: 'warning', + plugins: ['stylelint-order'], + rules: { + 'no-empty-source': null, + 'selector-class-pattern': null, + 'value-keyword-case': null, + 'font-family-no-missing-generic-family-keyword': null + }, + overrides: [ + { + files: ['*.vue', '**/*.vue'], + rules: { + 'selector-pseudo-class-no-unknown': [ + true, + { + ignorePseudoClasses: ['deep', 'global'] + } + ], + 'selector-pseudo-element-no-unknown': [ + true, + { + ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'] + } + ] + } + } + ] +} \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..b27752d --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,8 @@ +{ + "recommendations": [ + "Vue.vscode-typescript-vue-plugin", + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint", + "stylelint.vscode-stylelint" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..b4d1f97 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,10 @@ +{ + "editor.codeActionsOnSave": { + "source.fixAll": true, + "source.fixAll.eslint": true + }, + "vetur.format.enable": false, + "stylelint.validate": ["vue"], // Add "vue" language. + "editor.tabSize": 2, + "files.eol": "\n", +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..734f2ba --- /dev/null +++ b/README.md @@ -0,0 +1,70 @@ +# Vue 2.7 + Vite 脚手架 + +Vue2.7 已经发布正式版啦，不出意外的话这应该是 Vue2 的最后一个版本了，但是很多公司目前还没有升级 Vue3 的打算（比如我们）。 + +所以封装了这么一个开箱即用的脚手架模板，脚手架的功能可以看下面的功能列表小节，并且配备完整的技术文档。 + +可以直接使用，也可以当作学习源码。 + +## 教程目录 + +1. 工程化实践 + - [Eslint 格式化 JS 代码](./docs/1.%E5%B7%A5%E7%A8%8B%E5%8C%96%E5%AE%9E%E8%B7%B5/1.%20eslint.md) + - [Stylelint 格式化 CSS 代码](./docs/1.%E5%B7%A5%E7%A8%8B%E5%8C%96%E5%AE%9E%E8%B7%B5/2.%20stylelint.md) + - [Husky 提交时自动格式化代码](./docs/1.%E5%B7%A5%E7%A8%8B%E5%8C%96%E5%AE%9E%E8%B7%B5/3.%20husky.md) + - [Commitlint 校验 Commit Message](./docs/1.%E5%B7%A5%E7%A8%8B%E5%8C%96%E5%AE%9E%E8%B7%B5/4.%20commitlint.md) +2. 全家桶 + - [路由 vue-router](./docs/2.%E5%85%A8%E5%AE%B6%E6%A1%B6/1.%20%E8%B7%AF%E7%94%B1.md) + - [全局状态管理 pinia](./docs/2.%E5%85%A8%E5%AE%B6%E6%A1%B6/2.%20%E5%85%A8%E5%B1%80%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86.md) + - [组件库](./docs/2.%E5%85%A8%E5%AE%B6%E6%A1%B6/3.%20%E7%BB%84%E4%BB%B6%E5%BA%93.md) +3. 更多功能 + - [Axios 封装及接口管理](./docs/3.%E6%9B%B4%E5%A4%9A%E5%8A%9F%E8%83%BD/1.%20Axios%20%E5%B0%81%E8%A3%85%E5%8F%8A%E6%8E%A5%E5%8F%A3%E7%AE%A1%E7%90%86.md) + - [Css 样式处理](./docs/3.%E6%9B%B4%E5%A4%9A%E5%8A%9F%E8%83%BD/2.%20Css%20%E6%A0%B7%E5%BC%8F%E5%A4%84%E7%90%86.md) + - [Vite 基础配置](./docs/3.%E6%9B%B4%E5%A4%9A%E5%8A%9F%E8%83%BD/3.%20Vite%20%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE.md) + +## 基础搭建 + +在这里我们使用的是 [pnpm](https://pnpm.io/zh/) 来作为本项目的包管理工具。 + +```bash +# 安装依赖 +pnpm i + +# 运行 +pnpm run dev + +# 打包 +pnpm run build + +# 打包文件预览 +pnpm run preview +``` + +> 本人开发环境 +> +> node v16.13.1（大于 14 版本即可） +> +> pnpm v6.30.0 + + +### 插件安装 + +此脚手架必须安以下依赖才能保证，代码自动格式化的有效运行： + +- Vetur +- EditorConfig for VS Code +- ESLint +- Stylelint + +## 功能列表 + +- [x] Vue2.7 + Vite +- [x] Eslint、Stylelint、Commitlint 统一开发规范 +- [x] husky + lint-staged （git commit 时自动格式化代码） +- [x] Vue 全家桶集成 +- [x] Axios 封装及接口管理 +- [x] Css 样式处理 +- [x] vite.config.js 基础配置 +- [x] 跨域配置 +- [x] 多环境变量配置 +- [x] 浏览器构建兼容性 diff --git a/build/proxy.js b/build/proxy.js new file mode 100644 index 0000000..45130b4 --- /dev/null +++ b/build/proxy.js @@ -0,0 +1,37 @@ +/** + * { prefix: '/demo', target: 'http://localhost:3000/demo', removePrefix: true } + * 最终会被转化为 + * { + * '/demo': { + * target: 'http://localhost:3000/demo', + * changeOrigin: true, + * ws: true, + * rewrite: path => path.replace(new RegExp('^/demo'), '') + * } + * } + */ +const proxyList = [ + { prefix: '/demo', target: 'http://localhost:3000/demo', removePrefix: true }, + { prefix: '/api', target: 'http://localhost:3000/api' } +] + +export default proxyList.reduce((pre, cur) => { + const { prefix, target, removePrefix, ...res } = cur + + // https://www.vitejs.net/config/#server-proxy + const proxyOpts = { + target, + changeOrigin: true, + ws: true, + ...res + } + + // 移除前缀 + if (removePrefix) { + proxyOpts.rewrite = path => path.replace(new RegExp(`^${prefix}`), '') + } + + pre[prefix] = proxyOpts + + return pre +}, {}) diff --git a/build/utils.js b/build/utils.js new file mode 100644 index 0000000..ac789c6 --- /dev/null +++ b/build/utils.js @@ -0,0 +1,28 @@ +import { resolve } from 'path' + +/** + * 对 env 对象数据类型进行转换 + * @param {Object} envConf + * @returns + */ +export function wrapperEnv(envConf) { + const ret = {} + + Object.keys(envConf).forEach(key => { + let val = envConf[key] + + val = val === 'true' ? true : val === 'false' ? false : val + + if (key === 'VITE_PORT') { + val = Number(val) + } + + ret[key] = val + }) + + return ret +} + +export function pathResolve(dir) { + return resolve(process.cwd(), '.', dir) +} diff --git a/docs/1.工程化实践/1. eslint.md b/docs/1.工程化实践/1. eslint.md new file mode 100644 index 0000000..db9a25d --- /dev/null +++ b/docs/1.工程化实践/1. eslint.md @@ -0,0 +1,159 @@ +# Eslint 代码格式化 + +在工作中，一个项目往往是很多人共同开发，因为每个人的编码习惯都不一样，就会增加后期维护成本。 + +为了解决这个问题，我们一般会定义一个开发规范文档，使用约定的方式来统一项目的编码规范。 + +有了规范文档之后，我们就会在开发中小心翼翼的调整代码风格，每行、每列、每个双引号。这样无疑也会影响开发效率，而且忙的时候可能还会忘记某些规范条例。 + +为了更好的统一团队的编码规范，在这里我使用了 EditorConfig + ESLint + Prettier 这些工具来辅助解决规范性问题。 + +## EditorConfig + +[EditorConfig](https://editorconfig.org/) 主要用于统一不同 IDE 编辑器的编码风格。 + +> 当然每个团队最好还是统一一个代码编辑器。 + +在根目录下添加 `.editorconfig` 文件： + +```plain +# EditorConfig is awesome: https://EditorConfig.org + +# top-most EditorConfig file +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = false +insert_final_newline = false +``` + +> 很多 IDE 中会默认支持此配置，但是也有些不支持，如：VSCode、Atom、Sublime Text 等。 +> +> 具体列表可以参考官网，如果在 VSCode 中使用需要安装 `EditorConfig for VS Code` 插件。 + +## ESLint + +[ESLint](http://eslint.cn/) 是针对 EScript 的一款代码检测工具，它可以检测项目中编写不规范的代码，如果写出不符合规范的代码会被警告。 + +由此我们就可以借助于 ESLint 强大的功能来统一团队的编码规范。 + +1. 安装依赖 + +- [`eslint`](https://github.com/eslint/eslint) - Eslint 本体 +- [`eslint-define-config`](https://github.com/Shinigami92/eslint-define-config)- 改善 ESLint 规范编写体验 +- [`eslint-plugin-vue`](https://github.com/vuejs/eslint-plugin-vue)- 适用于 Vue 文件的 ESLint 插件 +- `vue-eslint-parser`- 使用 `eslint-plugin-vue` 时必须安装的 eslint 解析器 + +```bash +pnpm add eslint eslint-define-config eslint-plugin-vue vue-eslint-parser -D +``` + +2. 添加 ESLint 配置文件 + +在根目录添加一个 `.eslintrc.js` 文件，内容如下： + +```javascript +const { defineConfig } = require('eslint-define-config') + +module.exports = defineConfig({ + root: true, + env: { + browser: true, + node: true, + es6: true + }, + parser: 'vue-eslint-parser', + parserOptions: { + ecmaFeatures: { + jsx: true + } + }, + extends: [ + /** + * 继承 eslint-plugin-vue 插件的规则 + * @link https://eslint.vuejs.org/user-guide/#installation + */ + 'plugin:vue/recommended' + ], + rules: { + 'vue/multi-word-component-names': 'off' + } +}) +``` + +> 关于配置文件中的选项大家去看[官方文档](http://eslint.cn/docs/user-guide/configuring)，已经写得很详细了。 + +3. 添加 ESLint 过滤规则 + +在根目录添加一个 `.eslintignore` 文件，内容如下： + +```plain +public +dist +``` + +## Prettier + +Prettier 是一款强大的代码格式化工具，这里我们使用 ESLint + Prettier 来格式化代码。 + +1. 安装依赖 + +- `prettier` - prettier 本体 +- `eslint-config-prettier` - 关闭 ESLint 中与 Prettier 中发生冲突的规则 +- `eslint-plugin-prettier` - 将 Prettier 的规则设置到 ESLint 的规则中 + +```bash +pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D +``` + +2. 添加 Prettier 配置文件 + +在根目录添加一个 `.prettierrc.js` 文件，内容如下： + +```javascript +module.exports = { + semi: false, + singleQuote: true, + printWidth: 80, + trailingComma: 'none', + arrowParens: 'avoid', +} +``` + +3. 修改 ESLint 配置，使 Eslint 兼容 Prettier 规则 + +```javascript +const { defineConfig } = require('eslint-define-config') + +module.exports = defineConfig({ + /// ... + extends: [ + 'plugin:vue/vue3-recommended', + /** + * 继承 eslint-plugin-prettier 插件的规则 + * @link https://github.com/prettier/eslint-plugin-prettier + */ + 'plugin:prettier/recommended' + ], + // ... +}) +``` + +## 自动格式化代码 + +做好以上配置之后，在编码时不符合规范的地方就会被编辑器标注出来，可以使我们更好的发现问题。 + +如果你用的是VScode，还可以工作区配置中，添加如下代码，之后就可以享受保存时自动格式化的功能了： + +```json +{ + "editor.codeActionsOnSave": { + "source.fixAll": true, + "source.fixAll.eslint": true + } +} +``` \ No newline at end of file diff --git a/docs/1.工程化实践/2. stylelint.md b/docs/1.工程化实践/2. stylelint.md new file mode 100644 index 0000000..ccb289e --- /dev/null +++ b/docs/1.工程化实践/2. stylelint.md @@ -0,0 +1,102 @@ +# Stylelint CSS 格式化 + +Stylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。 + +1. 安装依赖 + +- [`stylelint`](https://stylelint.io/) - Stylelint 本体 +- [`stylelint-config-prettier`](https://github.com/prettier/stylelint-config-prettier)- 关闭 Stylelint 中与 Prettier 中会发生冲突的规则。 +- [`stylelint-config-rational-order`](https://github.com/constverum/stylelint-config-rational-order) - 对 CSS 声明进行排序 +- [`stylelint-config-standard`](https://github.com/stylelint/stylelint-config-standard)- Stylelint 官方推荐规则 +- `stylelint-order` 使用 `stylelint-config-rational-order` 时依赖的模块 + +```bash +pnpm add stylelint stylelint-config-prettier stylelint-config-rational-order stylelint-config-standard stylelint-order -D +``` + +2. 添加 StyleLint 配置文件 + +在根目录添加一个 `.stylelintrc.js` 文件，内容如下： + +```javascript +module.exports = { + root: true, + extends: [ + 'stylelint-config-standard', + 'stylelint-config-rational-order', + 'stylelint-config-prettier' + ], + defaultSeverity: 'warning', + plugins: ['stylelint-order'], + rules: { + 'no-empty-source': null, + 'selector-class-pattern': null + } +} +``` + +在根目录添加一个 `.stylelintignore` 文件，内容如下： + +```plain +public +dist +``` + +3. 启用 Vue 文件支持 + +`stylelint` v14 版本默认是不支持 vue 文件中的 style 代码自动检测，详情我们可以查看[官方迁移指南](https://github.com/stylelint/stylelint/blob/main/docs/migration-guide/to-14.md)，具体配置如下： + +- `stylelint-config-html` 解析 vue 文件 +- `postcss-html` 使用 `stylelint-config-html` 依赖的模块 +- `postcss-less` 对 less 文件进行解析 + +```bash +pnpm add stylelint-config-html postcss-html postcss-less -D +``` + +4. 修改 `.stylelintrc.js` 文件： + +```javascript +module.exports = { + root: true, + extends: [ + 'stylelint-config-standard', + 'stylelint-config-rational-order', + 'stylelint-config-prettier', + 'stylelint-config-html/vue' // 需要放在最后一位 + ], + defaultSeverity: 'warning', + plugins: ['stylelint-order'], + rules: { + 'no-empty-source': null, + 'selector-class-pattern': null + }, + overrides: [ + { + files: ['*.vue', '**/*.vue'], + rules: { + 'selector-pseudo-class-no-unknown': [ + true, + { + ignorePseudoClasses: ['deep', 'global'] + } + ], + 'selector-pseudo-element-no-unknown': [ + true, + { + ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'] + } + ] + } + } + ] +} +``` + +5. 在 VSCode 工作区配置中，添加如下代码： + +```json +{ + "stylelint.validate": ["vue"] // Add "vue" language. +} +``` diff --git a/docs/1.工程化实践/3. husky.md b/docs/1.工程化实践/3. husky.md new file mode 100644 index 0000000..1724a03 --- /dev/null +++ b/docs/1.工程化实践/3. husky.md @@ -0,0 +1,83 @@ +# Husky Git Hook 工具 + +husky Git Hook 工具，为 git 提供一系列钩子函数，在提交前（pre-commit）、提交消息（commit-msg）等钩子触发时可以为我们执行一些脚本。 + +我们可以使用 husky 工具来进行代码提交前的自动格式化，以及 commit message 的校验。 + +## 提交前代码格式化 + +1. 首先安装 husky + +```bash +pnpm add husky -D +``` + +2. 初始化 husky + +```bash +pnpm husky install +``` + +并在 package.json 中添加如下内容 + +```json +{ + "scripts": { + //... + "prepare": "husky install" + } +} +``` + +3. 添加 git hook + +```bash +pnpm husky add .husky/pre-commit +``` + +到这里之后我们还需要使用另外一个工具： [`lint-staged`](https://www.npmjs.com/package/lint-staged)，它是对 git 暂存区文件进行 lint 检查的工具。 + +4. 安装 lint-staged + +```bash +pnpm add lint-staged -D +``` + +5. 在 `package.json` 中添加如下配置 + +```json +{ + //... + "lint-staged": { + "*.{js,ts,jsx,tsx}": [ + "prettier --write", + "eslint --fix" + ], + "*.vue": [ + "stylelint --fix", + "prettier --write", + "eslint --fix" + ], + "*.{less,css}": [ + "stylelint --fix", + "prettier --write" + ] + } +} +``` + +6. 在 `.husky/pre-commit` 文件中写入以下内容 + +```shell +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +pnpm lint-staged +``` + +经过以上配置之后，我们就可以在每次提交之前对所有代码进行格式化，保证线上代码的规范性。 + + +> 在实际中如果遇见 `Use the --allow-empty option to continue, or check your task configuration` 这个问题。 +> +> 我们可以修改 `pnpm lint-staged` 为 `pnpm lint-staged --allow-empty` 来暂时屏蔽这个问题。 \ No newline at end of file diff --git a/docs/1.工程化实践/4. commitlint.md b/docs/1.工程化实践/4. commitlint.md new file mode 100644 index 0000000..1b2dce6 --- /dev/null +++ b/docs/1.工程化实践/4. commitlint.md @@ -0,0 +1,96 @@ +# Commitlint 提交信息校验 + +我们在使用 `git commit` 时，git 会记录每一次的 `commit message`（提交信息）。 + +正确的描述 `commit message` 在多人协同开发一个项目时，显得尤其重要。 + +这里我们可以看一下 `angular` 的 [`commit message`](https://github.com/angular/angular/commits/main)，会发现它的描述特别的清晰明了。 + +而 [`commitlint`](https://commitlint.js.org/#/) 就是对 `commit message` 进行的检查的一个工具，当不规范时会终止提交。 + +1. 安装依赖 + +- `@commitlint/cli`- Commitlint 本体 + +- `@commitlint/config-conventional`- 通用的提交规范 + +```bash +pnpm add @commitlint/cli @commitlint/config-conventional -D +``` + +1. 创建 commitlint 配置 + +在根目录添加一个 `.commitlintrc.js` 文件，内容如下： + +```javascript +module.exports = { + extends: ['@commitlint/config-conventional'] +} +``` + +1. 在 git `commit-msg` 时进行检查 + +执行下面这条命令即可： + +```bash +pnpm husky add .husky/commit-msg "pnpm commitlint --edit $1" +``` + +## Commit Message 格式 + +配置完成之后就可以在每次 `git commit` 时对 `commit message` 进行校验了，规范有两种格式：单行信息和多行信息。 + +1. 单行信息 + +用于业务代码提交时使用，业务代码一般来说更改比较多而且无法具体说明其信息，具体的还需要看产品文档，所以用单行信息即可。 + +```xml +(): +``` + +1. 多行信息 + +用于提交一些不经常更改的功能型代码时使用，如：某个功能函数的新增、修改或重构，目录结构的调整（工程化调整），架构的更改等，这些我们需要进行详细说明防止出现遗忘。 + +```xml +(): + // 空行 + + +