husky 是一个 Git Hooks 工具，借助 husky 我们可以在 git 流程的不同生命周期进行一些自动化操作。本文主要介绍提交前 eslint 校验和提交时 commit 信息的规范校验。
什么是 Git Hooks ？
Git Hooks 就是 git 流程中不同的生命周期回调。
husky官网
一、使用最新版 husky （v8.0.0）进行配置
直接根据官网操作就行了。
安装husky
npx husky-init && npm install
提交前代码校验配置流程
1. 安装 lint-staged
npm i -D lint-staged
注意：推荐使用 npm 安装 eslint 和 husky，因为在 windows 操作系统下, 用 yarn 安装依赖，不会触发 husky pre-commit 钩子命令。
lint-staged: 用于实现每次提交只检查本次提交所修改的文件。
2. 添加 pre-commit 钩子
如果项目根目录的 .husky 文件夹下还没有 pre-commit 文件，可以执行下面这行命令添加 pre-commit 钩子：
npx husky add .husky/pre-commit 'npm run pre-commit'
3. 在 package.json 添加 scripts
{
"prepare": "husky install",
"pre-commit": "lint-staged"
}
4. 新建 .lintstagedrc 配置文件
{
"src/**/*.{ts,vue}": [
"prettier --write",
"eslint --fix"
]
}
这个配置文件的意思是，提交时会用 prettier 格式化代码，再用 eslint 修复代码。如果有 eslint 校验不通过的，就会中断提交。
如果提交时你只想让 eslint 校验代码而不自动修复，可以把 'eslint --fix' 改成 'eslint'。
到这里，代码提交前的代码检验已经全部配置好了，当然，提前是你已经配置好 eslint 了。
提交时 commit msg规范校验配置流程
涉及的 git hook：commit-msg
提交信息检查插件: commitlint
1. 安装 commitlint
npm install --save-dev @commitlint/{config-conventional,cli}
2. 创建 commitlint.config.js 配置文件
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
上面这行代码会自动创建 commitlint.config.js 文件。
commitlint.config.js 配置说明如下：
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [ // type枚举
2, 'always',
[
'build', // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
'feat', // 新功能
'fix', // 修补bug
'docs', // 文档修改
'style', // 代码格式修改, 注意不是 css 修改
'refactor', // 重构
'perf', // 优化相关，比如提升性能、体验
'test', // 测试用例修改
'revert', // 代码回滚
'ci', // 持续集成修改
'config', // 配置修改
'chore', // 其他改动
],
],
'type-empty': [2, 'never'], // never: type不能为空; always: type必须为空
'type-case': [0, 'always', 'lower-case'], // type必须小写，upper-case大写，camel-case小驼峰，kebab-case短横线，pascal-case大驼峰，等等
'scope-empty': [0],
'scope-case': [0],
'subject-empty': [2, 'never'], // subject不能为空
'subject-case': [0],
'subject-full-stop': [0, 'never', '.'], // subject以.为结束标记
'header-max-length': [2, 'always', 72], // header最长72
'body-leading-blank': [0], // body换行
'footer-leading-blank': [0, always], // footer以空行开头
}
}
3. 添加 commit-msg 钩子
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
commit-msg 文件里的内容也可以换成其他的，比如你想执行你自己定义的 commitlint script:
npx husky add .husky/commit-msg "npm run commitlint"
{
"commitlint": "commitlint --config commitlint.config.js -e -V"
}
二、commitlint 提交信息规范语法
提交信息规范
提交信息语法：
type(scope?): subject 换行 body 换行 footer
示例：
chore: run tests on travis ci
feat(blog): add comment section
commitlint rule 语法
rule 语法：规则名称: [级别, 适用, 值]
- 级别：可选0,1,2。0禁用规则，1警告，2报错。
- 适用：可选 always, never。
三、旧版 husky 配置流程（v4.x）
安装（同上）
创建 .huskyrc
{
"hooks": {
// 提交commit时触发
"pre-commit": "lint-staged",
// 检测commit的message时触发
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
创建 .lintstagedrc（同上）
设置 fix 可以自动修复错误：
{
"src/**/*.js": ["eslint --fix", "git add"]
}
或者使用下面的配置，自动格式化代码（谨慎使用）：
{
"src/**/*.js": ["prettier --write", "git add"]
}
创建 commitlint.config.js（同上）
三、配置不拆分成多个文件的话也可以全部写在 package.json 里面
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.js": "prettier --write --ignore-unknown"
}
}
