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

发布时间: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 中的配置会优先覆盖全局配置
  1. 新建: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"
      ]
    }
    
  2. 新建:extensions.json

    {
      "recommendations": [
        "dbaeumer.vscode-eslint", // eslint
        "esbenp.prettier-vscode", // prettier
        "Vue.volar"
      ]
    }
    

四、安装约定式提交规范,借助 commitizen 插件

  1. 全局安装 Commitizennpm install -g commitizen@4.2.4

  2. 安装配置cz-customizable插件

    1. 安装:npm i cz-customizable@6.3.0 --save-dev
    2. 配置:package.json
      "config":{
      	"commitizen":{
      		"path":"node_modules/cz-customizable"
      	}
      }
      
  3. 配置.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']
            }
        ```
    
  4. 强制走git cz命令

五、通过 githooks,借助 husky 插件 强制走校验流程

  • 两个插件commitlinthusky
  1. commitlint:用于检查提交信息
  2. husky:git hooks 工具
  3. npm 一定要在 7.x 以上的版本
  • 关于 commitlint 的使用

    1. 安装:npm i --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4
    2. 根目录创建 commitlint.config.js
    3. 在 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:在提交时对代码规范进行校验]

  1. 关系分析:通过 husky监听pre-commit钩子,在这个钩子中执行npx eslint --ext .js,.vue src指令,去按照 eslint 代码规则,检测项目中 src 下面的所有的 js 文件,vue 文件
  2. 建立关联关系npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src",即:添加husky监听pre-commit勾子,在 commit 时会触发该钩子函数执行npx eslint --ext .js,.vue src
  3. 注意看.husky 文件夹中的变化
  4. 如果有问题注意 npm 版本:7+

七、代码自主修复借助 lint-staged 插件 自动按规范修复修改文件

  1. 检查修改过的文件是否合规,常规的规范问题会帮你提交时自动修复

  2. 修复不了的话,报错让你手动修改

  3. lint-staged 在 vue-cli 中自带,直接配置使用即可

  4. 配置:package.json

      "lint-staged":{
    		"src/**/*.{js,vue}":[
    			"eslint --fix",
    			"git add"
    		]
    	 }
    
  5. 修改pre-commit

    // 将下面这句
    npx eslint --ext .js,.vue src
    // 换成这个,上面这句是暴露不合规的问题,下面通过lint-staged,会先尝试按代码规范帮你修复,修复不了在报错
    npx lint-staged
    

八、.gitignore 修改

  1. 注意,在.gitignore 中放开对.vscode 的限制,让.vscode 上传到仓库, 开发者直接拉取代码,应用到开发空间
  2. .husky 文件夹同理

九、node/npm 版本导致的问题

  1. 如果实践过程出错,注意 node/npm 的版本问题
  2. 正常 node 在 16+,npm 在 7+是可以的
  3. node 版本可以用 nvm
文章来源:https://blog.csdn.net/qq_38560742/article/details/135057010
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。