前言
husky的作用就是在提交代码时触发不同的钩子,执行不同脚本,帮忙我们自动化的处理一些任务,这些钩子称为git hook。例如,我们可以在git commit之前进行eslint语法检查,如果检查不通过,git commit就会中断执行,这样就保证了提交到远程的代码是通过eslint检查的。
husky的基本使用
以下步骤适用于husky v9之前的版本。
1. 安装
npm i husky -D
2. 启动husky
husky install
该指令的作用就是在工程目录下添加了一个.husky的文件。
3. 添加script脚本
npm pkg set scripts.prepare="husky install"
该指令的就是在package.json中插入一个script脚本。用于在npm install时自动启动git hooks。
4. 添加pre-commit钩子
npx husky add .husky/pre-commit "npm test"
该命令在.husky文件夹下创建了一个pre-commit文件。
注意:使用pnpm dlx husky-init可以同时实现第三步和第四步的操作,不过需要node为18版本以上。
lint-staged
当只想对暂存区(staged area)的文件进行lint检查,那么可以借助lint-staged来实现。
1.安装
pnpm i lint-staged -D
2. 配置
可以直接在package.json文件中添加配置,也可以新建.lintstagedrc.json文件增加配置。
package.json的配置demo:
{
"lint-staged": {
"src/**/*.{js,cjs,ts,html,json,css,scss,vue}": ["npx prettier --write"],
"src/**/*.{js,cjs,ts,vue}": ["npx eslint --fix"]
}
}
.lintstagedrc.json的配置demo:
{
"src/**/*.{js,cjs,ts,html,json,css,scss,vue}": ["npx prettier --write"],
"src/**/*.{js,cjs,ts,vue}": ["npx eslint --fix"]
}
说明:
src/**/*.{js,jsx}:匹配 src 目录下所有的 js 和 jsx 文件。- 匹配规则:
- ** 表示递归匹配目录
/*.{js,jsx}会展开为/*.js /*.jsx- 逆向匹配:
!(目录名1|目录名2)/**/*.{js,jsx}匹配除了目录名1和目录名2外的所有目录下的js和jsx文件
3. 结合husky使用
在package.json增加script脚本:
之后在pre-commit文件上面添加npm run lint-staged:
4. 验证
husky v9版本的使用
不推荐使用npx husky init进行husky初始化。因为它生成的git hooks不能执行。最终会报如下错误:
百度说可能跟电脑系统有关,Windows系统会报相应的错误,不知道Mac或者Linux会不会报错。
如有大佬知道该报错的解决办法,欢迎评论!
如果你使用了husky v9的版本,可以使用pnpm dlx husky-init启动git hooks。此命令要求node为18以上版本。