Git 提交规范（三）：使用 pre-commit 检测代码规范

在前面的文章中，我们已经学习了如何使用 commitizen 和 husky 控制 Git 提交规范。虽然这样可以保证提交信息的格式，但仍然存在代码规范问题。如果项目中使用了 ESLint 和 Prettier，虽然可以通过手动在 VS Code 中配置自动保存来解决代码规范问题，但团队成员可能没有统一配置，或者在提交前没有进行代码格式化。

为了解决这个问题，我们可以使用 pre-commit 和 lint-staged 来确保每次提交代码时，代码格式和规范都符合团队的要求。

本文将详细讲解如何配置和使用 pre-commit 和 lint-staged 来检测和自动修复代码规范问题，进一步完善 Git 提交流程。

前置要求

本文假设你已经完成了以下操作：

1. 在项目中安装并配置了 ESLint 和 Prettier。
2. 了解如何使用 husky 配置 Git 钩子。

如果你还没有完成这些操作，可以参考以下文章：

• Git 提交规范（一）：使用 commitizen
• Git 提交规范（二）：使用 husky 控制 git hook

使用到的工具

• pre-commit：在提交代码时，自动检测代码规范，阻止不符合规范的提交。
• lint-staged：在提交代码时，只对变更的文件进行自动修复格式错误。

一、配置 pre-commit

1.1 安装并配置 pre-commit

pre-commit 是一个 Git 钩子，它可以在 git commit 时执行预定义的命令来检查代码规范。我们可以通过 husky 配置 pre-commit 钩子。

执行以下命令，在 .husky 目录中添加 pre-commit 钩子：

npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"

上述命令将会创建一个 .husky/pre-commit 文件，并在每次提交前运行 eslint 来检查 src 目录下的 .js 和 .vue 文件的代码规范。

如果项目中使用了 TypeScript，还需要进行类型检查。接下来我们将添加类型检查的配置。

1.2 安装 vue-tsc

vue-tsc 是一个用于 TypeScript 项目中的类型检查工具，支持 Vue 文件。我们需要将其安装为开发依赖：

npm install vue-tsc --save-dev

1.3 添加类型检测命令

在 package.json 文件中的 scripts 中添加一个 typecheck 命令：

{
  "scripts": {
    "typecheck": "vue-tsc --noEmit --skipLibCheck"
  }
}

1.4 修改 pre-commit 钩子

在 .husky/pre-commit 文件中，修改为以下内容：

npx eslint --ext .js,.vue src && npm run typecheck

这样，我们在提交代码前不仅会进行 ESLint 检查，还会进行 TypeScript 类型检查。

1.5 测试 pre-commit 配置

为了测试 pre-commit 钩子的效果，可以故意编写一段不符合 ESLint 规范的代码，然后执行 git commit。我们会看到提交请求被拦截，并提示代码不符合规范。

例如：

二、使用 lint-staged 自动修复格式错误

lint-staged 是一个工具，可以在提交代码时自动格式化符合规范的文件。在使用 git commit 时，lint-staged 只会对暂存区的文件进行检查和修复，从而提高效率。

2.1 配置 lint-staged

lint-staged 已经作为依赖项在大多数现代前端项目中被自动安装。我们只需要在 package.json 中进行配置。

在 package.json 的同级目录添加以下配置：

{
  "lint-staged": {
    "*.{vue,js,jsx,ts,tsx,json}": ["eslint --fix", "git add"]
  }
}

上述配置将会对所有 vue、js、jsx、ts、tsx 和 json 文件运行 eslint --fix 命令，然后自动添加修复后的文件到暂存区。

2.2 测试 lint-staged 配置

再次编写一段格式不正确的代码，然后执行 git commit。这次，我们会看到 lint-staged 自动修复了代码中的格式错误，并完成提交。

三、总结与建议

通过使用 pre-commit 和 lint-staged，我们可以确保所有提交的代码都符合团队的代码规范和格式要求。这不仅提高了代码质量，还减少了代码审核中的重复工作。同时，通过 husky 集成这些工具，开发者不需要手动运行这些命令，进一步提高了开发效率。

3.1 提高团队代码规范统一性

在团队合作中，统一的代码规范和格式有助于减少代码合并时的冲突，提升代码可读性。使用 pre-commit 和 lint-staged 可以在提交前进行自动化检查和修复，确保每个人的代码都符合统一的标准。

3.2 自动化提高开发效率

开发者在提交代码时，通常会忘记格式化代码或检查类型错误。使用 pre-commit 和 lint-staged，可以将这些过程自动化，避免人为错误。

3.3 避免阻塞提交的代码检查

需要注意的是，如果项目中包含大量文件或复杂逻辑，执行 eslint 和 vue-tsc 的时间可能会比较长。这时可以使用 lint-staged 对更改的文件进行增量检查和修复，从而避免阻塞提交流程。

通过本文的介绍，你可以掌握如何在项目中集成 pre-commit 和 lint-staged，自动化检测和修复代码规范问题，提高开发效率和代码质量。