🐶 yorkie - husky 的 Fork，让 Git 钩子变得简单（在 Vue3 中使用）

作者：全栈前端老曹
版本：v1.x 入门教程（2025年最新）
🚨 本文风格：幽默暴躁吐槽 + 技术干货结合，适合所有前端/后端/全栈工程师！

---

🎯 引言：为什么你需要 yorkie？

你是不是也遇到过这样的情况？

• 想用 husky 但项目依赖冲突？
• Vue CLI 项目中 husky 配置复杂？
• 团队项目中 Git 钩子配置不统一？
• 想要更简单的 Git 钩子管理方案？

如果你的答案是"是"，那恭喜你，你已经成功加入 “Git 钩子配置事故频发俱乐部” 🎉。别担心，我不是来嘲笑你的，我是来救你的——用 yorkie 来拯救你那颗躁动不安的心。

yorkie 是什么？它是 husky 的一个 fork 版本，专门为 Vue CLI 项目定制，让你可以更简单地管理和配置 Git 钩子。再也不用担心复杂的配置和依赖冲突了！让机器去做这些烦人的事情，你只管写代码、摸鱼、打游戏！

---

🎯 学习目标：读完这篇文章你能干啥？

1. ✅ 理解 yorkie 的基本概念和原理
2. ✅ 掌握 yorkie 与 husky 的区别
3. ✅ 能够在 Vue3 项目中配置和使用 yorkie
4. ✅ 了解常见问题及解决方法
5. ✅ 熟悉 yorkie 与 lint-staged 的搭配使用
6. ✅ 会画流程图解释 Git 钩子执行逻辑（附赠 mermaid 教程）
7. ✅ 搞懂 yorkie 与其他工具（如 commitlint）的集成
8. ✅ 成为团队中 Git 操作最规范的人 👑

---

🧠 1. yorkie 是什么鬼？你居然不知道？

🧩 1.1 yorkie 的基本概念

yorkie 是 husky 的一个 fork 版本，专门为 Vue CLI 项目定制。它简化了 Git 钩子的配置和管理，让你可以在 Vue 项目中更轻松地使用 Git 钩子。

它支持：

• ✅ 自动安装 Git 钩子
• ✅ 跨平台兼容（Windows/Linux/macOS）
• ✅ 支持多种脚本语言
• ✅ 与 lint-staged、commitlint 等工具无缝集成
• ✅ 更简单的配置方式

🤬 1.2 老曹吐槽：为什么要有 yorkie？husky 不够用吗？

yorkie 诞生的原因：

• ❌ husky 在某些场景下配置复杂
• ❌ Vue CLI 项目中需要更简单的集成方式
• ❌ 依赖冲突问题频发
• ❌ 需要更适合 Vue 生态的解决方案

这就像你有一辆法拉利，但每次出门都要手动调发动机参数，是不是有点麻烦？yorkie 就是那个帮你调好参数的"智能助手"！

---

🛠️ 2. yorkie 是什么？它到底有多牛？

📦 2.1 yorkie 是 Git 钩子的"简化版管理工具"

yorkie 就是 Git 钩子的"简化版管理工具"，它让你可以用更简单的方式配置和管理 Git 钩子。

它支持：

• ✅ 自动安装 Git 钩子
• ✅ 跨平台兼容（Windows/Linux/macOS）
• ✅ 支持多种脚本语言
• ✅ 与 lint-staged、commitlint 等工具无缝集成
• ✅ 更简单的配置方式

🧠 2.2 yorkie 与 husky 的区别

特性	husky	yorkie	说明
适用场景	通用项目	Vue CLI 项目	yorkie 专为 Vue 生态优化
配置复杂度	中等	简单	yorkie 配置更简洁
依赖冲突	可能出现	较少出现	yorkie 更适合 Vue 项目
社区支持	强	中等	husky 社区更大
定制化程度	高	中等	yorkie 更注重开箱即用

---

🧪 3. 快速上手 yorkie：在 Vue3 项目中使用

🧰 3.1 安装 yorkie

在 Vue CLI 项目中，yorkie 通常已经内置。如果没有，可以手动安装：

npm install yorkie --save-dev

⚙️ 3.2 配置 Git 钩子

在 package.json 中添加 gitHooks 字段：

{
  "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node scripts/verifyCommit.js"
  }
}

🧪 3.3 添加 lint-staged 配置

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": [
      "eslint --fix",
      "git add"
    ]
  }
}

---

🧹 4. 结合 lint-staged：只 lint 改动的文件

🧼 4.1 为什么要用 lint-staged？

lint-staged 可以让你只对 暂存区（staged）的文件执行 lint 操作，而不是全量 lint。

配置 package.json：

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": [
      "eslint --fix",
      "git add"
    ],
    "*.{css,scss,less}": [
      "stylelint --fix",
      "git add"
    ]
  }
}

🧼 4.2 在 Vue3 项目中的实际应用

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
}

