了解 .husky：前端项目中的 Git Hooks 工具

在日常开发中，我们经常会遇到这样的问题：

团队成员提交的代码风格不一致（缩进、引号、分号）。
有些低级错误（如 console.log、未使用的变量）混入了提交。
提交信息随意，难以追踪。

这些问题会导致代码库质量下降、协作成本增加。

而 Husky 就是为了解决这些问题的工具。

1. 什么是 Husky？

Husky 是一个 Git Hooks 工具，能让你在 Git 操作的不同阶段（如 commit、push）执行脚本。

Git Hooks 本来就存在，但原生配置麻烦。Husky 简化了这一过程，让我们只需要在 .husky/ 目录下放置对应的脚本即可。

常见的 Git Hooks

pre-commit：在提交前触发，常用于代码检查（lint、test）。
commit-msg：在提交信息时触发，用于校验提交信息格式。
pre-push：在 push 之前触发，用于运行测试或构建。

2. `.husky` 目录长什么样？

一个典型的 Vue 或 React 项目中可能有这样的目录：

bash 复制代码

.husky/
 ├── pre-commit      # 提交前执行，比如 eslint 检查
 ├── commit-msg      # 校验提交信息

每个文件就是一个 Hook 脚本，例如 pre-commit：

bash 复制代码

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

npm run lint

意思是：在提交前，先执行 npm run lint 。

如果检查不过，提交会被中断。

3. 如何安装和使用 Husky？

步骤 1：安装依赖

css 复制代码

npm install husky --save-dev

步骤 2：启用 Git Hooks

复制代码

npx husky install

这会在项目根目录生成 .husky/ 文件夹。

步骤 3：添加 Hook

例如添加一个 pre-commit：

sql 复制代码

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

这样每次 git commit 时都会执行 npm run lint。

4. 常见配合工具

Husky 本身只是运行脚本的工具，通常会配合其他工具使用：

ESLint + Prettier

格式化和检查代码，保证风格统一。
sql 复制代码
```
npx husky add .husky/pre-commit "npx lint-staged"
```
配合 lint-staged 只检查改动过的文件，提高效率。
Commitlint

检查提交信息是否符合规范（如 Angular 提交规范）。

在 .husky/commit-msg 里写：
bash 复制代码
```
npx commitlint --edit $1
```
测试工具（Jest、Vitest 等）

可以在提交或推送前运行测试，防止错误进入主分支。

5. 优点和注意事项

优点

保证代码质量：提交前自动检查。
提交记录更规范：易于追踪和生成 changelog。
自动化：减少人为疏漏。

注意事项

不要把 Hook 脚本写得太重，否则会拖慢提交流程。
如果只需要检查改动的文件，最好结合 lint-staged。
.husky/ 目录需要提交到仓库，否则其他开发者不会生效。

6. 总结

.husky 是现代前端项目中常用的工具，用来结合 Git Hooks 管理代码质量。

个人项目 ：可以简化，甚至删除 .husky，保持轻量。
团队项目：推荐保留，并结合 ESLint、Prettier、Commitlint 一起使用。

一句话总结：

👉 Husky 并不会影响代码运行，它只是为团队的"提交环节"加了一道保险。