Husky 和 lint-stage 的結合，可以讓專案的程式碼和 commit 能夠維持一致的格式，不合的會無法進入版控。這邊筆記下導入方法和注意事項。
內容
先決條件
你需要先在專案中導入 eslint、 prettier 等統一格式碼樣式的工具，並解決可能的衝突和確認好日後樣式規範。如此一來套用 husky 和 lint-stage 才有完整功效。
步驟
1. 安裝 husky, lint-staged, @commitlint/cli @commitlint/config-conventional，並在 package.json 新增一些指令
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// package.json，假設你要在 lint 提交過程中先用 prettier 和 eslint { "scripts":{ "prepare": "husky install" }, "lint-staged": { "src/**/*.{js,jsx,ts,tsx,json,vue,d.ts}": [ "prettier --write .", "eslint \"./**/*.{ts,js,d.ts,vue}\" --fix" ], ".*.{js,ts}":[ "prettier --write .", "eslint \"./**/*.{ts,js,d.ts,vue}\" --fix" ] } } |
2. 輸入 yarn prepare 來初始化 husky。你會在專案根目錄下看到一個 .husky 的文件
3. 基本上要有 pre-commit 和 commit-msg 兩個指令，才能正常運作。所以輸入以下指令來新增內容：
|
1 2 3 4 5 |
// .husky/commit-msg yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"' // .husky/pre-commit yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty "$1"' |
4. 接著你需要在專案根目錄下，新增一個 commitlint.config.js 檔案如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
module.exports = { extends: ['@commitlint/config-conventional'], rules: { // type 規則檢驗 'type-enum': [ 2, 'always', [ 'feat', // 新功能 feature 'fix', // 修 bug 'docs', // 文件注釋 'style', // 代碼格式化(不影響代碼運行的變動) 'refactor', // 重構 'perf', // 性能優化 'test', // 增加測試 'chore', // 構建過程或輔助工具的變動 'revert', // 回復 'build', // 打包 ], ], 'subject-case': [0], 'type-case': [0], 'type-empty': [0], 'scope-empty': [0], 'scope-case': [0], 'subject-full-stop': [0, 'never'], 'header-max-length': [2, 'always', 72] }, } |
5. 接著你需要確定 .husky/pre-commit 和 .husky/commit-msg 兩個檔案有「足夠的權限」可以執行，請下以下指令
|
1 2 |
chmod +x .husky/pre-commit chmod +x .husky/commit-msg |
6. 接著你可以試著加個 commit，接著就會執行自動格式化你的程式碼樣式和確認你的 commit 內容是否合乎規範了。如果不合的話，你會收到錯誤訊息。
FAQ
1. husky 無法執行，出現 hint: The ‘.husky/pre-commit’ hook was ignored because it’s not set as executable.
請確保執行檔有足夠的權限，可用 chmod +x .husky/pre-commit
參考資料
1. Husky – Git Hooks 工具
2. 28 – lint-staged – Lint Git Commit 的檔案
3. 手摸手教你使用最新版husky(v7.0.1)让代码更优雅规范
4. Commitlint 使用总结
5. lint-staged
6. 我的husky不能执行，我不知道为什么？
