代码规范全流程整改方案
一、代码检测借助 eslint 插件：在根目录下面创建.eslintrc.js
-
vscode 安装 eslint
-
参考：https://zh-hans.eslint.org/docs/latest/use/configure/
-
配置内容
module.exports = { //当前目录即为根目录 root: true, //eslint 检测环境 env: { // node环境下eslint检测 node: true }, // eslint所继承的检测标准 extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'], // 解析器 parserOptions: { parser: 'babel-eslint' }, // off或者0-关闭规则 // warn或者1-开启规则，警告级别：warn，不会导致程序报错推出 // error或者2-开启规则，错误级别，error，导致程序退出 rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' } }
二、代码自动格式化借助 prettier 插件：在项目根目录新建.prettierrc
-
vscode 安装插件:Prettier-Code formatter
-
参考：https://www.prettier.cn/
-
配置内容
{ "semi": false, "singleQuote": true, "trailingComma": "none" }
三、vscode 开发环境统一：在根目录下新建.vscode 的文件夹
- 在当前项目的工作目录下.vscode 中的配置会优先覆盖全局配置
-
新建：settings.json
{ "editor.formatOnSave": true, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.detectIndentation": false, "editor.tabSize": 2, "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "vetur.validation.script": false, "vue3snippets.enable-compile-vue-file-on-did-save-code": false, /* 每种语言默认的格式化规则 */ "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, /*prettier 的配置*/ "prettier.printWidth": 120, // 超过最大值换行 "prettier.tabWidth": 2, // 缩进字节数 "prettier.useTabs": true, // 缩进使用 tab // "prettier.semi": false, // 句尾添加分号 "prettier.singleQuote": true, // 使用单引号代替双引号 "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }" "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto "prettier.htmlWhitespaceSensitivity": "ignore", "prettier.ignorePath": ".prettierignore", // 不使用 prettier 格式化的文件填写在项目的.prettierignore 文件中 "prettier.requireConfig": false, // Require a "prettierconfig" to format prettier /* eslint 的配置 */ "eslint.enable": true, // "eslint.run": "onSave", "eslint.options": { "extensions": [".js", ".vue"] }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true // 保存时自动修复 }, "eslint.validate": [ "javascript", "javascriptreact", "vue-html", "vue", "html" ] } -
新建：extensions.json
{ "recommendations": [ "dbaeumer.vscode-eslint", // eslint "esbenp.prettier-vscode", // prettier "Vue.volar" ] }
四、安装约定式提交规范，借助 commitizen 插件
-
全局安装 Commitizen
npm install -g commitizen@4.2.4 -
安装配置
cz-customizable插件- 安装：
npm i cz-customizable@6.3.0 --save-dev - 配置：
package.json"config":{ "commitizen":{ "path":"node_modules/cz-customizable" }， "cz-customizable": {//vite构建时需要手动改成cjs提示是common规范代码，这一段必须加 "config": ".cz-config.cjs" } }
- 安装：
-
配置.cz-config.js 自定义提示信息
1. 根目录下创建.cz-config.js 2. vite构建就是.cz-config.cjs ```js module.exports = { // 可选类型 types: [ { value: 'feat', name: 'feat: 功能开发' }, { value: 'bugFix', name: 'bugFix: bug 修复' }, { value: 'style', name: 'style: 样式修改(不影响功能代码)' }, { value: 'pref', name: 'pref: 性能优化' }, { value: 'chore', name: 'chore: 构建工具/插件/第三方插件变动' }, { value: 'refactor', name: 'refactor: 老功能重写' }, { value: 'revert', name: 'revert: 回退' }, { value: 'build', name: 'build: 构建打包' }, { value: 'docs', name: 'docs: 文档变更' }, { value: 'test', name: 'test: 测试' } ], // 步骤 messages: { type: '请严谨选择提交类型！', customScope: '请输入修改范围(任务号｜ bug 描述｜业务模块｜路由地址)便于快速锁定问题', subject: '请简述提交信息，以便更精准快速二次锁定问题(可选)', body: '提交信息的细节补充（可选）', footer: '请输入关联的任务号｜产品｜其他补充(可选)', confirmCommit: '确认使用以上信息提交吗？（y/n）' }, // 长度 subjectLimit: 200, // 调过问题 skipQuestions: ['body'] } ``` -
强制走
git cz命令
五、通过 githooks，借助 husky 插件 强制走校验流程
- 两个插件
commitlint和husky
- commitlint:用于检查提交信息
- husky:git hooks 工具
- npm 一定要在 7.x 以上的版本
-
关于 commitlint 的使用
- 安装:
npm i --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4 - 根目录创建
commitlint.config.js - 如果是vite构建则创建
commitlint.config.cjs - 在 commitlint.config.js 中新增校验规则
module.exports = { extends: ['@commitlint/config-conventional'], rules: { // type 枚举，即在. cz-config 中配置的所有类型 'type-enum': [ // 错误级别：2 表示 error 2, // 验证时机-一直验证 'always', [ 'feat', // 新功能 'bugFix', // 修复 'docs', // 文档变更 'style', // 代码格式化（不影响代码执行的变动 'refactor', // 功能重构 'pref', // 性能优化 'chore', // 工具/插件变动 'revert', // 回退 'build', // 构建 'test' // 测试 ] ], // subject 不区分大小写 'subject-case': [0] } }
- 安装:
-
关于 husky 的使用
- 安装：
npm install husky@7.0.1 --save-dev - 创建 githooks 工作站并启动 hooks:
npx husky install-生成.husky 工作文件夹 - 创建 husky 安装指令
npm set-script prepare 'husky install'并测试npm run prepare- **注意:**npm 版本过高，过低都可能没有
set-script这个命令，我的用的npm@8.5,node@16.14.2,或者嫌
弃麻烦就直接去 package.json 手动添加 script"scripts": { "prepare": "husky install" }
- **注意:**npm 版本过高，过低都可能没有
- 安装：
-
commitlint 和 husky 关联使用
- 关系分析：通过 husky 监听 githooks，在 githooks 的 commit-msg 的钩子函数中执行 commitlint 执行对提交代码检测
- 建立关联关系：
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'- **注意:**上面这句命令需要较高 npm 版本，安装时 commit-msg 中
$1会丢。建议版本：node：18.16.0，npm：9.5.1
- **注意:**上面这句命令需要较高 npm 版本，安装时 commit-msg 中
- 解析关联关系：
npx husky add .husky/[其他hook也行] 'npx --no-install commitlint --edit "$1"' - 注意看.husky 文件夹中的变化
- 如果有问题注意 npm 版本:7+
六、通过 githooks+eslint 插件配合解决代码规范问题[eslint+prettier:解决开发时的规范。githooks+eslint：在提交时对代码规范进行校验]
- 关系分析：通过
husky监听pre-commit钩子，在这个钩子中执行npx eslint --ext .js,.vue src指令，去按照 eslint 代码规则，检测项目中 src 下面的所有的 js 文件，vue 文件 - 建立关联关系
npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src",即：添加husky监听pre-commit勾子，在 commit 时会触发该钩子函数执行npx eslint --ext .js,.vue src - 注意看.husky 文件夹中的变化
- 如果有问题注意 npm 版本:7+
七、代码自主修复借助 lint-staged 插件 自动按规范修复修改文件
-
检查修改过的文件是否合规，常规的规范问题会帮你提交时自动修复
-
修复不了的话，报错让你手动修改
-
lint-staged 在 vue-cli 中自带，直接配置使用即可
-
配置:
package.json"lint-staged":{ "src/**/*.{js,vue}":[ "eslint --fix", "git add" ] } -
修改
pre-commit// 将下面这句 npx eslint --ext .js,.vue src // 换成这个,上面这句是暴露不合规的问题，下面通过lint-staged，会先尝试按代码规范帮你修复，修复不了在报错 npx lint-staged
八、.gitignore 修改
- 注意，在.gitignore 中放开对.vscode 的限制，让.vscode 上传到仓库, 开发者直接拉取代码，应用到开发空间
- .husky 文件夹同理
九、node/npm 版本导致的问题
- 如果实践过程出错，注意 node/npm 的版本问题
- 正常 node 在 16+，npm 在 7+是可以的
- node 版本可以用 nvm
259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
