介紹
在團隊開發中，提交具有語法錯誤或格式錯誤的程式碼等簡單錯誤很常見。這些問題可能會破壞 CI 建置或在程式碼審查期間導致混亂的格式衝突。
您可以自動執行這些檢查，而不是依賴開發人員的警覺性來執行準則。
透過將 Git Hooks 與 Husky 結合，您可以在任何提交或推送完成之前自動觸發 linter (ESLint)、格式化程式 (Prettier) 和單元測試 (Jest)。本指南將引導您完成此工作流程的設定。
1. 什麼是 Git Hooks 和 Husky？
Git Hook 是每當 Git 儲存庫中發生關鍵事件（例如 commit、push 或 merge）時自動執行的腳本。
預設情況下，這些腳本位於 .git/hooks/ 目錄中。但是，由於 .git/ 資料夾被排除在版本控制 (.gitignore) 之外，因此在團隊中共享這些掛鉤歷來都很困難。
Husky 透過將 Git Hooks 暴露到專案層級資料夾（例如 .husky/）來解決這個問題。這允許團隊成員檢查 Git 中的鉤子並透過 npm 套件自動同步配置。
2. 哈士奇基本設定步驟
在專案儲存庫中執行以下命令：
第 1 步：安裝並初始化
使用 husky-init CLI 工具安裝 Husky 並設定初始目錄：
# Initialize Husky configurations
npx husky-init && npm install
該命令做了三處修改：
- 將
husky加入package.json中的devDependencies。 - 將
"prepare": "husky"腳本新增至package.json（在npm install期間自動在其他電腦上安裝掛鉤）。 - 在專案根目錄產生
.husky/目錄以及預設的pre-commit掛鉤檔案。
第 2 步：配置預提交掛鉤
開啟產生的 .husky/pre-commit 腳本。預設情況下，它運行 npm test。更新此命令以運行 linter：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
# Run linter and abort commit if it returns an error code
npm run lint
現在，每當您執行 git commit 時，Husky 都會執行 npm run lint。如果 ESLint 偵測到錯誤，提交程序將中止，將損壞的程式碼排除在儲存庫之外。
3. 使用 lint-staged 優化速度
預設情況下，在每次提交期間在整個專案上執行 linter 可能會隨著程式碼庫的成長而導致進程變慢。
若要最佳化效能，請使用 lint-staged。
此工具隔離檢查，以便它們僅在目前暫存在 Git 中的檔案（您修改的檔案）上執行。
安裝和設定
- 安裝套件：
npm install --save-dev lint-staged
- 將配置新增至
package.json: 定義要定位的檔案以及要執行的命令：
{
"lint-staged": {
"*.{js,ts,jsx,tsx}": [
"eslint --fix",
"prettier --write"
],
"*.css": [
"stylelint --fix",
"prettier --write"
]
}
}
- 更新預提交掛鉤：
修改
.husky/pre-commit以觸發lint-staged：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
使用此配置，只有您修改的檔案才會被格式化和檢查。這可以保持快速的預提交檢查，同時確保提交的程式碼保持乾淨。
結論
將 Husky 與 lint-staged 結合可以自動執行程式碼品質檢查，從而節省程式碼審查時間並防止建置損壞。
- **使用 Husky 在專案層級管理 Git Hook。 **
- **透過套件生命週期腳本 (
prepare) 自動配置掛鉤安裝。 ** - **透過僅使用
lint-staged目標掃描暫存檔案來保持快速檢查。 **
在專案的早期引入 Husky 以保持程式碼庫的一致性和整潔。