使用 husky + commitizen 自动化规范检查

一、Husky

Husky 是一个 Git Hook 工具，可以帮助我们在 Git 提交的各个阶段做一些事情，如 pre-commit 、commit-msg、pre-push。

可以使用自动配置命令进行安装：

npx husky-init && npm install

这行命令帮助我们做了三件事：

1. 在 package.json 中添加一个脚本；

   

2. 在项目根目录下创建 .husky 目录；

3. 安装依赖。

接下来，修改 .husky/pre-commit ，提交代码时先执行 lint 脚本：

当我们提交代码时，husky 会先执行一遍 npm run lint 检查项目中所有的代码。

二、lint-staged

思考一下，其实只需要检查被 git add 添加到暂存区的代码即可，lint-staged 可以帮助我们做到这一点。

1. 安装

   npm install lint-staged -D
   

2. 在 package.json 中添加配置：

   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "eslint --fix"
     ]
   }
   

3. 修改 .husky/pre-commit ：

   

三、commitlint

commitlint 可以对 commit message 进行规范检查。

1. 安装

   npm install @commitlint/config-conventional @commitlint/cli -D
   

2. 在根目录创建 commitlint.config.js 文件：

   module.exports = {
     extends: ["@commitlint/config-conventional"]
   }
   

3. 使用 husky 生成 commit-msg 文件：

   npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
   

配置完成后，简单测试一下：

四、commitizen

commitizen 是一个帮助我们编写符合规范的 commit message 的工具。

1. 安装

   npm install commitizen -D
   

   安装完成后 node_modules/.bin 目录下会出现 cz 。

2. 安装 cz-conventional-changelog

   npm install cz-conventional-changelog -D
   

3. 在 package.json 中添加配置：

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

配置完成，之后提交代码只需执行 npx cz 即可。我们也可以添加一个语义化的脚本用于代码提交：

执行 npm run commit ，可以通过上下箭头很方便地选择：