husky + git hook

發表於

git中，許多的操作指令都有所謂的hook，提供給我們先做一些前置作業再去真正執行git的指令。較常用hook的像是pre-commit, pre-push等等，通常會用這些hook搭配其他套件來做程式碼的規範檢查和自動化測試，來避免不好的程式碼推上repository。

git所提供的hook放在<project>/.git/hooks裡面，可以自行寫shell或是其他腳本語言去修改。不過這樣的方式比較麻煩，所以我們是透過husky，將指令定義在package.json來達成的。

husky

husky的這套件的描述就是

Git hooks made easy

有多簡單呢？假設現在我們要在commit之前先通過lint檢查，push之前通過測試，只要兩個步驟

  1. 安裝 husky

yarn add husky --dev

  1. 修改package.json，定義precommit hook
1
2
3
4
5
6
7
8
{
"scripts": {
"test": "jest",
"lint": "standard",
"precommit": "yarn lint",
"prepush": "yarn test"
},
}

lint-staged

不過通常我們不會希望每次commit之前，都對所有的js檔案做lint，只要對這次修改的檔案去檢查即可。

這時候就可以搭配lint-staged來使用。

  1. 安裝 lint-staged

yarn add lint-staged --dev

  1. 修改package.json，加入lint-staged設定
1
2
3
4
5
6
7
8
9
10
11
{
"scripts": {
"test": "jest",
"lint": "standard",
+   "precommit": "lint-staged",
"prepush": "yarn test"
},
+ "lint-staged": {
+   "*.js": ["standard --fix", "git add"]
+ }
}

lint-staded可以不只做一件事，我們可以再順便加上css檔案的lint, format

1
2
3
4
5
6
7
8
9
10
{
"lint-staged": {
+   "*.js": ["standard --fix", "git add"],
+   "*.{css,less,scss,sss}": [
+     "stylefmt",
+     "stylelint",
+     "git add"
+   ]
}
}

參考資料

0%