# 使用Husky，讓Git Hooks變得簡單

###### tags: `vic的blog文章`

blog網址： https://yoshuu.github.io/2023/05/11/use-husky-let-git-hooks-become-easy/

在git hooks的使用中，其實除了原生的方式外有個更方便的工具已經出來。

那有關於什麼是git hooks可以看我上禮拜寫的文章。
[初探Git Hooks，優化Git工作流 | Vic's Blog](https://yoshuu.github.io/2023/05/04/git-hooks-introduction/)

在這邊簡單來說，git hooks 是每次 Git 存儲庫中發生特定事件時自動運行的腳本。

我想要做git的特定事件，像是`push`、`merge`、`commit`的執行前後，想做一些事情比如檢查，那就得靠git hooks的幫忙。

但那卻不是一件容易的事情，對很多人來說連找出.git隱藏檔都是困難的事情，更不用說自己寫腳本。

而husky就是為此而生，它讓操作git hooks變的更加簡單。

在Git專案中使用husky统一管理hooks，變成不難上手，性價比很高的一件事情。

這篇不會講解husky內部究竟是怎麼實現的，原始碼的解析，會著重在如何使用，以及理解為什麼需要有這個工具上，但研究的時候有幾篇提到這個部分，連結也會放在參考連結。

官網的安裝及使用說明得非常清楚，連結已放在最下面的參考資料，這邊我紀錄的是我自己比較偏好的方式，我選擇Automatic（自動）的安裝方式，這也是官網所推薦，接著我會選擇裡面其中的`npm`方式，其實還有`Yarn`及`pnpm`，也都不錯，可以試試看。

// 安裝
npx husky-init && npm install

// 刪除
npm uninstall husky && git config --unset core.hooksPath

// 添加hook
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

`husky-init`的這個指令可以理解成快速化初始husky所需項目的一次性懶人包。

它會加上 Husky 的相依並在 `prepare` 中加上 `husky install` ，這樣一來在 `npm install` 運行時就會執行 Husky 的安裝程序。

這也是剛剛安裝時後面還得補上`npm install`的原因。

## 安裝完後husky

如果是使用Automatic（自動）的安裝方式，那安裝完後，就會有一個預設初始的`pre-commit`可以來做使用。

`pre-commit`就是在`git commit`執行之前可以做的腳本，裡面一開始只會有`npm test`而已，可以在自己改掉。

簡單來說，專案就會多出一個叫做husky的資料夾，裡面可以看到``pre-commit``的`hook`（腳本），可以直接修改這邊做操作。


如果要添加`hook`的話，就直接`husky add`就好，上面有打示範的指令，跟原生git hooks不一樣，不會一開始就把所有存在的hooks都列出來，所以假如不知道自己需要的那個hooks是什麼可以需要查一下。

## 使用情境

那用預設的`pre-commit`來說，在`git commit`執行之前所運行的腳本，我所想得到的幾種運用：

1. 使用`eslint`，做`git commit`執行前專案中語法的檢查。
2. 使用`prettier`，做`git commit`執行前專案中程式碼格式的檢查。
3. 使用`commitlint`，做`git commit`執行前`commit`訊息的檢查。

`commitlint`很酷，使用它就等於`commit`訊息有了統一的規範，要注意，第三點不在`pre-commit`的管轄中，應該要放在`commit-msg`裡面。

`commitlint`的話，腳本的部分如何搭配husky的話，也不用自己寫，直接照著官網做就ok了，它會有一個預設的通用規則，然後還可以照著自己想要的rules去新增。

通用的規則就會像是每個`commit`訊息都得要有個type等等，比如說：

feat(blog): add vic blog

官網連結：[conventional-changelog/commitlint: 📓 Lint commit messages](https://github.com/conventional-changelog/commitlint)

那最後來演示如果是`eslint`，怎麼使用husky。

這個部分用四個我做練習的圖片來介紹。

第一步：

第二步：

第三步：

最後步：

## 總結

主要兩個地方做優化

1. 易用性
2. 可制定性 => 更方便，更客製

Husky 通過很簡單的方式，就能夠在專案中添加 Git Hooks，而不需要手動撰寫腳本，直接就拉低了整體使用門檻。

一直以來，Git Hooks 必須保存在 `.git/hooks` 目錄中，這使得它們難以在團隊中共享，隱藏檔無法被追蹤不能推到遠端，但Husky就不用那麼麻煩，因為已經變成了在`.husky/hooks`目錄裡面。

## 參考資料

- [Husky - Git hooks](https://typicode.github.io/husky/#/)
- [如何用husky来管理代码规范 - 掘金](https://juejin.cn/post/7205849733134352442)
- [Husky，这只哈士奇是什么？ - 掘金](https://juejin.cn/post/6978462327796400136)
- [20 - Husky - Git Hooks 工具 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10278411)