1. 起源

1.1 Git hooks

Git 提供了 hooks，可以在特定节点执行自定义脚本。Git 提供的钩子分为两类：客户端钩子和服务端钩子。

客户端钩子一般在提交工作流时使用，比较常用的有：

pre-commit
commit-msg

服务端钩子在将信息推送到服务端之前或之后运行，常用的有：

pre-receive
post-receive

其余所有 hooks 可以参考 Git 官网。

Git hooks 存在于 .git/hooks 文件夹下，不会随着其他文件的提交而提交，无法与团队共享，进行版本控制。

1.2 Husky

Husky 是一个配置 Git hook 的工具，它解决了上述问题，同时也降低了开发人员编写 hooks 脚本的难度。

2. 使用

2.1 安装

Husky 官方推荐的安装方式：

npx husky-init && npm install

安装完成后，会自动在项目下生成 .husky 文件夹，并生成 pre-commit 钩子：

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

npm test

2.2 配合 ESLint 使用

如果项目中已经配置好了 ESLint，更改下脚本内容，就可以配合 ESLint 使用了：

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

npm run lint

2.3 配合 commitlint 使用

2.3.1 commit message 规范

关于 commit meassge，比较流行的是 AngularJS 版本：

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

type：commit 类型
scope：commit 的影响范围，可按组件或功能划分，视情况而定
subject：简单描述此次 commit
body：详细描述此次 commit
footer：如果是重大变更，需要填写 footer

2.3.2 commitlint

commitlint 是对 commit message 进行校验的工具，可以通过配置 rules，来让 commit message 符合某个规范。

下载 @commitlint/cli 和 @commitlint/config-conventional（社区开源的规则集，基于 Angular 标准）：

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

配置文件 commitlint.config.js ，可配置项见官网：

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2, // 0=disable ｜ 1=warn ｜ 2=error
      "always", // always ｜ never
      ["upd", "feat", "refactor", "docs", "chore", "style", "revert"],
    ],
  },
};

使用 husky add <file> [cmd] 添加 commit-msg hook：

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

3. Yorkie

使用 Vue CLI 搭建新项目时，项目会自动安装 Yorkie。

Yorkie 基于 Husky 开发而成，如果项目已经集成了 Yorkie，可以直接在 package.json 的 gitHooks 里直接创建 hook。

下面是创建项目时，选择使用 ESLint，并在 commit 时 lint，脚手架自动在 package .json 里生成的配置：

"gitHooks": {
    "pre-commit": "lint-staged"
    //  ...
    //  ...add other hooks
    //  ...
  },
"lint-staged": { // 只对暂存区的文件进行 lint 检查
  "*.{js,jsx,vue}": [
    "vue-cli-service lint",
    "git add"
  ]
}

Husky 介绍与使用