使用 Husky 和 Git Hooks 自動進行預提交檢查

Sun, 20 Apr 2025 00:00:00 +0900

介紹

在團隊開發中，提交具有語法錯誤或格式錯誤的程式碼等簡單錯誤很常見。這些問題可能會破壞 CI 建置或在程式碼審查期間導致混亂的格式衝突。

您可以自動執行這些檢查，而不是依賴開發人員的警覺性來執行準則。

透過將 Git Hooks 與 Husky 結合，您可以在任何提交或推送完成之前自動觸發 linter (ESLint)、格式化程式 (Prettier) 和單元測試 (Jest)。本指南將引導您完成此工作流程的設定。

Git Hook 是每當 Git 儲存庫中發生關鍵事件（例如 commit、push 或 merge）時自動執行的腳本。

預設情況下，這些腳本位於 .git/hooks/ 目錄中。但是，由於 .git/ 資料夾被排除在版本控制 (.gitignore) 之外，因此在團隊中共享這些掛鉤歷來都很困難。

Husky 透過將 Git Hooks 暴露到專案層級資料夾（例如 .husky/）來解決這個問題。這允許團隊成員檢查 Git 中的鉤子並透過 npm 套件自動同步配置。

在專案儲存庫中執行以下命令：

使用 husky-init CLI 工具安裝 Husky 並設定初始目錄：

# Initialize Husky configurations
npx husky-init && npm install

該命令做了三處修改：

開啟產生的 .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 偵測到錯誤，提交程序將中止，將損壞的程式碼排除在儲存庫之外。

預設情況下，在每次提交期間在整個專案上執行 linter 可能會隨著程式碼庫的成長而導致進程變慢。

若要最佳化效能，請使用 lint-staged。此工具隔離檢查，以便它們僅在目前暫存在 Git 中的檔案（您修改的檔案）上執行。

 npm install --save-dev lint-staged

 {
 "lint-staged": {
 "*.{js,ts,jsx,tsx}": [
 "eslint --fix",
 "prettier --write"
 ],
 "*.css": [
 "stylelint --fix",
 "prettier --write"
 ]
 }
 }

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

 npx lint-staged

使用此配置，只有您修改的檔案才會被格式化和檢查。這可以保持快速的預提交檢查，同時確保提交的程式碼保持乾淨。

將 Husky 與 lint-staged 結合可以自動執行程式碼品質檢查，從而節省程式碼審查時間並防止建置損壞。

在專案的早期引入 Husky 以保持程式碼庫的一致性和整潔。