程式碼守門員 - Husky + Lint-Staged

Don’t let 💩 slip into your code base！ 這段話出自 lint-staged，非常符合這篇文章想傳達的主旨。

此文是紀錄筆者在專案上如何使用 husky + lint-staged，主要需求有：

每次 git commit 前自動執行
自動修正 lint 錯誤和程式碼排版
檢查失敗且不能自動修復時，不要 commit

介紹

- `husky` 🐶

可以讓我們在 git commit、git push 等 git action 執行前，預先處理我們指定的任務。

- `lint-staged` 🚫 💩

指定檢查範圍，只針對有變動的檔案，而非整個專案，也可以依據檔案類型，分別設置不同指令。

Installation

npm install husky lint-staged -D

husky 設定

- 初始化設定:

專案最初設定一次即可，會在根目錄下產生一個 .husky 資料夾，存放 husky 的相關腳本。

npm set-script prepare "husky install"
npm run prepare

- 增加 hook:

指定在 git commit 前先跑過 npx lint-staged 腳本，如果失敗的話，git commit 不會被執行。

npx husky add .husky/pre-commit "npx lint-staged"

輸入完上面指令後，會在 .husky 資料夾下面產生一個 pre-commit 檔案，如果有想到其他腳本想加入，比如說單元測試腳本，都可以直接在下一行新增。

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

npx lint-staged

💡 補充
如果對其他的 git hooks 有興趣的話，可以參考 git 官網文件。

lint-staged 設定

這邊設定是根據檔案類型，分別需要經過 linter 檢查和 prettier format，可依照自己的需求調整。

提供兩種設置方法，擇一即可：

1. `package.json`

// package.json

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

2. `.lintstagedrc.json`

// .lintstagedrc.json

{
    "*.{ts,js,vue}": [
      "eslint --fix"
    ],
    "*.{html,scss,css,vue}": [
      "prettier --write",
      "stylelint --fix"
    ]
}