Lint-Staged 与 Husky：Git Hooks 在代码质量保证中的应用

好的，各位代码界的弄潮儿们，欢迎来到今天的“代码质量保证狂想曲”！🎶 今天我们要聊聊两个如雷贯耳，却又常常被“傻傻分不清楚”的好伙伴：Lint-Staged 和 Husky。它们就像一对黄金搭档，一个是“代码侦察兵”，一个是“代码守门员”，联手守护着我们代码的质量，让 Bug 无处遁形，让代码风格更加统一，让 Reviewer 们不再对着乱七八糟的代码抓狂！🤯

第一幕：代码质量的“血泪史” 😭

在深入 Lint-Staged 和 Husky 的世界之前，我们先来回顾一下那些年，我们被糟糕代码支配的恐惧。

• “代码风格大乱炖”： 你用空格缩进，我用 Tab 缩进，他干脆不缩进！代码 review 的时候，一半时间都在争论缩进方式，简直是浪费生命！
• “Bug 满天飞”： 代码提交前忘记运行 Lint，结果一堆语法错误、潜在 Bug 被提交上去，测试环境瞬间变成 Bug 展示场，QA 同事怒吼：“你们的代码能跑吗？！！” 💥
• “Reviewer 的噩梦”： 看着一大坨没有格式化、充满 Style 问题的代码，reviewer 内心OS：“这代码让我怎么 review？不如直接重写算了！” 🤯

相信这些场景大家都不陌生，简直是程序员的“血泪史”。为了避免这些悲剧重演，我们需要一些工具来规范我们的代码，提高代码质量，让团队协作更加顺畅。

第二幕：Git Hooks 的“前世今生” 📜

想要理解 Lint-Staged 和 Husky，就必须先了解 Git Hooks。Git Hooks 就像 Git 生命周期的各个关键节点上的“钩子”，允许我们在特定事件发生时执行自定义脚本。

可以把 Git Hooks 想象成一个舞台，而我们提交代码的过程就是一场演出。在演出的不同阶段（例如：准备提交、提交完成、推送之前），Git 会在舞台上设置一些“机关”，这些机关就是 Git Hooks。我们可以编写脚本，并把它们“挂”在这些机关上，这样在演出进行到特定阶段时，这些脚本就会自动执行。

常见的 Git Hooks 包括：

• pre-commit: 在提交之前运行，可以用来检查代码风格、运行单元测试等。
• commit-msg: 在提交信息创建之后，提交之前运行，可以用来检查提交信息是否符合规范。
• pre-push: 在推送之前运行，可以用来运行集成测试、检查代码覆盖率等。

Git Hooks 的脚本可以使用任何你喜欢的脚本语言编写，例如 Bash、Python、Node.js 等。

第三幕：Husky：Git Hooks 的“好管家” 🤵

直接使用 Git Hooks 有一些缺点：

• 配置繁琐： 需要手动创建 .git/hooks 目录下的脚本文件，并设置执行权限。
• 版本控制困难： .git 目录下的文件不会被 Git 管理，这意味着团队成员需要手动同步 Git Hooks 脚本。
• 可维护性差： 如果需要修改 Git Hooks 脚本，需要手动修改每个人的本地仓库。

这时候，Husky 就闪亮登场了！🎉 Husky 是一个 Git Hooks 管理工具，它可以帮助我们更方便地配置和管理 Git Hooks。

Husky 的主要功能：

• 简化配置： 通过 package.json 文件配置 Git Hooks，无需手动创建 .git/hooks 目录下的脚本文件。
• 版本控制： Husky 的配置信息保存在 package.json 文件中，可以被 Git 管理，方便团队成员同步。
• 提高可维护性： 修改 package.json 文件中的 Git Hooks 配置，所有团队成员都会自动同步。

简单来说，Husky 就像一个 Git Hooks 的“好管家”，帮我们打理 Git Hooks 的各种琐事，让我们专注于编写 Git Hooks 脚本本身。

如何使用 Husky？

1. 安装 Husky：

   npm install husky --save-dev
   # 或者
   yarn add husky --dev

2. 启用 Git Hooks：

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

   {
     "husky": {
       "hooks": {
         "pre-commit": "echo 'Running pre-commit hook' && your-command"
       }
     }
   }

   或者使用 Husky 提供的命令行工具：

   npx husky install
   npx husky add .husky/pre-commit "echo 'Running pre-commit hook' && your-command"

3. 编写 Git Hooks 脚本：

   在 pre-commit 钩子中，我们可以编写任何我们想要执行的脚本，例如运行 Lint、单元测试等。

举个例子：

