前言
在前面《使用ESLint構(gòu)建團(tuán)隊(duì)代碼規(guī)則》《如何在WebStorm中配置ESLint》兩篇文章中我介紹了eslint的搭建和項(xiàng)目中的運(yùn)用缠俺，但還存在一個(gè)問題就是團(tuán)隊(duì)開發(fā)時(shí)显晶，如何保證每個(gè)人提交的代碼都是按規(guī)范修改好的？這時(shí)候我們可以利用git做提交前的最后把關(guān)壹士。
原理
在git中磷雇，我們每次執(zhí)行commit、push等操作時(shí)躏救，都會(huì)觸發(fā)一個(gè)或多個(gè)shell腳本唯笙，這些腳本我們稱為鉤子，它們存放在.git/hooks目錄下盒使，我們可以看到目錄下有commit-msg.sample崩掘、pre-commit.sample等文件，這些都是案例文件少办，不會(huì)執(zhí)行呢堰，要想執(zhí)行的話把后面的.sample后綴去掉就可以了。
鉤子執(zhí)行順序是有先后的
- 前置（pre）鉤子凡泣，在動(dòng)作完成前調(diào)用
- 后置（post）鉤子枉疼，在動(dòng)作完成后執(zhí)行
當(dāng)鉤子在非零狀態(tài)下退出，git操作就會(huì)停止鞋拟。
所以總結(jié)來說骂维，就是利用這一特點(diǎn)，在鉤子里寫入指令贺纲，執(zhí)行g(shù)it操作前先運(yùn)行鉤子里的指令航闺，調(diào)用eslint檢查代碼，如果代碼不符合規(guī)范就非零退出猴誊，git操作就會(huì)停止潦刃，從而達(dá)到我們的目的。
第三方插件
但是鉤子默認(rèn)是不繼承的懈叹，clone下來的項(xiàng)目不會(huì)帶有這些鉤子乖杠，這樣在團(tuán)隊(duì)開發(fā)中就不夠優(yōu)雅了。并且澄成，我們?nèi)绻恍薷囊粋€(gè)文件胧洒，就調(diào)用eslint檢查了整個(gè)項(xiàng)目的文件(即使你能用.eslintignore忽略一部分)畏吓，這樣是性價(jià)比不高的操作。所以我們引入第三方插件幫助解決卫漫。
1. 安裝插件
項(xiàng)目package.json目錄所在路徑下執(zhí)行
npm install eslint husky lint-staged --save-dev
- eslint：進(jìn)行 JavaScript 代碼檢查的基礎(chǔ)包菲饼；
- husky：在 .git/hooks 中寫入 pre-commit 等腳本激活鉤子，在 Git 操作時(shí)觸發(fā)列赎；
- lint-staged：參考 Git 中 staged 暫存區(qū)概念宏悦，在每次提交時(shí)只檢查本次提交的文件。
2. 修改 package.json 配置包吝，設(shè)置 precommit 和 lint-staged
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"linters": {
"static/js/**/*.js": [
"./node_modules/.bin/eslint --fix",
"git add"
]
}
},
3. 文件過濾路徑說明
指相對(duì)于package.json的路徑肛根，使用glob pattern匹配模式。
{
"*.js": "工程下所有的 js 文件",
"**/*.js": "工程下所有的 js 文件",
"src/*.js": "src 目錄中所有的 js 文件",
"src/**/*.js": "src 文件夾下所有的 js 文件"
}
4. 鉤子工作流程說明
當(dāng)開發(fā)者執(zhí)行 git add 操作將代碼提交到暫存區(qū)后漏策，再執(zhí)行 git commit 操作時(shí)：
- 由于安裝
husky后其在.git/hooks中寫入了pre-commit鉤子，該鉤子在 git commit 執(zhí)行時(shí)被觸發(fā)臼氨，執(zhí)行npm run precommit腳本（即lint-staged命令）掺喻； -
lint-staged的配置，就是利用linters對(duì)暫存區(qū)的文件路徑應(yīng)用過濾規(guī)則储矩，匹配的文件將執(zhí)行后面配置的任務(wù)感耙，這里的任務(wù)就是調(diào)用項(xiàng)目中的eslint指令檢查文件，如果報(bào)錯(cuò)則先自動(dòng)修復(fù)--fix持隧，最后把沒有問題的代碼加入暫存區(qū)git add即硼。 - 如果最終還有報(bào)錯(cuò)，則流程終止屡拨，無法執(zhí)行 commit 操作只酥。
總結(jié)
到此整個(gè)項(xiàng)目就應(yīng)用上了eslint進(jìn)行代碼質(zhì)量檢查，解決了開發(fā)中檢查和團(tuán)隊(duì)開發(fā)的問題呀狼，希望能幫助你解決同樣的問題裂允，謝謝！
