构建Git卡点提交和CommitLint规范检查

Husky + lint-staged 的 Git 提交工作流集成

在代码提交的时候进行卡点检查，也就是拦截 git commit 命令，进行代码格式检查，只有确保通过格式检查才允许正常提交代码。

pnpm i husky -D

• 在package.json中配置husky钩子

// package.json
{ "husky": { "pre-commit": "npm run lint" } }
// 在 Husky `4.x` 及以下版本没问题，而在最新版本(7.x 版本)中是无效的。

• 1. 初始化 Husky: npx husky install，并将 husky install作为项目启动前脚本

{
  "scripts": {
    // 会在安装 npm 依赖后自动执行
    "postinstall": "husky install"
  }
}

• 2. 添加 Husky 钩子，在终端执行如下命令:

npx husky add .husky/pre-commit "npm run lint"

现在就可以在项目根目录的.husky目录中看到名为pre-commit的文件，里面包含了 git commit前要执行的脚本。当执行 git commit 的时候，会首先执行 npm run lint脚本，通过 Lint 检查后才会正式提交代码记录。

全量扫描 → 增量扫描

不过在 Husky 的钩子中执行 npm run lint会产生一个额外的问题:Husky 中每次执行npm run lint都对仓库中的代码进行全量检查，也就是说，即使某些文件并没有改动，也会走一次 Lint 检查，当项目代码越来越多的时候，提交的过程会越来越慢，影响开发体验。

而lint-staged就是用来解决上述全量扫描问题的，可以实现只对存入暂存区的文件进行 Lint 检查，大大提高了提交代码的效率。安装对应的 npm 包:

pnpm i -D lint-staged

在 package.json中添加如下的配置:

  "lint-staged": {
    "**/*.{js,jsx,tsx,ts}": [
      "npm run lint:script",
      "git add ."
    ],
    "**/*.{scss}": [
      "npm run lint:style",
      "git add ."
    ]
  }
}
// 新版的lint-staged不需要手动执行git add了

在 Husky 中应用lint-stage，回到.husky/pre-commit脚本中，将原来的npm run lint换成如下脚本:

npx --no -- lint-staged

至此实现提交代码时的增量 Lint 检查。

commit提交规范配置

新建.commitlintrc.js：

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

一般我们直接使用@commitlint/config-conventional规范集就可以了，它所规定的 commit 信息一般由两个部分: type 和 subject 组成，结构如下:

// type 指提交的类型
// subject 指提交的摘要信息
<type>: <subject>

常用的 type 值包括如下:

• feat: 添加新功能。
• fix: 修复 Bug。
• chore: 一些不影响功能的更改。
• docs: 专指文档的修改。
• perf: 性能方面的优化。
• refactor: 代码重构。
• test: 添加一些测试代码等等。
• 将commitlint的功能集成到 Husky 的钩子当中，在终端执行如下命令即可:

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

可以发现在.husky目录下多出了commit-msg脚本文件，表示commitlint命令已经成功接入到 husky 的钩子当中。现在我们可以尝试对代码进行提交，假如输入一个错误的 commit 信息，commitlint 会自动抛出错误并退出:

至此，我们便完成了 Git 提交信息的卡点扫描和规范检查。