多人协作项目代码规范统一约定（完整全面）

发布时间：2023年12月18日

代码规范全流程整改方案

一、代码检测借助 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 插件

全局安装 Commitizennpm install -g commitizen@4.2.4
安装配置cz-customizable插件
1. 安装：npm i cz-customizable@6.3.0 --save-dev
2. 配置：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 的使用
1. 安装：npm install husky@7.0.1 --save-dev
2. 创建 githooks 工作站并启动 hooks:npx husky install-生成.husky 工作文件夹
3. 创建 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"
 }
```
commitlint 和 husky 关联使用
1. 关系分析：通过 husky 监听 githooks，在 githooks 的 commit-msg 的钩子函数中执行 commitlint 执行对提交代码检测
2. 建立关联关系：npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
  - **注意:**上面这句命令需要较高 npm 版本，安装时 commit-msg 中$1会丢。建议版本：node：18.16.0，npm：9.5.1
3. 解析关联关系：npx husky add .husky/[其他hook也行] 'npx --no-install commitlint --edit "$1"'
4. 注意看.husky 文件夹中的变化
5. 如果有问题注意 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

文章来源:https://blog.csdn.net/qq_38560742/article/details/135057010
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！