| 工具 | 作用 | 类比 |
|---|---|---|
| Commitizen(cz) | 提供一个命令行工具,让你用选择题方式填写提交信息 | "提交信息输入界面" |
| cz-git | Commitizen 的更好看的适配器,定义提交格式 | "提交信息模板 + UI" |
| Husky | Git 钩子工具,在提交前/提交后自动执行脚本 | "大门保安,检查是否允许提交" |
🔍 详细解释
1️⃣ Commitizen ------ 工具
👉 帮助你用交互式命令行来写 git commit
比如:
javascript
npx cz
会出现选择题形式:
javascript
? Select the type of change:
feat
fix
docs
refactor
chore
...
目的:让开发者不需要自己思考 commit message 规则。
本质就是:
-
替代
git commit -m "xxx" -
引导你一步一步填写内容
2️⃣ cz-git ------ Commitizen 的适配器(插件)
Commitizen 本身只是一个外壳,需要由"适配器"提供 实际的提交流程 UI 和规则。
你可以理解:
-
Commitizen = 车
-
cz-git = 引擎 + 内饰 + 操作界面
cz-git 的特点:
✔ UI 好看
✔ 自动带 emoji 😍
✔ 可自定义 types、scopes、主题
✔ 支持中文
✔ 更符合现代前端规范
例如:
javascript
🚀 feat: A new feature
🧩 fix: A bug fix
📚 docs: Documentation changes
它让"选择题式 commit"更好用。
3️⃣ Husky ------ Git 钩子工具
它和 Commitizen、cz-git 完全不是一个类型。
👉 Husky 用来拦截 Git 提交
你可以让它做:
-
在
git commit时自动运行 commitlint(验证提交格式) -
在
git push前自动跑测试 -
在提交前自动运行 Prettier、ESLint
例如:
javascript
.git/hooks/pre-commit
.git/hooks/commit-msg
开发者不能跳过这些检查。
例如 commit-msg 钩子:
javascript
npx husky add .husky/commit-msg "npx commitlint --edit \$1"
效果:
⛔ 如果提交格式不符合规则 → 拦截
✔ 只有符合规范的 commit 才能提交
🔥 三者关系图(关键)
javascript
┌────────────────────────────┐
│ Commitizen │
│ (提供选择题输入界面) │
└────────────┬──────────────┘
│
▼
┌────────────────────────────┐
│ cz-git │
│ (定义 commit 规范模板) │
└────────────┬──────────────┘
│ 写出的 commit message
▼
┌────────────────────────────┐
│ Husky │
│ 在 commit-msg 钩子里执行 │
│ commitlint │
│ (检查 message 是否合规) │
└────────────────────────────┘
Commitizen + cz-git = 写出规范 commit
Husky + commitlint = 强制不规范 commit 提交失败
📌 为什么它们需要一起用?
✔ Commitizen + cz-git
提供好看的 UI,帮助你写规范的 commit。
✔ 但用户可能不用 cz,而直接写 commit...
比如有人直接写:
javascript
git commit -m "update"
这会破坏 commit 规范。
所以才需要:
✔ Husky + commitlint
强制检查每个 commit message 是否合规。
不合规则报错:
javascript
⛔ type may not be empty
🎉 最终效果(大厂标准)
你现在可以做到:
✔ 每次 commit 必须使用规范格式
✔ 自动提示填写 commit message
✔ 自动对提交做 lint / prettier 格式化
✔ 避免垃圾 commit message
✔ 代码库清晰、可维护
✔ 完全符合 Angular / Vite / Vue / React 官方规范
这是 高质量团队 必备的工程化流程。