实现eslint/stylelint的 git提交时拦截校验
想要达到的效果:
- 在我们提交代码时,先自动使用eslint/stylelint的检查代码,并自动修复错误
- 如果修复不了在报错。并且报错后此次的commit不会提交
- 对老代码无影响,只校验git commit部分的代码
使用到的工具介绍
安装: npm i -D husky lint-staged
- husky
- 一个 git 钩子工具,在这个需求中我们主要使用到了 pre-commit 钩子。
- 通俗点来说,就是 husky 可以在你 commit 之前帮你做一些事情。
lint-staged
- 在你提交的文件中,执行自定义的指令。(比如执行eslint —fix)
此工具还可以用于其他git commit之前的校验,如commitlint等等
具体配置
// 在 package.json 内
{
"husky": {
"hooks": {
...
"pre-commit": "lint-staged" // pre-commit,提交前的钩子
}
},
"lint-staged": {
// 此处可以配置文件夹和文件类型的范围
"src/**/*.{js,vue}": [
"eslint --fix", // 先使用 eslint 进行自动修复
"git add" // 通过的话执行 git
]
"src/**/*.{html,vue,css,sass,scss}": [ // 同上,配置stylelint
"stylelint --fix",
"git add"
]
},
...
}