配置 git 提交的校验钩子

  • husky: git提交时触发hooks
  • commitlint: 对提交的内容做规范校验 husky，主要对pre-commit和commit-msg钩子做校验。
    1. # 安装husky
    2. yarn add husky -D
    3. # 初始化husky配置，在根目录新增.husky配置文件。初始化配置pre-commit
    4. npx husky-init 
    5. # 另外新增一个hooks，commit-msg
    6. npx husky add .husky/commit-msg
    目录结构是下面这样子的：
    image.png
    在commit-msg文件中添加 npm run commitlint
    在pre-commit文件中有个npm run test我们先注释掉，不然会报错。

    安装commitlint

    1. # 添加依赖文件
    2. yarn add @commitlint/config-conventional @commitlint/cli -D
    添加配置文件，新建commitlint.config.js，然后添加下面的代码：
    1. module.exports = {
    2. extends: ['@commitlint/config-conventional'],
    3. // 校验规则
    4. rules: {
    5.   'type-enum': [
    6.     2,
    7.     'always',
    8.     [
    9.       'feat',
    10.       'fix',
    11.       'docs',
    12.       'style',
    13.       'refactor',
    14.       'perf',
    15.       'test',
    16.       'chore',
    17.       'revert',
    18.       'build',
    19.     ],
    20.   ],
    21.   'type-case': [0],
    22.   'type-empty': [0],
    23.   'scope-empty': [0],
    24.   'scope-case': [0],
    25.   'subject-full-stop': [0, 'never'],
    26.   'subject-case': [0, 'never'],
    27.   'header-max-length': [0, 'always', 72],
    28. },
    29. }

    配置scripts

    因为我们需要运行npm run commitlint，所以需要在package.json文件中添加如下代码：
    1. # 在scrips中添加下面的代码
    2. {
    3. "scripts": {
    4.   "commitlint": "commitlint --config commitlint.config.js -e -V"
    5. },
    6. }
    配置结束，现在当我们填写commit信息的时候，前面就需要带着下面的subject
    1. 'feat',
    2. 'fix',
    3. 'docs',
    4. 'style',
    5. 'refactor',
    6. 'perf',
    7. 'test',
    8. 'chore',
    9. 'revert',
    10. 'build',
    比如：git commit -m "feat: test",注意feat:后面有个空格
    我们来写一个错误的来测试一下：
    image.png
    提示subject是空的。
    使用正确的提交方式，提交成功了
    image.png

    使用 commitizen 做git规范化提交

    由于添加了commitlint验证，对于不熟悉提交规范的新手同学会有一定影响，可以添加 commitizen 工具，手动生成规范化commit。

Commitizen是一个格式化commit message的工具。

  1. # 工具安装
  2. yarn add -D commitizen

使用cz-conventional-changelog

安装工具

  1. yarn add cz-conventional-changelog -D

配置命令

  1. "script": {
  2.     "commit": "cz"
  3. }

在package.json 中添加定义commitizen使用规则，

  1. {
  2.     "config": {
  3.     "commitizen": {
  4.       "path": "./node_modules/cz-conventional-changelog"
  5.     }
  6.   },
  7. }

当执行git commit的时候，就可以提示我们填写代码规则了

自定义 commitizen 规则

使用 cz-customizable 工具

  1. # 安装依赖
  2. yarn add cz-customizable -D

配置命令

  1. "script": {
  2.     "commit": "git-cz"
  3. }

在package.json 中添加自定义commitizen，使用git-cz执行git commit命令

  1. "config": {
  2.     "commitizen": {
  3.         "path": "./node_modules/cz-customizable"
  4.     }
  5. }

在根目录创建的.cz-config.js, 自定义commit提示内容

  1. module.exports = {
  2.   types: [
  3.     { value: 'feat', name: '✨feat:     新功能' },
  4.     { value: 'fix', name: '🐛fix:      修复' },
  5.     { value: 'docs', name: '✏️docs:     文档变更' },
  6.     { value: 'style', name: '💄style:    代码格式(不影响代码运行的变动)' },
  7.     {
  8.       value: 'refactor',
  9.       name: '♻️refactor: 重构(既不是增加feature，也不是修复bug)'
  10.     },
  11.     { value: 'perf', name: '⚡️perf:     性能优化' },
  12.     { value: 'test', name: '✅test:     增加测试' },
  13.     { value: 'chore', name: '🚀chore:    构建过程或辅助工具的变动' },
  14.     { value: 'revert', name: '⏪️revert:   回退' },
  15.     { value: 'build', name: '📦️build:    打包' },
  16.     { value: 'ci', name: '👷CI:   related changes' }
  17.   ],
  18.   // override the messages, defaults are as follows
  19.   messages: {
  20.     type: '请选择提交类型(必选):',
  21.     // scope: '请输入文件修改范围(可选):',
  22.     customScope: '请输入修改范围(可选):',
  23.     subject: '请简要描述提交(必填):',
  24.     // body: '请输入详细描述(可选，待优化去除，跳过即可):',
  25.     // breaking: 'List any BREAKING CHANGES (optional):\n',
  26.     footer: '请输入要关闭的issue(待优化去除，跳过即可):',
  27.     confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
  28.   },
  29.   // used if allowCustomScopes is true
  30.   allowCustomScopes: true,
  31.   // allowBreakingChanges: ['feat', 'fix'],
  32.   skipQuestions: ['body', 'footer'],
  33.   // limit subject length, commitlint默认是72
  34.   subjectLimit: 72
  35. }

当我们提交代码的时候，需要先git add .，然后执行npm run commit,就可以根据响应的提示填写commit信息 了，如下图所示：
image.png