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