---

🧾 5. commit message 规范化：使用 commitlint

📝 5.1 commitlint 是什么？

commitlint 是一个 commit message 格式检查工具，通常与 yorkie 配合使用。

安装：

npm install @commitlint/cli @commitlint/config-conventional --save-dev

创建 commitlint.config.js：

module.exports = {
  extends: ['@commitlint/config-conventional']
}

配置 package.json：

{
  "gitHooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

---

🧠 6. yorkie 工作原理详解（图表表格版）

Git 钩子类型	触发时机	用途示例
pre-commit	commit 前	lint、test、格式检查
commit-msg	commit message 输入后	检查 commit 格式
pre-push	push 前	检查远程分支、CI 状态
post-merge	merge 后	自动安装依赖、重启服务
post-checkout	checkout 后	自动切换环境变量、npm install

---

🧩 7. yorkie 配置最佳实践（表格总结）

配置项	推荐值	说明
pre-commit	lint-staged	只 lint staged 文件
commit-msg	commitlint -E HUSKY_GIT_PARAMS	检查 commit message 格式
pre-push	npm run test	push 前跑测试
lint-staged	配置在 package.json 中	与 yorkie 配合使用效果最佳
.git/ 目录	无需手动管理	yorkie 自动处理

---

🧠 8. 常见问题解答（FAQ）

❓ 8.1 yorkie 不生效怎么办？

• ✅ 确保 package.json 中有正确的 gitHooks 配置
• ✅ 确保 yorkie 已正确安装
• ✅ 检查 Git 钩子是否正确安装（查看 .git/hooks 目录）

❓ 8.2 Vue3 项目中如何迁移至 yorkie？

如果从 husky 迁移：

1. 卸载 husky：npm uninstall husky
2. 安装 yorkie：npm install yorkie --save-dev
3. 修改 package.json 中的配置字段：

   // 从 husky 配置
   {
     "husky": {
       "hooks": {
         "pre-commit": "lint-staged"
       }
     }
   }
   
   // 改为 yorkie 配置
   {
     "gitHooks": {
       "pre-commit": "lint-staged"
     }
   }
   

❓ 8.3 如何跳过 Git 钩子？

git commit --no-verify

但老曹劝你：别跳！除非你真的知道自己在干嘛。

---

🧠 9. yorkie 与其他工具的集成（流程图）

---

🧠 10. 在 Vue3 项目中的实际应用案例

🎯 10.1 完整的配置示例

{
  "name": "vue3-project",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ],
    "*.{css,scss,less}": [
      "stylelint --fix",
      "git add"
    ]
  },
  "dependencies": {
    "vue": "^3.2.0"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.0.0",
    "@commitlint/config-conventional": "^17.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^8.0.0",
    "prettier": "^2.0.0",
    "yorkie": "^2.0.0"
  }
}

🎯 10.2 commitlint 配置示例

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'build',
        'chore',
        'ci',
        'docs',
        'feat',
        'fix',
        'perf',
        'refactor',
        'revert',
        'style',
        'test'
      ]
    ],
    'subject-case': [0]
  }
}

---

🧠 11. yorkie vs husky：如何选择？

场景	推荐工具	说明
Vue CLI 项目	yorkie	开箱即用，配置简单
通用 Node.js 项目	husky	功能更强大，社区支持更好
需要高度定制化	husky	husky 提供更多自定义选项
团队项目标准化	yorkie	统一配置，减少冲突
新手入门	yorkie	上手简单，学习成本低

---

🧠 12. 总结：yorkie 是 Vue 项目的 Git 钩子终极解决方案

项目	是否推荐	说明
yorkie	✅ 强烈推荐	Vue CLI 项目首选
lint-staged	✅ 推荐	提升 lint 效率
commitlint	✅ 推荐	规范 commit message
husky	✅ 可选	通用项目使用

---

🧠 13. 附录：yorkie 钩子类型一览

钩子名称	说明
applypatch-msg	修改 patch 提交信息
pre-applypatch	应用 patch 前
post-applypatch	应用 patch 后
pre-commit	commit 前
prepare-commit-msg	准备 commit message
commit-msg	commit message 输入后
post-commit	commit 后
pre-rebase	rebase 前
post-checkout	checkout 后
post-merge	merge 后
pre-push	push 前

---

🧠 14. 老曹寄语：别再复杂化 Git 钩子了！

Git 钩子不是什么黑科技，但它能让你的开发流程变得无比丝滑。yorkie 就是那个帮你搞定一切的"简化版自动化管家"。

别再复杂化 Git 钩子配置了，别再手动检查代码了，别再手动跑测试了！

交给 yorkie 吧，你只管写代码、摸鱼、打游戏！

---

🐶 yorkie —— Git 钩子界的简化版汪星人，简单、可靠、永不掉链子！
👨‍💻 老曹出品，必属精品！
🚀 2025年，让我们一起告别复杂 Git 钩子配置！