# Git Hooks
具備基本工程素養的同學都會注重編碼規范，而代碼風格檢查（Code Linting，簡稱 Lint）是保障代碼規范一致性的重要手段。
使用`Lint`會有什么好處呢？在我看來至少具有如下 3 點：
* 更少的 Bug
* 更高的開發效率，Lint 很容易發現低級的、顯而易見的錯誤
* 更高的可讀性
很多時候我們`lint`的校驗是放在持續集成階段，大概流程如下：
> 代碼提交 --> 跑 CI 發現問題(遠程) --> 本地修復問題 --> 重新提交 --> 通過檢查(遠程)
但這樣有一個問題，我們的`CI`(持續集成) 往往不是僅僅只做`Lint`工作，它還有會有很多其它的任務（如打包文件，靜態資源上傳 CDN 等），這樣就導致特別的浪費時間，往往可能需要幾分鐘之后你才會發現問題，或者有的時候你根本就沒有發現你的`CI`沒有跑通過。
常見的流程：本地寫好了代碼，提交，開始跑 lint，發現不通過，本地修改代碼，再提交，再等待 CI 的結果，若還有問題再重復之前的操作。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/git-hook.html#husky)husky
最有效的解決方案就是將`Lint`校驗放到本地，常見做法是使用[husky](https://github.com/typicode/husky)或者[pre-commit](https://github.com/observing/pre-commit)在本地提交之前先做一次`Lint`校驗。
> 當然如果你創建項目的時候使用了`vue-cli@3`，你也可以使用它內置的[yorkie](https://github.com/yyx990803/yorkie)，它是基于`husky`的，但稍微改了一下接口。不過這里我們還是選用`husky`作為例子。
~~~
# 注意：我們之后的例子都是1.3.1+ 版本！
npm install husky -D -S
~~~
然后修改`package.json`，增加配置：
~~~
"husky": {
"hooks": {
"pre-commit": "eslint --ext .js,.vue src"
}
}
~~~
最后嘗試`Git`提交，你就會很快收到反饋：
~~~
git commit -m "Keep calm and commit"
~~~
但這樣會有一個問題，就是這次提交，我可能只修改了一個文件，比如我就修改了`foo.js`的內容，但它依然會校驗所有`src`下面的`.js`文件，非常的不友好。導致的問題就是：每次我提交我寫的代碼，還先要幫人的代碼問題解決了才能順利提交，而且當項目大了之后，檢查速度也會變得越來約慢了。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/git-hook.html#lint-staged)lint-staged
解決上面的痛點就需要使用[lint-staged](https://github.com/okonet/lint-staged)了。它只會校驗檢查你提交或者說你修改的部分內容。
~~~
npm install lint-staged -D -S
~~~
然后，修改 package.json 配置：
~~~
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
}
~~~
如上配置，每次它只會在你本地`commit`之前，校驗你提交的內容是否符合你本地配置的`eslint`規則(這個見文檔[ESLint](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/eslint.html))，如果符合規則，則會提交成功。如果不符合它會自動執行`eslint --fix`嘗試幫你自動修復，如果修復成功則會幫你把修復好的代碼提交，如果失敗，則會提示你錯誤，讓你修好這個錯誤之后才能允許你提交代碼。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/git-hook.html#%E6%80%BB%E7%BB%93)總結
最佳的`lint`規范流程就是推薦團隊成員先在自己的編輯器中配置`eslint`，在 webpack 中配置并開啟`eslint-loader`錯誤提示，這樣平時寫的時候編輯器就能幫你修正一些簡單的格式錯誤，同時提醒你有哪些不符合`lint`規范的的地方，并在命令行中提示你錯誤。這方面詳細的內容見[ESLint](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/eslint.html)。
但這并不是強制的，有些團隊成員或者說剛來的實習生沒有在編輯器中配置或者無視命令行中提示的錯誤，這時候就需要配置`pre-commit`這種強制性校驗的東西，保證所有提交到遠程倉庫的內容都是符合團隊規范的。
