背景
在另一篇文章中,我们讨论了如何制定代码规范,但是这些静态校验并不是强制的。有些团队成员或刚加入的实习生可能没有在编辑器中配置 ESLint,或者忽视了命令行中的错误提示,导致错误的代码被提交到仓库中。随着时间推移,ESLint 的作用逐渐减弱。
为了解决这个问题,我们可以使用 Git 的 pre-commit
钩子,在执行 git commit
命令之前对代码进行检查。
步骤一:使用 Husky 实现在代码提交前自动格式化
什么是 Husky?
Husky 是一个便捷的工具,用于使用 Git Hooks。它集成了 Git Hooks 的功能,使其更加易于使用。除此之外,Husky 还可以与其他工具(如:lint-staged
)配合使用,用于检查提交信息的格式以及对代码进行格式化等操作。
具体内容请参考这篇文章
接下来,我们可以在 package.json
中的 scripts
属性中添加格式化命令:
// package.json
"scripts": {
"lint": "eslint --ext .js,.vue src --fix",
"lint:style": "stylelint 'src/**/*.{vue,css,scss}' --fix"
}
接下来,我们需要添加 pre-commit
钩子:
npx husky add .husky/pre-commit "npm run lint & npm run lint:style && git add ."
运行该命令后,将会在 .husky
目录下新增一个名为 pre-commit
的 shell
脚本。脚本内容如下:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run lint & npm run lint:style && git add .
现在,让我们执行 git commit
一旦执行提交命令,我们会发现 Husky 的 pre-commit
钩子已经被触发,并且成功地格式化了我们的代码。
步骤二:使用 lint-staged 只对更改过的文件运行格式化
Husky 在 pre-commit
钩子执行格式化时,会对所有文件进行校验,然而,当项目变得庞大后,检查的速度也会显著降低。这时,我们可以使用 lint-staged
工具,它能够只对更改过的文件运行格式化
安装 lint-staged
npm install --save-dev lint-staged
然后修改 package.json
,增加以下配置:
{
"lint-staged": {
"src/**/*.{js,vue}": ["eslint --fix"],
"src/**/*.{vue,css,scss}": ["stylelint --fix"]
}
}
lint-staged
v10.0.0 版本修复完成后会自动执行 git add
命令,将修复后的文件添加到暂存区。因此,我们只需要添加格式化配置就可以了。
修改 .husky/pre-commit
文件:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
if [[ -e .git/MERGE_HEAD ]]; then
echo 'skip pre-commit hook...'
exit 0
fi
npx lint-staged
当你执行 git commit
命令时,会自动校验你所提交的内容是否符合项目配置的 ESLint 规则。如果内容符合规则,则提交成功;如果不符合规则,会尝试自动修复。修复成功后,会自动提交修复后的代码。如果修复失败,将给出提示错误,直到你修复完错误后,方可提交代码。