資訊專欄INFORMATION COLUMN
摘要：官方出品的工具列表也是個(gè)非常不錯(cuò)的參考。很多同學(xué)選擇在持續(xù)集成階段后文用代稱做，比如使用遠(yuǎn)程的來(lái)觸發(fā)。常見(jiàn)做法是使用或者在本地提交之前做。本文作者王仕軍，商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
Lint 是什么？具備基本工程素養(yǎng)的同學(xué)都會(huì)注重編碼規(guī)范，而代碼風(fēng)格檢查（Code Linting，簡(jiǎn)稱 Lint）是保障代碼規(guī)范一致性的重要手段，你的工作流中有 Lint 環(huán)節(jié)么？有的話你用的爽么？你在團(tuán)隊(duì)中推廣過(guò) Lint，但是大家都不買賬？究竟是為啥？
探討怎么做之前，我們很有必要給 Lint 來(lái)個(gè)清晰、準(zhǔn)確的定義，wikipedia 的定義如下：
In computer programming, lint is a Unix utility that flags some suspicious and non-portable constructs (likely to be bugs) in C language source code; generically, lint or a linter is any tool that flags suspicious usage in software written in any computer language. The term lint-like behavior is sometimes applied to the process of flagging suspicious language usage. Lint-like tools generally perform static analysis of source code.
簡(jiǎn)單來(lái)說(shuō)，Lint 就是對(duì)代碼做靜態(tài)分析，并試圖找出潛在問(wèn)題的工具，實(shí)戰(zhàn)中我們也用 Lint 來(lái)指使用工具的過(guò)程。
為什么要 Lint？使用 Lint 會(huì)有什么好處呢？在我看來(lái)至少具有如下 3 點(diǎn)：
更少的 Bug，劍橋大學(xué)的研究發(fā)現(xiàn)，全世界每年因?yàn)檐?Bug 造成的經(jīng)濟(jì)損失約 3120 億美金；
更高的開(kāi)發(fā)效率，工程師平均會(huì)花掉 50% 的工作時(shí)間定位和解決各種 Bug，其中不乏那些顯而易見(jiàn)的低級(jí)錯(cuò)誤，而 Lint 很容易發(fā)現(xiàn)低級(jí)的、顯而易見(jiàn)的錯(cuò)誤；
更高的可讀性，代碼可讀性的首要因子是“表面文章”，表面上看起來(lái)亂糟糟的代碼通常更難讀懂；
可以毫不客氣的說(shuō)，如果你不做 Lint，就是在浪費(fèi)自己的時(shí)間，浪費(fèi)公司的資源。既然做 Lint 的預(yù)期效果很好？該怎么做呢？
提交后 Lint：反饋鏈條太長(zhǎng)？說(shuō)到怎么做，多數(shù)人會(huì)自然而然的想到各種 Lint 工具，目前社區(qū)中針對(duì)各種語(yǔ)言都開(kāi)發(fā)了 Lint 工具，前端能用到的就有大把：ESLint、Standard、SCSSLint、JSONLint、HTMLHint 等。GitHub 官方出品的 Lint 工具列表 也是個(gè)非常不錯(cuò)的參考。
很多同學(xué)選擇在持續(xù)集成階段（后文用 CI 代稱）做 Lint，比如使用遠(yuǎn)程的 Git Hooks 來(lái)觸發(fā)。但是從實(shí)際的經(jīng)歷來(lái)看，這種做法的反饋鏈條通常如下：
代碼提交 --> 發(fā)現(xiàn)問(wèn)題(遠(yuǎn)程) --> 修復(fù)問(wèn)題 --> 重新提交 --> 通過(guò)檢查(遠(yuǎn)程)
整個(gè)過(guò)程可能會(huì)浪費(fèi)掉你不少時(shí)間，畢竟 CI 過(guò)程通常不僅是在做 Lint，如果你是那種不知道自己時(shí)間每天都去哪兒了的工程師，可以反思下自己或者團(tuán)隊(duì)的工作流是否是這樣。并且，請(qǐng)相信我，你不是少數(shù)人。
你有沒(méi)有這樣的經(jīng)歷：吭哧吭哧寫了幾天代碼，各種驗(yàn)收都通過(guò)了，最后被 CI 拒絕，竟是因?yàn)槟愕拇a中少加了一個(gè)逗號(hào)，這時(shí)候心情簡(jiǎn)直崩潰到無(wú)法形容：
從 GitHub 上各種修復(fù) Lint 的提交數(shù)量不難發(fā)現(xiàn)工程師在修復(fù) Lint 問(wèn)題上浪費(fèi)的時(shí)間，比如搜索 "fix lint"，多達(dá) 45W 次提交：
再比如搜索 “fix indent”，多達(dá) 226W 次提交，是不是很觸目驚心？
只在 CI 流程做 Lint 的缺點(diǎn)也是顯而易見(jiàn)的：
Lint 在整個(gè)開(kāi)發(fā)工作流中的反饋鏈條太長(zhǎng)，浪費(fèi)時(shí)間、注意力和資源，最致命的；
CI 流程搭建成本比較高，即使有各種 CI 服務(wù)，步驟也還是比較繁瑣；
我們?cè)撛趺锤倪M(jìn)？
提交前 Lint：錯(cuò)誤信息不相關(guān)？為了縮短 Lint 的反饋鏈條，把 Lint 挪到本地是最有效的辦法。常見(jiàn)做法是使用 husky 或者 pre-commit 在本地提交之前做 Lint。
使用 husky 的具體做法如下：
首先，安裝依賴：
npm install -D husky yarn add --dev husky
然后修改 package.json，增加配置：
{
"scripts": {
"precommit": "eslint src/**/*.js"
}
}
最后嘗試 Git 提交，你就會(huì)很快收到反饋：
git commit -m "Keep calm and commit"
但是在遺留代碼倉(cāng)庫(kù)上工作的同學(xué)很快會(huì)遇到新的問(wèn)題，開(kāi)啟 Lint 初期，你可能會(huì)面臨成千上萬(wàn)的 Lint Error 需要修復(fù)。部分同學(xué)對(duì)下面這個(gè)圖可能并不陌生：只改了文件 A，但是文件 B、C、D 中也有大量錯(cuò)誤。
把整個(gè)倉(cāng)庫(kù)都格式化不失為一種選擇，但是實(shí)際上需要很大的勇氣。多數(shù)人在項(xiàng)目中運(yùn)用新工具都希望是漸進(jìn)式的，而不是推到重來(lái)式的，因?yàn)橄啾榷裕瑯I(yè)務(wù)系統(tǒng)穩(wěn)定是更重要的事情。簡(jiǎn)單的把 Lint 挪到本地，反饋鏈條是縮短了，但是面對(duì)每次改動(dòng)，工具還是給出了太多不相關(guān)的信息，這無(wú)疑與小步快跑的互聯(lián)網(wǎng)節(jié)奏是相違背的。
該怎么破？
只 Lint 改動(dòng)的：66666如果把 Lint 挪到本地，并且每次提交只檢查本次提交所修改的文件，上面的痛點(diǎn)就都解決了。Feedly 的工程師 Andrey Okonetchnikov 開(kāi)發(fā)的 lint-staged 就是基于這個(gè)想法，其中 staged 是 Git 里面的概念，指待提交區(qū)，使用 git commit -a，或者先 git add 然后 git commit 的時(shí)候，你的修改代碼都會(huì)經(jīng)過(guò)待提交區(qū)。
lint-staged 用法如下：
首先，安裝依賴：
npm install -D lint-staged yarn add --dev lint-staged
然后，修改 package.json 配置：
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"src/**/*.js": "eslint"
}
}
最后，嘗試提交的效果：
實(shí)際上，lint-staged 給了你提交前代碼操作的更大自由度，比如使用下面的配置，自動(dòng)修復(fù)錯(cuò)誤：
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"src/**/*.js": ["eslint --fix", "git add"]
}
}
或者使用下面的配置，自動(dòng)格式化代碼（謹(jǐn)慎使用）：
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"src/**/*.js": ["prettier --write", "git add"]
}
}
此外，lint-staged 和 prettier 已經(jīng)集成到 create-react-app 中了。你是不是也應(yīng)該好好打磨下自己的 Lint 工作流了？
總結(jié)有人說(shuō)前端攻城獅是世界上最奇怪的動(dòng)物，提交代碼時(shí)用 prettier 把代碼排版的很美觀，但部署上線時(shí)又使用 uglify 把代碼壓縮的連親媽都不認(rèn)了，事實(shí)是，如果我們寫出來(lái)的代碼本來(lái)就很丑陋，就根本不需要用 uglify。希望讀到這里的你能把 Lint 工作流打磨到極致，把更多時(shí)間專注在解決真正的問(wèn)題上，成為真正高效的工程師。
One More Thing本文作者王仕軍，商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。如果你覺(jué)得本文對(duì)你有幫助，請(qǐng)點(diǎn)贊！如果對(duì)文中的內(nèi)容有任何疑問(wèn)，歡迎留言討論。想知道我接下來(lái)會(huì)寫些什么？歡迎訂閱我的掘金專欄或知乎專欄：《前端周刊：讓你在前端領(lǐng)域跟上時(shí)代的腳步》。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/11792.html
摘要：如果編輯器在編碼時(shí)實(shí)時(shí)給出反饋，對(duì)開(kāi)發(fā)者個(gè)人而言才是最高效的，在提交時(shí)做強(qiáng)制檢查只是從團(tuán)隊(duì)的視角保證編碼風(fēng)格的規(guī)范性和一致性。 工欲善其事必先利其器，軟件工程師每天打交道最多的可能就是編輯器了。入行幾年來(lái)，先后折騰過(guò)的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode，現(xiàn)在...
摘要：如果編輯器在編碼時(shí)實(shí)時(shí)給出反饋，對(duì)開(kāi)發(fā)者個(gè)人而言才是最高效的，在提交時(shí)做強(qiáng)制檢查只是從團(tuán)隊(duì)的視角保證編碼風(fēng)格的規(guī)范性和一致性。 工欲善其事必先利其器，軟件工程師每天打交道最多的可能就是編輯器了。入行幾年來(lái)，先后折騰過(guò)的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode，現(xiàn)在...
摘要：對(duì)于項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇和。此外由于性能問(wèn)題，官方?jīng)Q定全面采用，甚至把倉(cāng)庫(kù)作為測(cè)試平臺(tái)，而的解析器也成為獨(dú)立項(xiàng)目，專注解決雙方兼容性問(wèn)題。最近在我的項(xiàng)目的編碼規(guī)范中全量的用代替了針對(duì)其中遇到的問(wèn)題做一個(gè)記錄。 ??對(duì)于Typescript項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過(guò)配置解析器，也能規(guī)范TS代碼。此外由...
摘要：對(duì)于項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇和。此外由于性能問(wèn)題，官方?jīng)Q定全面采用，甚至把倉(cāng)庫(kù)作為測(cè)試平臺(tái)，而的解析器也成為獨(dú)立項(xiàng)目，專注解決雙方兼容性問(wèn)題。最近在我的項(xiàng)目的編碼規(guī)范中全量的用代替了針對(duì)其中遇到的問(wèn)題做一個(gè)記錄。 ??對(duì)于Typescript項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過(guò)配置解析器，也能規(guī)范TS代碼。此外由...
摘要：對(duì)于項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇和。此外由于性能問(wèn)題，官方?jīng)Q定全面采用，甚至把倉(cāng)庫(kù)作為測(cè)試平臺(tái)，而的解析器也成為獨(dú)立項(xiàng)目，專注解決雙方兼容性問(wèn)題。最近在我的項(xiàng)目的編碼規(guī)范中全量的用代替了針對(duì)其中遇到的問(wèn)題做一個(gè)記錄。 ??對(duì)于Typescript項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過(guò)配置解析器，也能規(guī)范TS代碼。此外由...
閱讀 4313·2021-09-22 15:34
閱讀 2912·2021-09-22 15:29
閱讀 628·2019-08-29 13:52
閱讀 3436·2019-08-29 11:30
閱讀 2373·2019-08-26 10:40
閱讀 925·2019-08-26 10:19
閱讀 2333·2019-08-23 18:16
閱讀 2415·2019-08-23 17:50
