使用 Husky + Commitlint + Lint-staged 约束每一次 Git 提交

每一名开发人员都有自己独特的代码风格。但对于多人协作项目，保持统一的风格有利于项目维护。

我们可以在项目中引入 ESLint、Prettier 来规范代码，但这无法约束 Git commit message

这时候可以借助 Husky 等工具来把好最后一关

 

常用工具

1. eslint (https://github.com/eslint/eslint)

  JavaScript 代码检测工具，检测并提示错误或警告信息

2. prettier (https://github.com/prettier/prettier)

  代码格式化工具，更好的代码风格效果

3. husky (https://github.com/typicode/husky)

  Git hooks 工具, 可以在执行 git 命令时，执行自定义的脚本程序

4. lint-staged (https://github.com/okonet/lint-staged)

  对暂存区 (git add) 文件执行脚本

5. commitlint (https://github.com/conventional-changelog/commitlint)

检测 git commit 内容是否符合定义的规范

 

 

一、Husky

Husky 是一款 Git Hooks 工具，可以在执行特定的 git 命令时（如: git commit, git push）触发对应的脚本

安装: (当前版本 7.x)

$ npm i -D husky
$ npx husky install
$ npm set-script prepare "husky install"

执行以上代码之后，项目的根目录会多出一个 .husky 文件夹，并且 package.json 中会增加一个脚本执行命令

// package.json
{
  "scripts": {
    "prepare": "husky install"
  }
}

// prepare 会在每次 npm install 的时候执行

现在 husky 已经安装好了，接下来添加对应的钩子函数

比如我需要在每次 git commit 提交前执行某些操作，就可以添加一个 commit-msg 钩子

npx husky add .husky/commit-msg 'npm test'

然后 .husky 目录下就会增加一个 commit-msg 文件

这样每一次 git commit 都会执行一次 npm test

// 如果面临特殊情况，需要绕过 Git Hooks，可以使用 --no-verify  

 

 

二、 Commitlint

Commitlint 可以校验 git commit message, 只有规范的 commit message 才能提交

安装: (当前版本 16.x)

npm i -D @commitlint/{config-conventional,cli}

然后在项目根目录新建一个 commitlint.config.js 文件

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

上一节已经在项目中引入了 Husky，修改一下 commit-msg 脚本，在每次 git commit 的时候执行 commitlint 校验

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
# or
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

完成以上配置之后，只有满足规范的 commit message 才能提交（具体的规范可以查看文档）

不满足规则的提交会报错，比如：

 

 

三、Lint-staged

在提交的代码的时候，可以通过 ESLint、Prettier 等工具来格式化代码

但如果直接处理全部代码，首先是可能存在性能问题，其次是可能会修改掉别的同事的代码

这时可以引入 lint-staged，它可以过滤出 Git 代码暂存区文件，这样就不会影响到未更改的文件

 

安装: (当前版本 12.x)

npm i -D lint-staged

然后在项目根目录创建文件 .lintstagedrc，配置所需要的规则

比如对暂存区的文件做格式化：

{
  "*.{js,jsx,less,md,json}": [
    "prettier --write"
  ],
  "*.ts?(x)": [
    "prettier --parser=typescript --write",
    "eslint --quiet"
  ]
}

甚至对特定文件执行脚本：

{
  "src/locales/zh-CN.ts": [
    "npm run your-command"
  ]
}

最后通过 Husky 来执行 lint-staged

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