【譯】JavaScript代碼檢查工具對比

看到不少團隊和開源項目都在用代碼檢查工具，本身一直沒用過，最近加入了新團隊有項目在用，就想着研究一下。看到sitepoint上的一篇2015年的文章以爲不錯就給翻譯出來了。本文譯自A Comparison of JavaScript Linting Tools，本文由 @Darko 翻譯，轉載請保留原文連接。

JavaScript代碼校驗工具可以讓你在寫代碼時避免一些低級的錯誤。儘管我有不少年的開發經驗，我仍然會犯一些語法錯誤而且忘記處理個人錯誤。一個好的校驗工具或者格式化工具，可讓我避免這些錯誤，以避免浪費個人時間（甚至是我客戶的時間）。一個好的校驗工具還能確保一個項目保持一個固定的代碼風格。

有不少關於JavaScript的校驗工具，你怎樣選擇其中的某一個呢？讓咱們一塊兒來看看它們有什麼樣的特性以及優缺點。接下來我要介紹四種經常使用的選擇：JSLint，JSHint，JSCS和ESLint。

Overview

這四個工具的基本用法都是相似的，它們定義了一套規則用來解析和報告js文件裏面的問題。它們均可以經過npm來進行安裝。能夠經過命令行來調用它們，給命令行傳遞文件參數，也能夠做爲grunt這一類工具的插件被使用，或者能夠集成到編輯器中。它們都支持使用註釋做爲配置。

以上就是它們全部的類似之處了，每個工具都有優缺點，只是有些工具相比於其它工具更加有優點。

JSLint

JSLint是這四種校驗工具中最爲古老的。Douglas Crockford（譯註:《JavaScript 語言精粹》的做者）在2002年創造了它，它是強制使用的，爲了保留它所認爲的JavaScript這門語言的精華部分。若是你認同他的觀點，對你而言，JSLint將會是一個好的工具。安裝完成立刻便可使用。

JSLint的缺點是它是不能夠進行配置和擴展的。你不能禁用它的某些特性，而且缺少文檔。它的官網並無什麼用處，例如，它缺乏若是將這個工具整合到你的編輯器的任何信息。

優勢：

• 配置規則都已經定好了，安裝便可使用（若是你贊成這些強制的規則的話）

缺點：

• JSLint沒有可配置文件，你沒法對它的規則進行更改

• 配置規則的數量有限，有些規則沒法禁用

• 不支持自定義規則

• 缺乏文檔

• 很難定位到哪條規則致使了錯誤

JSHint

JSHint是JSLint的一個更加靈活，可配置的一個版本，它從JSLint中fork出來。你可以本身配置每一條規則，而且把他們寫到一個配置文件裏，這讓JSHint更易於在大型項目中使用。同時，JSHint也有友好的文檔針對每一條規則。因此可以準確的知道它作了些什麼。把它整合到編輯器中也是很簡單的一件事。

JSHint的一個小缺點就是，它的默認配置是很是輕量級的。這就意味着你要作一些設置才能使其變得有用。和ESLint相比，爲了啓用或者禁用某些錯誤的報告，要知道須要修改哪些規則也是比較困難的。

優勢：

• 大多數設置都是可配置的

• 支持配置文件，更易於在大型項目中使用

• 支持不少第三方庫或和框架，例如jqery,QUnit,NodeJs,Mocha等等

• 支持基本的ES語法

缺點：

• 很難定位到哪條規則形成了錯誤

• 有兩種類型的配置：強制執行的和比較鬆散的，這讓配置變得有些混亂

• 不支持自定義規則

JSCS

JSCS和以上兩個都是不一樣的，若是不給它一個配置文件或者使用一套預設的規則，它將什麼也不作不了，不過你能夠從別的網站下載配置文件，因此這並非什麼大問題，而且它有不少的預設規則，好比說jQuery的代碼風格的預設規則以及Google的代碼風格的預設規則。

它有超過90種不一樣的規則，而且你能夠經過插件創造自定義規則。JSCS也支持自定義輸出報告，這使得其更容易與須要其以特定格式輸入的工具集成。

JSCS是一個代碼風格檢查器，這意味着它只捕獲與代碼格式相關的問題，而不包含潛在的錯誤。所以，它比其餘工具的靈活性更低，可是若是您須要強制執行特定的編碼風格，那麼JSCS就能夠作的很好。

優勢：

• 支持自定義輸出報告，可使其更容易和其它工具進行集成

• 若是您遵循現有的可用編碼風格之一，預設和現成的配置文件能夠輕鬆設置

• 在報告中，有一個標誌包含在規則名之中，因此很容易找出是哪條規則致使了錯誤

• 能夠利用自定義的插件進行拓展

缺點：

• 只檢測到代碼風格的違規，不檢測潛在的錯誤，好比說未使用的變量或者變量的全局污染等

• 四個工具中性能最差的，可是這並非一個典型用途的問題

ESLint

ESLint是這四個工具中最新的，它被設計爲易於拓展的，具備大量的自定義規則，而且很容易經過插件的形式來安裝。它輸出簡潔的報告，可是默認包含規則的名稱，所以你始終知道是那條規則致使了錯誤的信息。

ESLint的文檔多少有些混亂，規則的列表容易查找，而且按邏輯進行分類，但配置說明在某些地方有點混亂。然而，它提供瞭如何對編輯器進行集成，插件和示例的連接。

優勢：

• 靈活：任何規則均可以切換使用，而且有些規則有額外的配置可使用

• 可拓展性好，而且有不少可用的插件

• 易於理解的輸出報告

• 包含一些其它工具所沒有的規則，使得ESLint更容易檢測出代碼中潛在的錯誤

• 對ES6的支持性最好，是惟一支持JSX的工具

• 支持自定義輸出報告

缺點：

• 須要一些配置

• 性能差，但這並非主要的障礙

推薦

在這四個工具中，我選擇了ESLint，JSLint太嚴格而且不可配置，而JSHint缺少擴展機制。若是您只想檢查編碼風格，則JSCS是一個不錯的選擇，可是ESLint也能夠這樣作，而且它會檢查代碼中的錯誤和其餘問題。

若是你想使用ES6的話，ESLint也是顯而易見的選擇。在上文提升的全部工具當中它對ES6有着最好的支持。

JSHint是第二好的選擇，若是你不須要ESLint的那些高級特性的話。一旦被正確的配置，JSHint能夠捕捉到大量的問題。JSCS有大量可用的規則，若是你不須要編碼樣式檢查（縮進、括號等）之外的任何事情，那麼它就是首選。

對於JSLint，我很猶豫要不要推薦它，其它的工具能夠作到和他一樣的事情可是不會強制要求使用者去使用特定的規則。若是你正巧很是贊成它的哪些強制規則，那麼也許值得好好去了解一下。

一個好的校驗工具是捕捉問題很是重要的一步，可是它只能檢測出它的規則許可範圍以內的錯誤。對於更多簡單明瞭的bug的捕捉，我建議使用單元測試，Code reviews也是也是不錯的方式。

你和你的團隊是若是保證代碼質量的呢？能夠在評論區留言。