使用 husky + lint-staged + eslint 实现代码规范自动检测与提交拦截

使用 husky + lint-staged + eslint 实现代码规范自动检测与提交拦截

本文将指导你如何使用 husky、lint-staged 和 eslint 实现代码规范的自动检测，并在代码提交前拦截不符合规范的代码。通过这种方式，你可以确保团队代码风格的一致性，并避免不规范的代码被提交到代码库中。

---

1. 安装依赖

首先，安装 husky 和 lint-staged 作为开发依赖：

npm install husky lint-staged -D

• husky：用于管理 Git 钩子，可以在 Git 操作的特定阶段（如提交代码前）自动运行脚本。
• lint-staged：用于对 Git 暂存区（staged）中的文件运行指定的任务（如代码检查、格式化等）。

---

2. 初始化 husky

运行以下命令初始化 husky：

npx husky init

该命令会自动在项目中创建 .husky 目录，并在 package.json 中添加一个 prepare 脚本：

{
  "scripts": {
    "prepare": "husky install"
  }
}

• prepare 脚本：在安装依赖后自动执行 husky install，确保 Git 钩子被正确安装。

---

3. 配置 lint-staged

接下来，配置 lint-staged，使其在提交代码前对暂存区中的 JavaScript 文件运行 eslint 检查。

在 package.json 中添加以下配置：

{
  "lint-staged": {
    "*.js": [
      "eslint"
    ]
  }
}

• lint-staged：指定对暂存区中的 .js 文件运行 eslint 检查。
• 你可以根据需要扩展配置，例如添加对 .ts、.vue 等文件的检查。

---

4. 设置提交前钩子（pre-commit）

在 .husky 目录中，创建一个 pre-commit 钩子文件，并添加以下内容：

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

npx lint-staged

• pre-commit 钩子：在每次执行 git commit 时，自动运行 npx lint-staged。
• npx lint-staged：对暂存区中的文件运行 lint-staged 配置的任务（如 eslint 检查）。

---

5. 验证配置

完成上述步骤后，当你尝试提交代码时，husky 会自动触发 pre-commit 钩子，运行 lint-staged 并检查暂存区中的代码。如果代码不符合规范，eslint 会报错并阻止提交。

示例：

1. 修改一个 .js 文件并添加到暂存区：

   git add example.js
   

2. 尝试提交代码：

   git commit -m "Update example.js"
   

3. 如果 example.js 中有不符合规范的代码，eslint 会报错并阻止提交。你需要修复代码后重新提交。

---

总结

通过 husky、lint-staged 和 eslint 的结合，你可以轻松实现代码规范的自动检测与提交拦截。这种方式不仅提高了代码质量，还减少了团队协作中的代码风格冲突。

主要步骤回顾：

1. 安装 husky 和 lint-staged。
2. 初始化 husky，并配置 prepare 脚本。
3. 在 package.json 中配置 lint-staged，指定对暂存区中的文件运行 eslint。
4. 创建 pre-commit 钩子，确保提交前自动运行 lint-staged。

现在，你的项目已经具备了自动代码规范检测与提交拦截的功能！