关于 husky7 的配置
今天在使用husky + commitlint + lint-staged搭建项目的时候发现 husky 已经升级到了 7.x, 并且 husky7 的配置相比于之前的版本有破坏性的更改, 于是记录了一下相关的配置过程.
配置 eslint
eslint配置可以根据项目情况自行配置, 这边只是做个演示.
安装 eslint
# 安装eslint
npm install eslint -D
使用命令npm init @eslint/config生成配置文件.
这边以我的简单配置为例:
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ["eslint:recommended"],
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
globals: {
module: false,
},
rules: {},
};
安装依赖
npm install husky -D
npm install lint-staged -D
npm install @commitlint/cli @commitlint/config-conventional -D
配置 commitlint
在根目录下新建commitlint.config.js文件并且写入配置
// commitlint.config.js
module.exports = {
extends: ["@commitlint/config-conventional"],
};
配置 lint-staged
在根目录下新建.lintstagedrc.json文件并且写入配置
// .lintstagedrc.json
{
"*{js,ts}": ["eslint --color"]
}
配置 husky
在package.json中添加prepare脚本, 或者执行命令npm set-script prepare "husky install":
# 添加prepare脚本
npm set-script prepare "husky install"
# 执行prepare命令
npm run prepare
prepare脚本会在项目根目录生成.husky文件夹, 这里包含了git hooks的相关配置.
把commitlint和lint-staged相关钩子写入.husky文件夹中:
npx husky add .husky/pre-commit "npx lint-staged --allow-empty $1"
npx husky add .husky/commit-msg "npx commitlint --edit $1"
# 这两个命令在有的命令行工具可能并不能正常工作, 可以尝试以下命令
npx husky add .husky/commit-msg \"npx commitlint --edit '$1'\"
npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'
上面两个脚本执行后会在.husky 内创建两个文件:
有的终端可能不会把$1正确写入到文件中, 如果缺失了请手动补充下
# .husky/commit-msg
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx commitlint --edit $1
# .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged --allow-empty $1
如果这边还有其他一些需要通过git hooks去校验的可以直接添加在对应文件中, 比如需要添加一个test命令:
# .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged --allow-empty $1
npm test
测试
新建测试文件, 随便写一点eslint检测无法通过的代码进行测试:
// src/index.js
const temp = "hello world";
// 'temp' is assigned a value but never used.
如果此时进行git commit, 会通过git hooks检测是否有eslint报错:
如果修复所有eslint报错后, 使用不规范的commit message进行提交也会报错:
使用规范的commit message提交就能成功了
最后附上本文的 demo:
