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