資訊專欄INFORMATION COLUMN
摘要：看到很多團(tuán)隊(duì)和開(kāi)源項(xiàng)目都在用代碼檢查工具，自己一直沒(méi)用過(guò)，最近加入了新團(tuán)隊(duì)有項(xiàng)目在用，就想著研究一下。代碼校驗(yàn)工具能夠讓你在寫(xiě)代碼時(shí)避免一些低級(jí)的錯(cuò)誤。同時(shí)，也有友好的文檔針對(duì)每一條規(guī)則。在上文提高的所有工具當(dāng)中它對(duì)有著最好的支持。
看到很多團(tuán)隊(duì)和開(kāi)源項(xiàng)目都在用代碼檢查工具，自己一直沒(méi)用過(guò)，最近加入了新團(tuán)隊(duì)有項(xiàng)目在用，就想著研究一下?？吹絪itepoint上的一篇2015年的文章覺(jué)得不錯(cuò)就給翻譯出來(lái)了。本文譯自A Comparison of JavaScript Linting Tools，本文由 @Darko 翻譯，轉(zhuǎn)載請(qǐng)保留原文鏈接。
JavaScript代碼校驗(yàn)工具能夠讓你在寫(xiě)代碼時(shí)避免一些低級(jí)的錯(cuò)誤。盡管我有很多年的開(kāi)發(fā)經(jīng)驗(yàn)，我仍然會(huì)犯一些語(yǔ)法錯(cuò)誤并且忘記處理我的錯(cuò)誤。一個(gè)好的校驗(yàn)工具或者格式化工具，可以讓我避免這些錯(cuò)誤，以免浪費(fèi)我的時(shí)間（甚至是我客戶的時(shí)間）。一個(gè)好的校驗(yàn)工具還能確保一個(gè)項(xiàng)目保持一個(gè)固定的代碼風(fēng)格。
有很多關(guān)于JavaScript的校驗(yàn)工具，你怎樣選擇其中的某一個(gè)呢？讓我們一起來(lái)看看它們有什么樣的特性以及優(yōu)缺點(diǎn)。接下來(lái)我要介紹四種常用的選擇：JSLint，JSHint，JSCS和ESLint。
Overview這四個(gè)工具的基本用法都是類似的，它們定義了一套規(guī)則用來(lái)解析和報(bào)告js文件里面的問(wèn)題。它們都可以通過(guò)npm來(lái)進(jìn)行安裝?？梢酝ㄟ^(guò)命令行來(lái)調(diào)用它們，給命令行傳遞文件參數(shù)，也可以作為grunt這一類工具的插件被使用，或者可以集成到編輯器中。它們都支持使用注釋作為配置。
以上就是它們所有的相似之處了，每一個(gè)工具都有優(yōu)缺點(diǎn)，只是有些工具相比于其它工具更加有優(yōu)勢(shì)。
JSLintJSLint是這四種校驗(yàn)工具中最為古老的。Douglas Crockford（譯注:《JavaScript 語(yǔ)言精粹》的作者）在2002年創(chuàng)造了它，它是強(qiáng)制使用的，為了保留它所認(rèn)為的JavaScript這門(mén)語(yǔ)言的精華部分。如果你認(rèn)同他的觀點(diǎn)，對(duì)你而言，JSLint將會(huì)是一個(gè)好的工具。安裝完成馬上即可使用。
JSLint的缺點(diǎn)是它是不可以進(jìn)行配置和擴(kuò)展的。你不能禁用它的某些特性，并且缺乏文檔。它的官網(wǎng)并沒(méi)有什么用處，例如，它缺少如果將這個(gè)工具整合到你的編輯器的任何信息。
優(yōu)點(diǎn)：
配置規(guī)則都已經(jīng)定好了，安裝即可使用（如果你同意這些強(qiáng)制的規(guī)則的話）
缺點(diǎn)：
JSLint沒(méi)有可配置文件，你無(wú)法對(duì)它的規(guī)則進(jìn)行更改
配置規(guī)則的數(shù)量有限，有些規(guī)則無(wú)法禁用
不支持自定義規(guī)則
缺少文檔
很難定位到哪條規(guī)則導(dǎo)致了錯(cuò)誤
JSHintJSHint是JSLint的一個(gè)更加靈活，可配置的一個(gè)版本，它從JSLint中fork出來(lái)。你能夠自己配置每一條規(guī)則，并且把他們寫(xiě)到一個(gè)配置文件里，這讓JSHint更易于在大型項(xiàng)目中使用。同時(shí)，JSHint也有友好的文檔針對(duì)每一條規(guī)則。所以能夠準(zhǔn)確的知道它做了些什么。把它整合到編輯器中也是很簡(jiǎn)單的一件事。
JSHint的一個(gè)小缺點(diǎn)就是，它的默認(rèn)配置是非常輕量級(jí)的。這就意味著你要做一些設(shè)置才能使其變得有用。和ESLint相比，為了啟用或者禁用某些錯(cuò)誤的報(bào)告，要知道需要修改哪些規(guī)則也是比較困難的。
優(yōu)點(diǎn)：
大多數(shù)設(shè)置都是可配置的
支持配置文件，更易于在大型項(xiàng)目中使用
支持很多第三方庫(kù)或和框架，例如jqery,QUnit,NodeJs,Mocha等等
支持基本的ES語(yǔ)法
缺點(diǎn)：
很難定位到哪條規(guī)則造成了錯(cuò)誤
有兩種類型的配置：強(qiáng)制執(zhí)行的和比較松散的，這讓配置變得有些混亂
不支持自定義規(guī)則
JSCSJSCS和以上兩個(gè)都是不同的，如果不給它一個(gè)配置文件或者使用一套預(yù)設(shè)的規(guī)則，它將什么也不做不了，不過(guò)你可以從別的網(wǎng)站下載配置文件，所以這并不是什么大問(wèn)題，并且它有很多的預(yù)設(shè)規(guī)則，比如說(shuō)jQuery的代碼風(fēng)格的預(yù)設(shè)規(guī)則以及Google的代碼風(fēng)格的預(yù)設(shè)規(guī)則。
它有超過(guò)90種不同的規(guī)則，并且你可以通過(guò)插件創(chuàng)造自定義規(guī)則。JSCS也支持自定義輸出報(bào)告，這使得其更容易與需要其以特定格式輸入的工具集成。
JSCS是一個(gè)代碼風(fēng)格檢查器，這意味著它只捕獲與代碼格式相關(guān)的問(wèn)題，而不包含潛在的錯(cuò)誤。因此，它比其他工具的靈活性更低，但是如果您需要強(qiáng)制執(zhí)行特定的編碼風(fēng)格，那么JSCS就可以做的很好。
優(yōu)點(diǎn)：
支持自定義輸出報(bào)告，可以使其更容易和其它工具進(jìn)行集成
如果您遵循現(xiàn)有的可用編碼風(fēng)格之一，預(yù)設(shè)和現(xiàn)成的配置文件可以輕松設(shè)置
在報(bào)告中，有一個(gè)標(biāo)志包含在規(guī)則名之中，所以很容易找出是哪條規(guī)則導(dǎo)致了錯(cuò)誤
可以利用自定義的插件進(jìn)行拓展
缺點(diǎn)：
只檢測(cè)到代碼風(fēng)格的違規(guī)，不檢測(cè)潛在的錯(cuò)誤，比如說(shuō)未使用的變量或者變量的全局污染等
四個(gè)工具中性能最差的，但是這并不是一個(gè)典型用途的問(wèn)題
ESLintESLint是這四個(gè)工具中最新的，它被設(shè)計(jì)為易于拓展的，具有大量的自定義規(guī)則，并且很容易通過(guò)插件的形式來(lái)安裝。它輸出簡(jiǎn)潔的報(bào)告，但是默認(rèn)包含規(guī)則的名稱，因此你始終知道是那條規(guī)則導(dǎo)致了錯(cuò)誤的信息。
ESLint的文檔多少有些混亂，規(guī)則的列表容易查找，并且按邏輯進(jìn)行分類，但配置說(shuō)明在某些地方有點(diǎn)混亂。然而，它提供了如何對(duì)編輯器進(jìn)行集成，插件和示例的鏈接。
優(yōu)點(diǎn)：
靈活：任何規(guī)則都可以切換使用，并且有些規(guī)則有額外的配置可以使用
可拓展性好，并且有很多可用的插件
易于理解的輸出報(bào)告
包含一些其它工具所沒(méi)有的規(guī)則，使得ESLint更容易檢測(cè)出代碼中潛在的錯(cuò)誤
對(duì)ES6的支持性最好，是唯一支持JSX的工具
支持自定義輸出報(bào)告
缺點(diǎn)：
需要一些配置
性能差，但這并不是主要的障礙
推薦在這四個(gè)工具中，我選擇了ESLint，JSLint太嚴(yán)格并且不可配置，而JSHint缺乏擴(kuò)展機(jī)制。如果您只想檢查編碼風(fēng)格，則JSCS是一個(gè)不錯(cuò)的選擇，但是ESLint也可以這樣做，并且它會(huì)檢查代碼中的錯(cuò)誤和其他問(wèn)題。
如果你想使用ES6的話，ESLint也是顯而易見(jiàn)的選擇。在上文提高的所有工具當(dāng)中它對(duì)ES6有著最好的支持。
JSHint是第二好的選擇，如果你不需要ESLint的那些高級(jí)特性的話。一旦被正確的配置，JSHint可以捕捉到大量的問(wèn)題。JSCS有大量可用的規(guī)則，如果你不需要編碼樣式檢查（縮進(jìn)、括號(hào)等）以外的任何事情，那么它就是首選。
對(duì)于JSLint，我很猶豫要不要推薦它，其它的工具可以做到和他同樣的事情但是不會(huì)強(qiáng)制要求使用者去使用特定的規(guī)則。如果你正巧非常同意它的哪些強(qiáng)制規(guī)則，那么也許值得好好去了解一下。
一個(gè)好的校驗(yàn)工具是捕捉問(wèn)題非常重要的一步，但是它只能檢測(cè)出它的規(guī)則許可范圍之內(nèi)的錯(cuò)誤。對(duì)于更多簡(jiǎn)單明了的bug的捕捉，我建議使用單元測(cè)試，Code reviews也是也是不錯(cuò)的方式。
你和你的團(tuán)隊(duì)是如果保證代碼質(zhì)量的呢？可以在評(píng)論區(qū)留言。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84147.html
摘要：前端日?qǐng)?bào)精選入門(mén)指南工作原理的新功能前端本地存儲(chǔ)數(shù)據(jù)庫(kù)實(shí)例教程模塊深入探究調(diào)查問(wèn)卷中文譯掘金第期構(gòu)建高性能展開(kāi)收縮動(dòng)畫(huà)譯代碼檢查工具對(duì)比前端之旅譯年了，這么多前端框架，你會(huì)怎樣選擇掘金譯不配置，不出事那些坑其一前端面試的大 2017-07-20 前端日?qǐng)?bào) 精選 CSS入門(mén)指南-1：工作原理2017 Amsterdam CSS DayWebpack 3 的新功能：Scope Hoisti...
摘要：對(duì)此沒(méi)有任何限制，它不關(guān)心這個(gè)。一種控制變化的辦法是不可改變的，持久化的數(shù)據(jù)結(jié)構(gòu)?？偨Y(jié)檢測(cè)變化時(shí)開(kāi)發(fā)中的核心問(wèn)題，而框架們以各種方式解決這個(gè)問(wèn)題。因?yàn)榻M件內(nèi)的變化是不被允許的。 AngularJS：臟檢查 我不知道什么更新了，所以當(dāng)更新的時(shí)候，我只能檢查所有的東西。 AngularJS 類似于 Ember，當(dāng)狀態(tài)改變的時(shí)候，必須人工去處理。但不同的是，AngularJS 從不同的角度來(lái)...
摘要：在年成為最大贏家，贏得了實(shí)現(xiàn)的風(fēng)暴之戰(zhàn)。和他的競(jìng)爭(zhēng)者位列第二沒(méi)有前端開(kāi)發(fā)者可以忽視和它的生態(tài)系統(tǒng)。他的殺手級(jí)特性是探測(cè)功能，通過(guò)檢查任何用戶的功能，以直觀的方式讓開(kāi)發(fā)人員檢查所有端點(diǎn)。 2016 JavaScript 后起之秀 本文轉(zhuǎn)載自：眾成翻譯譯者：zxhycxq鏈接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...
摘要：正文在年，框架的選擇并不少。特別的，通過(guò)思考這些框架分別如何處理狀態(tài)變化是很有用的。本文探索以下的數(shù)據(jù)綁定，的臟檢查的虛擬以及它與不可變數(shù)據(jù)結(jié)構(gòu)之間的聯(lián)系。當(dāng)狀態(tài)產(chǎn)生變化時(shí)，只有真正需要更新的部分才會(huì)發(fā)生改變。 譯者言 近幾年可謂是 JavaScript 的大爆炸紀(jì)元，各種框架類庫(kù)層出不窮，它們給前端帶來(lái)一個(gè)又一個(gè)的新思想。從以前我們用的 jQuery 直接操作 DOM，到 Backb...
摘要：工具幫助避免在編寫(xiě)時(shí)出現(xiàn)愚蠢的錯(cuò)誤。并不檢測(cè)潛在的，比如，未使用的變量或意外的全局變量等。在提到的所有工具中，它具有最廣泛的功能支持。使用工具是捕獲問(wèn)題的良好步驟，但只能看到規(guī)則允許的錯(cuò)誤。也可用于此目的。 Lint工具幫助避免在編寫(xiě)JavaScript時(shí)出現(xiàn)愚蠢的錯(cuò)誤。盡管有多年的經(jīng)驗(yàn)，我仍然鍵入不正確的變量名稱，出現(xiàn)語(yǔ)法錯(cuò)誤，以及忘記正確地處理error。在浪費(fèi)自己時(shí)間，或更糟糕地...
閱讀 1097·2023-04-25 23:55
閱讀 2782·2023-04-25 14:13
閱讀 3361·2019-08-26 13:47
閱讀 3035·2019-08-23 18:16
閱讀 678·2019-08-23 17:20
閱讀 3277·2019-08-23 16:55
閱讀 3224·2019-08-22 15:39
閱讀 3266·2019-08-20 18:10
