前言

在多人开发时，代码提交的说明的有效信息能够帮助我们快速定位问题，所以规范化的提交流程尤其重要。我们使用一套规范化的提交流程来帮助我们生成规范的 commit message 和 changelog 文件。

配置git hooks

安装 npm install husky lint-staged eslint -D

git hooks

git hooks 就是在git执行的某个阶段触发的钩子函数，在项目的 .git/hooks 目录中，默认存在一些 .sample 结尾的钩子示例脚本，如果想启用对应的钩子，只需手动删除后缀即可。

完整钩子，请参考官网链接

husky

husky 是一款能够新增 git hooks 的工具，我们可以用它在git的每个阶段处理对应的操作，比如 pre-commit 钩子可以用来处理line检查、代码美化等操作。

在老版本husky只需要在package.json中配置，husky默认是开启的

"lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix"
    ]
}

在新版本中husky是默认关闭，需要手动开启，那么可以在script中配置脚本

"script": {
    "prepare": "husky install"
}

这个脚本是npm的钩子，每当npm install都会执行改钩子。执行完脚本后会在根目录下生成 .husky 目录

然后执行命令

npx husky add .husky/pre-commit "npx lint-staged"

或者手动在 .husky 下配置 pre-commit 文件

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

那么现在，在 commit 之前，会将暂存区的内容做一次eslint代码检查，然后再添加到暂存区

提交规范commitizen

正真实现提交规范化，可使用 commitizen 工具

安装 npm install commitizen -D

适配器cz-conventional-changelog

然后执行下面命令

// 如果使用npm执行下面命令：
npx commitizen init cz-conventional-changelog --save-dev --save-exact

// 如果使用yarn执行下面命令：
npx commitizen init cz-conventional-changelog --yarn --dev --exact

此时，package.json增加了config这个配置

package.json中配置脚本

"scripts": {
    "commit": "cz"
}

那么只需要执行npm run commit，提交形式变成如下所示

适配器cz-customizable

当然如果想要对提交规范可配置，那么需要安装另一个适配器

npm install cz-customizable -D

package.json配置script和config

"scripts": {
    "commit": "git add . && git-cz"
}

// ...

"config": {
    "commitizen": {
        "path": "./node_modules/cz-customizable"
    }
 }

并且在根目录新增.cz-config.js文件，配置内容如下

module.exports = {
 // 可选类型
 types: [
   { value: 'feat', name: 'feat:     新功能' },
   { value: 'fix', name: 'fix:      修复' },
   { value: 'docs', name: 'docs:     文档变更' },
   { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
   {
     value: 'refactor',
     name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
   },
   { value: 'perf', name: 'perf:     性能优化' },
   { value: 'test', name: 'test:     增加测试' },
   { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
   { value: 'revert', name: 'revert:   回退' },
   { value: 'build', name: 'build:    打包' }
 ],
 // 消息步骤
 messages: {
   type: '请选择提交类型:',
   // scope: '选择一个更改的范围(scope) (可选):',
   // used if allowCustomScopes is true
   // customScope: 'Denote the SCOPE of this change:',
   subject: '请输入本次commit记录说明(必填):',
   // body: '长说明，使用"|"换行(可选)：\n',
   // breaking: '非兼容性说明 (可选):\n',
   // footer: '关联关闭的issue，例如：#31, #34(可选):\n',
   confirmCommit: '确定提交说明?',
 },
 // ? 设置更改的范围
 // scopes: [
 //   { name: 'api' },
 //   { name: 'bug' },
 //   { name: 'optimization' },
 //   { name: '添加其它' }
 // ],
 skipQuestions: ['scope', 'body', 'breaking', 'footer'],
 allowBreakingChanges: [
   'fix',
   'feat',
   'update',
   'refactor',
   'perf',
   'build',
   'revert',
 ],
 subjectLimit: 100
}

再次修改执行npm run commit，配置已生效

自动产生CHANGELOG

正规的提交最后的目的就是生成一个CHANGELOG.md给团队或者其他人看

安装 npm install conventional-changelog-cli -D

配置脚本

"scripts": {
    "changelog": "conventional-changelog -p angular -u -i CHANGELOG.md -s -r 0"
 }

执行脚本后便可以生成 CHANGELOG.md 日志文件

总结

package.json最终配置如下

"scripts": {
    "prepare": "husky install",
    "commit": "git-cz",
    "changelog": "conventional-changelog -p angular -u -i CHANGELOG.md -s -r 0"
}

// ...

"lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix"
    ]
 }
 
 // ...
 
"config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    }
}

整体commit流程

修改git add .
执行npm run commit
选择提交类型和提交说明
触发pre-commit钩子，执行lint-staged检查代码
执行npm run changelog生成CHANGELOG.md文件
执行上述1、2、3、4代码
执行git push推送代码

Commit规范化提交 husky+lint-staged+commitizen

前言