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

背景

在另一篇文章中，我们讨论了如何制定代码规范，但是这些静态校验并不是强制的。有些团队成员或刚加入的实习生可能没有在编辑器中配置 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 规则。如果内容符合规则，则提交成功；如果不符合规则，会尝试自动修复。修复成功后，会自动提交修复后的代码。如果修复失败，将给出提示错误，直到你修复完错误后，方可提交代码。