多人协作项目代码规范统一约定(完整全面)
代码规范全流程整改方案
一、代码检测借助 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-config.js 自定义提示信息
1. 根目录下创建.cz-config.js ```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
- 在 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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!