假设我们想要在每次提交之前运行 ESLint 来检查代码风格，我们可以这样配置 Husky：

{
  "husky": {
    "hooks": {
      "pre-commit": "eslint ."
    }
  }
}

这样，每次我们执行 git commit 命令时，Husky 就会自动运行 eslint . 命令来检查代码风格。如果 ESLint 检查出任何错误，提交就会被阻止。

第四幕：Lint-Staged：只关注“舞台上的演员” 🎭

现在我们有了 Husky 这个“好管家”，可以方便地配置和管理 Git Hooks。但是，如果我们每次提交都对所有文件运行 Lint，效率就会比较低，尤其是当项目很大的时候。

这时候，Lint-Staged 就派上用场了！🦸 Lint-Staged 是一个 Git Hooks 工具，它可以让我们只对 “暂存区” (Staged Area) 中的文件运行 Lint。

“暂存区”就像舞台上的“化妆间”，只有准备好上台的“演员”（代码文件）才会进入化妆间。Lint-Staged 只关注化妆间里的“演员”，也就是即将被提交的代码文件，这样可以大大提高 Lint 的效率。

如何使用 Lint-Staged？

1. 安装 Lint-Staged：

   npm install lint-staged --save-dev
   # 或者
   yarn add lint-staged --dev

2. 配置 Lint-Staged：

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

   {
     "lint-staged": {
       "*.js": "eslint --fix",
       "*.css": "stylelint --fix"
     }
   }

   这个配置表示：

   • 对所有 .js 文件运行 eslint --fix 命令。
   • 对所有 .css 文件运行 stylelint --fix 命令。

3. 将 Lint-Staged 集成到 Husky：

   修改 package.json 文件中的 Husky 配置：

   {
     "husky": {
       "hooks": {
         "pre-commit": "lint-staged"
       }
     }
   }

   这样，每次我们执行 git commit 命令时，Husky 就会自动运行 lint-staged 命令，Lint-Staged 会只对暂存区中的文件运行 Lint。

举个例子：

假设我们想要在每次提交之前，只对暂存区中的 JavaScript 文件运行 ESLint，并且自动修复 ESLint 报告的错误，我们可以这样配置 Lint-Staged 和 Husky：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --fix"
  }
}

第五幕：Lint-Staged + Husky：代码质量的“完美搭档” 🤝

现在，我们把 Lint-Staged 和 Husky 组合起来，就形成了一个强大的代码质量保证体系。

• Husky 负责管理 Git Hooks，简化配置，提高可维护性。
• Lint-Staged 负责只对暂存区中的文件运行 Lint，提高效率。

它们就像一对“完美搭档”，共同守护着我们的代码质量，让 Bug 无处遁形，让代码风格更加统一。

使用 Lint-Staged + Husky 的好处：

• 提高代码质量： 强制执行代码风格规范，减少 Bug 的产生。
• 提高开发效率： 减少代码 review 的时间，让 reviewer 专注于代码逻辑本身。
• 提高团队协作效率： 统一的代码风格，让团队成员更容易理解和维护代码。
• 减少代码冲突： 统一的代码风格，减少因代码风格不一致而导致的代码冲突。
• 自动化代码质量检查： 每次提交代码都会自动运行 Lint，确保代码质量。

第六幕：一些“锦上添花”的小技巧 🌺

• 使用 prettier 格式化代码： prettier 是一个代码格式化工具，可以自动格式化代码，让代码风格更加统一。可以将 prettier 集成到 Lint-Staged 中，在每次提交之前自动格式化代码。
• 运行单元测试： 在 pre-commit 钩子中运行单元测试，确保代码的正确性。
• 使用 commitlint 检查提交信息： commitlint 是一个提交信息检查工具，可以检查提交信息是否符合规范。
• 配置 editorconfig 文件： editorconfig 文件可以定义代码编辑器的行为，例如缩进方式、字符编码等。可以配置 editorconfig 文件，让团队成员使用相同的代码编辑器配置。

第七幕：总结与展望 🚀

Lint-Staged 和 Husky 是两个非常强大的工具，可以帮助我们提高代码质量，提高开发效率，提高团队协作效率。它们就像代码质量的“守护神”，守护着我们的代码，让我们的项目更加健壮、可靠。

当然，代码质量保证是一个持续改进的过程，我们需要不断学习新的技术，不断完善我们的代码质量保证体系。希望今天的分享能够帮助大家更好地理解 Lint-Staged 和 Husky，并在实际项目中应用它们，让我们的代码更加优雅、健壮！ 💪

最后，祝各位代码界的弄潮儿们，编码愉快，Bug 远离！ 🎉