前端工程化利器：使用 Husky 守护你的代码质量

在现代前端项目的团队协作中，我们经常面临一些挑战：

有人提交了未格式化的代码，导致代码风格混乱。
有人提交了带有明显语法错误的代码。
有人提交了导致单元测试失败的代码。
Git 提交信息五花八门，难以追溯。

这些问题不仅影响开发效率，还严重降低了代码仓库的质量。为了解决这些问题，我们需要一道自动化防线，在代码被提交到仓库之前进行有效拦截。Husky 就是这道防线的完美守门员。

什么是 Husky？

简单来说，Husky 是一个能让你轻松使用 Git Hooks 的工具。

那么什么是 Git Hooks（Git 钩子）呢？Git Hooks 是 Git 提供的一种机制，它允许你在 Git 执行特定操作（如 commit、push 等）之前或之后，触发自定义的脚本。

虽然 Git 原生就支持 Hooks，但它的配置相对繁琐：需要手动编写脚本并放置在 .git/hooks 目录下，而且这个目录本身不会被 Git 版本控制，团队成员之间无法共享。

Husky 优雅地解决了这些问题。它能让你将 Git Hooks 的配置作为项目依赖进行管理（记录在 package.json 中），并在 .husky/ 目录下生成脚本文件，轻松实现团队间的配置共享。

为什么需要 Husky？

集成 Husky 可以为我们的项目带来诸多好处：

自动化代码检查：在 pre-commit（提交前）阶段运行 Linter（如 ESLint）和 Formatter（如 Prettier），确保所有提交的代码都符合团队规范。
保证代码质量：在 pre-commit 或 pre-push（推送前）阶段运行单元测试，防止有问题的代码被合入主分支。
执行自定义校验：可以运行任何自定义的脚本来满足项目的特定需求，例如检查提交信息是否包含任务单号。
提升团队协作效率：将代码质量的“卡点”前置到本地开发环境，避免了 Code Review 时才发现低级错误，节省了团队成员的时间。

如何安装和配置 Husky？

下面我们通过一个实际案例，一步步在项目中集成 Husky。

第 1 步：安装 Husky

首先，将 Husky 安装为项目的开发依赖。

# 使用 npm
npm install husky --save-dev

# 使用 yarn
yarn add husky --dev

# 使用 pnpm
pnpm add husky -D

第 2 步：启用 Git Hooks

运行以下命令来初始化 Husky，它会创建 .husky/ 目录，并让 Husky 接管项目的 Git Hooks。

npx husky init

这个命令做了两件事：

创建一个 .husky/ 目录。
在 package.json 的 scripts 中添加一条 "prepare": "husky" 命令。这个 prepare 脚本会在 npm install (或 yarn/pnpm install) 之后自动执行，确保新成员拉取项目后，Husky 能够被正确安装。

第 3 步：添加 Hooks

现在，我们可以添加需要的 Hook 了。Hook 就是一个脚本，当某个 Git 事件发生时，它就会被执行。

示例 1：在提交前进行代码检查和测试

最常见的需求是在提交（commit）前，自动运行代码风格检查和单元测试。

我们可以通过以下命令添加一个 pre-commit 钩子：

npx husky add .husky/pre-commit "npm run lint && npm test"

执行后，.husky/ 目录下会生成一个 pre-commit 文件。现在，每当你执行 git commit 时，npm run lint 和 npm test 命令就会被依次触发。如果其中任何一个命令执行失败（例如，代码检查不通过或测试用例失败），整个 commit 过程就会被中止，从而有效防止不合格的代码进入版本库。

注意：如果你的 lint 或 test 命令需要扫描整个项目，当项目规模变大时，可能会导致每次提交的等待时间变长。

示例 2：在推送前运行更全面的测试

有些测试（如端到端测试 E2E tests）运行时间很长，不适合在每次提交时都运行。我们可以将它们放在 pre-push 钩子中，只在推送到远程仓库前执行一次。

npx husky add .husky/pre-push "npm run test:e2e"

这样，只有在本地的所有检查都通过后，准备将代码分享给团队时，才会运行这些耗时较长的检查，这是一个很好的平衡策略。

总结

Husky 是一个看似简单却极其强大的工具。它通过简化 Git Hooks 的管理和共享，为前端项目建立了一道重要的本地质量防线。无论是个人项目还是团队协作，集成 Husky 都能帮助我们自动化执行代码检查、测试和各种自定义脚本，从源头上保障代码质量，养成良好的开发习惯。

将 Husky 集成到你的工作流中，是迈向标准化、自动化和高质量交付的重要一步。