前端项目git提交规范配置

项目规范管理

目的

为了使团队多人协作更加的规范，所以需要每次在 git 提交的时候，做一次硬性规范提交，规范 git 的提交信息

使用commitizen规范git提交(交互式提交 + 自定义提示文案 + Commit规范)

1. 安装依赖

  pnpm install -D commitizen cz-conventional-changelog @commitlint/config-conventional @commitlint/cli commitlint-config-cz cz-customizable

1. 配置package.json

{
  "scripts": {
    "commit:comment": "引导设置规范化的提交信息",
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    },
    "cz-customizable": {
      // 若项目配置了type: "module", 就需要修改配置文件的后缀名为cjs, 并添加这个配置
      "config": ".cz-config.cjs"
    }
  }
}

3. 新增配置文件commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional', 'cz'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feature', // 新功能（feature）
        'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
        'fix', // 修补bug
        'ui', // 更新 ui
        'docs', // 文档（documentation）
        'style', // 格式（不影响代码运行的变动）
        'perf', // 性能优化
        'release', // 发布
        'deploy', // 部署
        'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
        'merge', // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
        'build', // 打包
      ],
    ],
    //  格式 小写
    'type-case': [2, 'always', 'lower-case'],
    //  不能为空
    'type-empty': [2, 'never'],
    //  范围不能为空
    'scope-empty': [2, 'never'],
    //  范围格式
    'scope-case': [0],
    //  枚举范围
    'scope-enum': [1, 'always'],
    //  主要 message 不能为空
    'subject-empty': [2, 'never'],
    //  以什么为结束标志，禁用
    'subject-full-stop': [0, 'never'],
    //  格式，禁用
    'subject-case': [0, 'never'],
    //  以空行开头
    'body-leading-blank': [1, 'always'],
    'header-max-length': [0, 'always', 72],
  },
}

4. 添加自定义提示.cz-config.cjs

   module.exports = {
     types: [
       { value: 'feature', name: '✨ Features |   增加新功能' },
       { value: 'bug', name: ' Bug Fixes | 测试反馈bug列表中的bug号' },
       { value: 'fix', name: ' Bug Fixes | 修复bug' },
       { value: 'ui', name: ' UI| 更新UI' },
       { value: 'docs', name: ' Documentation |文档变更' },
       { value: 'style', name: ' Styles | 风格(不影响代码运行的变动)' },
       { value: 'perf', name: '⚡Performance Improvements | 性能优化' },
       { value: 'refactor', name: '♻ Code Refactoring |重构(既不是增加feature，也不是修复bug)' },
       { value: 'release', name: 'release:  发布' },
       { value: 'deploy', name: ' Chore |部署' },
       { value: 'test', name: '✅ Tests |增加测试' },
       { value: 'chore', name: ' Chore |构建过程或辅助工具的变动(更改配置文件)' },
       { value: 'revert', name: '⏪ Revert | 回退回退' },
       { value: 'build', name: '‍ Build System |打包' },
     ],
     // override the messages, defaults are as follows
     messages: {
       type: '请选择提交类型:',
       customScope: '请输入您修改的范围(可选):',
       subject: '请简要描述提交 message (必填):',
       body: '请输入详细描述(可选，待优化去除，跳过即可):',
       footer: '请输入要关闭的issue(待优化去除，跳过即可):',
       confirmCommit: '确认使用以上信息提交？(y/n/e/h)',
     },
     // 要是同一个git下有多个项目文件家， 可以打开注释选择git要操作的项目
     // scopes: [{ name: 'h5' }, { name: 'manage'}],
     allowCustomScopes: true,
     skipQuestions: ['body', 'footer'],
     subjectLimit: 72,
   }
   

使用prettier格式化代码

1. 安装

  pnpm add --save-dev --save-exact prettier

2. 创建.prettierrc文件，并添加如下配置, 具体配置可以查看官网

{
  "semi": false,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 150
}

使用husky及lint-staged再提交代码时格式化代码

1. 安装(注意：这里与prettier官网的给出的示例不太一致， 建议看husky官网进行配置)

    pnpm add --save-dev husky lint-staged
    pnpm exec husky init
    npm pkg set scripts.prepare="husky"
   

2. 在package.json添加如下配置

{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

3. 在.husky新建pre-commit文件，并添加如下配置

  echo " pre-commit"
  echo "npx --no-install lint-staged"
  npx --no-install lint-staged

4. 在.husky新建commit-msg文件，并添加如下配置

  echo " commit-msg"
  echo "npx --no-install commitlint --edit \"$1\""
  npx --no-install commitlint --edit "$1"

完结

在git add后执行pnpm run commit命令根据提示输入commit信息即可。