[Git Hooks] 在代码提交前自动格式化代码

846 阅读2分钟

背景

另一篇文章中,我们讨论了如何制定代码规范,但是这些静态校验并不是强制的。有些团队成员或刚加入的实习生可能没有在编辑器中配置 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-commitshell 脚本。脚本内容如下:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint & npm run lint:style && git add .

现在,让我们执行 git commit

use_eslint_prettier_stylelint_img_4.jpg

一旦执行提交命令,我们会发现 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 规则。如果内容符合规则,则提交成功;如果不符合规则,会尝试自动修复。修复成功后,会自动提交修复后的代码。如果修复失败,将给出提示错误,直到你修复完错误后,方可提交代码。

use_eslint_prettier_stylelint_img_5.jpg