（三十九）代码提交规范 husky lint staged commitlint

步骤三十九

代码提交规范 husky + lint-staged + commitlint

如果想要防止团队协作时开发者提交不符合 ESLint 规则的代码则可以通过 lint-staged 工具来实现。lint-staged 可以在用户提交代码之前（生成 Git Commit Message 信息之前）使用 ESLint 检查 Git 暂存区中的代码信息（git add 之后的修改代码），一旦存在 💩 一样不符合校验规则的代码，则可以终止提交行为。需要注意的是 lint-staged 不会检查项目的全量代码（全量使用 ESLint 校验对于较大的项目可能会是一个相对耗时的过程），而只会检查添加到 Git 暂存区中的代码。

1. 安装 Commitlint

npm install @commitlint/cli @commitlint/config-conventional --save-dev

2. 配置 Commitlint

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

module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'docs', // 文档注释
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'perf', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build', // 打包
      ],
    ], // subject 大小写不做校验
    'subject-case': [0],
  },
}

3. Husky

什么是 git hook

在介绍 Husky 之前，我们先来看什么是 git hook，也就是常说的 Git 钩子。 和其它版本控制系统一样，Git 能在特定的重要动作发生时触发自定义脚本。有两组这样的钩子：客户端的和服务器端的。 客户端钩子由诸如提交和合并这样的操作所调用，而服务器端钩子作用于诸如接收被推送的提交这样的联网操作。 你可以随心所欲地运用这些钩子。 其中，客户端钩子我们可能用的比较多，客户端钩子通常包括了提交工作流钩子、电子邮件工作流钩子和其它钩子。这些钩子通常存储在项目的.git/hooks 目录下，我们需要关注的主要是提交工作流钩子。

提交工作流钩子主要包括了以下四种：

• pre-commit：该钩子在键入提交信息前运行。 它用于检查即将提交的快照。如果该钩子以非零值退出，Git 将放弃此次提交，你可以利用该钩子，来检查代码风格是否一致。
• prepare-commit-msg：该钩子在启动提交信息编辑器之前，默认信息被创建之后运行。 它允许你编辑提交者所看到的默认信息。
• commit-msg：该钩子接收一个参数，此参数存有当前提交信息的临时文件的路径。 如果该钩子脚本以非零值退出，Git 将放弃提交，因此，可以用来在提交通过前验证项目状态或提交信息。
• post-commit：该钩子一般用于通知之类的事情。 在上面的钩子中，我们需要关注 pre-commit 和 commit-msg 钩子。

什么是 husky

是常见的 git hook 工具，使用 husky 可以挂载 Git 钩子，当我们本地进行 git commit 或 git push 等操作前，能够执行其它一些操作，比如进行 ESLint 检查，如果不通过，就不允许 commit 或 push。

4. 安装 husky

npm install husky --save-dev

5. 初始化 husky

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

// 运行
npm run prepare

前提时，必须有 git init 指令执行成功后会在项目根目录下面生成一个 .husky 目录，该目录下有一个 _ 目录。

6. 添加 commit-msg hook

commit-msg 文件中可以配置在 git commit 时对 commit 注释的校验指令, 可手动创建文件再输入文件内容，但是建议使用命令创建，命令如下:

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

上面命令执行成功后会在 .husky 目录下生成一个 commit-msg 文件，该文件的内容如下，表示在 git commit 前执行一下 npx --no -- commitlint --edit $1 指令，对 commit 的注释进行校验。

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

npx --no-install commitlint --edit ""

7. 添加 pre-commit hook

pre-commit 文件中可以配置在 git commit 前需要执行的操作

可手动创建文件再输入文件内容，但是建议使用命令创建，命令如下，下面出现的 npm run lint-staged 指令会在接下来的内容中解释(lint-staged 为 husky 的辅助工具)。

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

上面命令执行成功后会在 .husky 目录下生成一个 pre-commit 文件，该文件的内容如下，表示在 git commit 前执行一下 npm run lint-staged 指令，对所有代码进行 eslint校验 和 stylelint校验 ，不符合校验规则就终止 commit。

8. 安装 Lint-staged

npm install lint-staged --save-dev

9. 配置 Lint-staged

{
  "script": {
    "prepare": "husky install",
    "lint-staged": "lint-staged", // 必须配置，否则找不到命令
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "eslint --fix"
    ],
    "*.less": [
      "stylelint --fix  --custom-syntax postcss-less"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
}

当我们执行 git commit 时，就会触发 husky 的 pre-commit 钩子，调用 lint-staged 命令。