ESLint 是一個(gè)在前端工具鏈中被眾人熟知的代碼檢查工具，它能夠被開發(fā)者靈活的配置衣盾，使其能夠達(dá)到我們提前制定好的代碼規(guī)范的要求寺旺，并且在編碼過程中實(shí)時(shí)檢測輸入的代碼，對(duì)于不符合代碼規(guī)范的代碼警告或報(bào)錯(cuò)势决。不得不說阻塑，在有了 ESLint 這個(gè)工具之后，團(tuán)隊(duì)之間開發(fā)維護(hù)會(huì)舒服很多徽龟，因?yàn)樵趶?qiáng)制約束下叮姑，你只需要去理解代碼本身的含義就可以了唉地，對(duì)于風(fēng)格的問題則少了很多麻煩据悔。
既然 ESLint 這么好用，那我們?yōu)槭裁从忠虢裉煲榻B的這兩種工具呢耘沼？因?yàn)樵谌粘５膱F(tuán)隊(duì)工作中极颓，自覺地同學(xué)會(huì)將 ESLint 的警告或報(bào)錯(cuò)修復(fù)了再提交代碼，而總有一些不自覺的群嗤，對(duì)于代碼風(fēng)格不重視的同學(xué)菠隆，會(huì)不管報(bào)錯(cuò)，直接將代碼風(fēng)格不符合規(guī)范的代碼提交到 git 倉庫中狂秘，久而久之隨之項(xiàng)目的代碼數(shù)量越來越多骇径，ESLint 報(bào)錯(cuò)的地方也會(huì)越來越多，想要一個(gè)一個(gè)修復(fù)實(shí)在是積重難返者春。于是當(dāng)我在使用 Vant 這個(gè)前端開源組件庫的時(shí)候破衔，提交代碼的過程中發(fā)現(xiàn)他們?cè)?commit 之前會(huì)檢查你提交的代碼是否規(guī)范，當(dāng)時(shí)就覺得這個(gè)非常實(shí)用钱烟，后來發(fā)現(xiàn)用 git 提供的一組 hook 可以實(shí)現(xiàn)這樣的功能晰筛，git commit 是最常用的命令之一，它可以觸發(fā)四個(gè) hook 拴袭，分別是 pre-commit, prepare-commit-msg, commit-msg 和 post-commit读第。 從字面上猜測著四個(gè) hook 分別對(duì)應(yīng)了 “commit 之前”，“準(zhǔn)備 commit log message 的時(shí)候”拥刻，“生成 commit log message 的時(shí)候”怜瞒，“commit 之后”四個(gè)階段。
而我們要解決我們的問題般哼，其實(shí)只需要在 'pre-commit' 這個(gè)階段去寫一段腳本吴汪，就能解決我們檢測代碼的問題尘吗。
正當(dāng)我準(zhǔn)備寫腳本來解決這個(gè)問題的時(shí)候，發(fā)現(xiàn) github 上有一個(gè)已經(jīng)被造好的輪子浇坐，有很多的 star睬捶，于是乎，本著不重復(fù)造輪子的精神近刘，我去看了一下這兩個(gè)工具的文檔擒贸。
husky
husky 這個(gè)庫，老師說我看他的文檔的時(shí)候看笑了觉渴，不為別的介劫，就為了這個(gè)命名。我的理解是作者覺得這個(gè)庫的作用是看(chai)家護(hù)院的二哈么案淋？
Husky can prevent bad git commit, git push and more ?? woof!
Husky 能夠幫你阻擋住不好的代碼提交和推送座韵。一句話很精準(zhǔn)的說明了這個(gè)庫的意義，而配置也非常簡單踢京，
// package.json
{
"husky": {
"hooks": {
"pre-commit": "npm test",
"pre-push": "npm test",
"...": "..."
}
}
}
就像這樣誉碴，在我們的 package.json 中配置 husky，并且在對(duì)應(yīng)的 git hook 階段來執(zhí)行對(duì)應(yīng)的命令瓣距。于是乎黔帕，不用繁瑣的去配置 git hook 階段的腳本文件了，提供對(duì)應(yīng)的 node 操作變好蹈丸。
lint-staged
lint-stage 這個(gè)庫是這么解釋它的存在的成黄。
在你提交代碼之前，Linting 的運(yùn)行是更有意義的逻杖。當(dāng)你這樣去做了奋岁，那么就會(huì)有更少的錯(cuò)誤進(jìn)入你的代碼庫。
有多種方式能夠配置 lint-staged荸百，例如在 package.json 中添加對(duì)應(yīng)的對(duì)象闻伶，例如使用 JSON 或者 YML 文件來配置，例如寫一個(gè) js 文件來配置等等管搪。
而鑒于我們的 husky 使用了 package.json 的方式來配置虾攻，那么 lint-staged 也保持統(tǒng)一使用同樣的方式好了。
// in package.json
{
"lint-staged": {
"*.{js, vue, css}": [
"eslint",
"git add"
]
}
}
當(dāng)你這樣配置完成更鲁，在你的 git commit 之前霎箍，會(huì)自動(dòng)觸發(fā) eslint 檢查，如果你的代碼風(fēng)格沒問題澡为，commit 會(huì)成功漂坏，否則提交會(huì)失敗哦。
對(duì)于這樣好的工具，閉著眼睛就能按 star 了顶别，統(tǒng)一團(tuán)隊(duì)的代碼風(fēng)格谷徙，真的很重要。能夠讓錯(cuò)誤防范于未然驯绎。
