JavaScript代碼風(fēng)格檢查工具對比：JSLint、JSHint、JSCS和ESLint

本文將對比分析四款流行的JavaScript代碼風(fēng)格檢查工具：JSLint、JSHint、JSCS和ESLint，幫助您選擇最適合項(xiàng)目的工具。這些工具通過遵循編碼規(guī)范并識(shí)別潛在錯(cuò)誤來幫助避免編碼錯(cuò)誤。

關(guān)鍵點(diǎn):

• JSLint、JSHint、JSCS和ESLint等JavaScript代碼風(fēng)格檢查工具有助于通過遵守編碼標(biāo)準(zhǔn)和識(shí)別潛在錯(cuò)誤來避免編碼錯(cuò)誤。每種工具都有其自身的優(yōu)缺點(diǎn)，工具的選擇取決于項(xiàng)目的具體需求。
• JSLint是最古老的工具，旨在強(qiáng)制執(zhí)行JavaScript的良好部分。它不可配置且不可擴(kuò)展，并且缺乏文檔。JSHint是JSLint的一個(gè)分支，它更易于配置，在大型項(xiàng)目中易于使用，但需要一些設(shè)置才能使其發(fā)揮作用。
• JSCS是一個(gè)代碼風(fēng)格檢查器，專注于代碼格式，而不是潛在的錯(cuò)誤。它有超過90個(gè)不同的規(guī)則，并支持自定義插件。然而，它不如其他工具靈活，并且是四種工具中最慢的。
• ESLint是最新的、可擴(kuò)展的工具，具有大量自定義規(guī)則。它檢查代碼中的錯(cuò)誤和其他問題，因此是作者推薦的選擇。它支持ES6特性和JSX。但是，其文檔可能令人困惑，并且需要一些配置。

多年編程經(jīng)驗(yàn)，仍然會(huì)犯一些低級(jí)錯(cuò)誤，例如變量名拼寫錯(cuò)誤、語法錯(cuò)誤以及忘記正確處理錯(cuò)誤。一個(gè)好的代碼風(fēng)格檢查工具可以在浪費(fèi)時(shí)間（或者更糟的是，浪費(fèi)客戶時(shí)間）之前就發(fā)現(xiàn)這些問題。它還可以幫助項(xiàng)目遵守編碼規(guī)范。

市面上有很多JavaScript代碼風(fēng)格檢查工具，如何選擇呢？讓我們來看看四款流行的替代方案：JSLint、JSHint、JSCS和ESLint的功能及其優(yōu)缺點(diǎn)。

概述

這四種工具的工作方式基本相同。它們有一套規(guī)則，用于分析和報(bào)告JavaScript文件中的問題。它們可以通過npm安裝，可以通過傳遞文件從命令行使用，也可以作為Grunt等工具的插件使用，或者集成到編輯器中。它們都支持使用注釋進(jìn)行配置。

但相似之處到此為止。每種工具都有其自身的優(yōu)缺點(diǎn)——只是有些工具的優(yōu)點(diǎn)多于缺點(diǎn)。

JSLint

JSLint是這四種工具中最古老的。Douglas Crockford在2002年創(chuàng)建它，目的是強(qiáng)制執(zhí)行他認(rèn)為的JavaScript的良好部分。如果您同意這些良好部分，JSLint可能是一個(gè)不錯(cuò)的工具——安裝它即可使用。

缺點(diǎn)是JSLint不可配置或不可擴(kuò)展。您根本無法禁用許多功能，并且其中一些功能缺乏文檔。官方網(wǎng)站不是很有用，例如，它缺乏關(guān)于如何將其與您的編輯器集成的任何信息。

優(yōu)點(diǎn)：

• 配置完畢即可使用（如果您同意它強(qiáng)制執(zhí)行的規(guī)則）。

缺點(diǎn)：

• JSLint沒有配置文件，如果您需要更改設(shè)置，這可能會(huì)成為問題。
• 配置選項(xiàng)數(shù)量有限，許多規(guī)則無法禁用。
• 您無法添加自定義規(guī)則。
• 功能未記錄。
• 難以知道哪個(gè)規(guī)則導(dǎo)致哪個(gè)錯(cuò)誤。

JSHint

JSHint是作為JSLint（它是JSLint的一個(gè)分支）的更易于配置的版本創(chuàng)建的。您可以配置每個(gè)規(guī)則，并將它們放入配置文件中，這使得JSHint易于在大型項(xiàng)目中使用。JSHint還為每個(gè)規(guī)則提供了良好的文檔，因此您確切地知道它們的作用。將其集成到編輯器中也很簡單。

JSHint的一個(gè)小缺點(diǎn)是它帶有寬松的默認(rèn)配置。這意味著您需要進(jìn)行一些設(shè)置才能使其發(fā)揮作用。與ESLint相比，也很難知道需要更改哪些規(guī)則才能啟用或禁用某些錯(cuò)誤消息。

優(yōu)點(diǎn)：

• 大多數(shù)設(shè)置都可以配置。
• 支持配置文件，使其更易于在大型項(xiàng)目中使用。
• 開箱即用地支持許多庫，例如jQuery、QUnit、NodeJS、Mocha等。
• 基本的ES6支持。

缺點(diǎn)：

• 難以知道哪個(gè)規(guī)則導(dǎo)致錯(cuò)誤。
• 具有兩種類型的選項(xiàng)：強(qiáng)制和放寬（可用于使JSHint更嚴(yán)格或抑制其警告）。這可能會(huì)使配置略微令人困惑。
• 不支持自定義規(guī)則。

JSCS

JSCS與其他工具的不同之處在于，除非您提供配置文件或告訴它使用預(yù)設(shè)，否則它不會(huì)執(zhí)行任何操作。您可以從其網(wǎng)站下載配置，所以這不是一個(gè)大問題，它有很多預(yù)設(shè)，例如jQuery編碼風(fēng)格預(yù)設(shè)和Google預(yù)設(shè)。

它有超過90個(gè)不同的規(guī)則，您可以使用插件創(chuàng)建自定義規(guī)則。JSCS還支持自定義報(bào)告程序，這使得它更容易與需要以特定格式輸入的工具集成。

JSCS是一個(gè)代碼風(fēng)格檢查器。這意味著它只捕獲與代碼格式相關(guān)的問題，而不是潛在的錯(cuò)誤。因此，它不如其他工具靈活，但是如果您需要強(qiáng)制執(zhí)行特定的編碼風(fēng)格，JSCS可以很好地完成這項(xiàng)工作。

優(yōu)點(diǎn)：

• 支持自定義報(bào)告程序，這可以使其更容易與其他工具集成。
• 預(yù)設(shè)和現(xiàn)成的配置文件可以使您更容易設(shè)置，如果您遵循可用的編碼風(fēng)格之一。
• 有一個(gè)標(biāo)志可以在報(bào)告中包含規(guī)則名稱，因此很容易找出哪個(gè)規(guī)則導(dǎo)致哪個(gè)錯(cuò)誤。
• 可以使用自定義插件進(jìn)行擴(kuò)展。

缺點(diǎn)：

• 只檢測代碼風(fēng)格沖突。JSCS不會(huì)檢測潛在的錯(cuò)誤，例如未使用的變量或意外的全局變量等。
• 四種工具中最慢的，但這在典型使用中不是問題。

ESLint

ESLint是這四種工具中最新的。它旨在易于擴(kuò)展，帶有大量自定義規(guī)則，并且易于安裝更多插件形式的規(guī)則。它提供簡潔的輸出，但默認(rèn)情況下包含規(guī)則名稱，因此您始終知道哪些規(guī)則導(dǎo)致錯(cuò)誤消息。

ESLint文檔可能有點(diǎn)參差不齊。規(guī)則列表易于理解，并被分組到邏輯類別中，但配置說明在某些地方有點(diǎn)令人困惑。但是，它確實(shí)在一個(gè)位置提供了指向編輯器集成、插件和示例的鏈接。

優(yōu)點(diǎn)：

• 靈活：任何規(guī)則都可以切換，并且許多規(guī)則都有可以調(diào)整的額外設(shè)置。
• 非?？蓴U(kuò)展，并且有許多可用的插件。
• 易于理解的輸出。
• 包含其他代碼風(fēng)格檢查工具中沒有的許多規(guī)則，使ESLint在檢測問題方面更有用。
• 最好的ES6支持，也是唯一支持JSX的工具。
• 支持自定義報(bào)告程序。

缺點(diǎn)：

• 需要一些配置。
• 速度慢，但這并不妨礙使用。

推薦

這四種工具中，我選擇ESLint。JSLint嚴(yán)格且不可配置，而JSHint缺乏擴(kuò)展機(jī)制。如果您只想檢查代碼風(fēng)格，JSCS是一個(gè)不錯(cuò)的選擇，但是ESLint可以做到這一點(diǎn)，并且它還可以檢查您的代碼是否存在錯(cuò)誤和其他問題。

如果您想使用ES6（或ES2015，因?yàn)樗麄儸F(xiàn)在似乎這樣稱呼它），ESLint也是顯而易見的選擇。在所有提到的工具中，它對ES6特性的支持最廣泛。

如果您想嘗試ESLint，我已經(jīng)通過創(chuàng)建5步快速入門指南為您簡化了操作。您可以從我的網(wǎng)站下載ESLint 5步快速入門指南。

JSHint是強(qiáng)大的第二選擇。如果您不需要ESLint的高級(jí)功能，JSHint在正確配置后可以捕獲大量問題。JSCS擁有大量可用的規(guī)則，如果您只需要代碼風(fēng)格檢查（縮進(jìn)、大括號(hào)等），它是一個(gè)不錯(cuò)的選擇。

我猶豫是否推薦JSLint。其他工具執(zhí)行相同的操作，但不強(qiáng)加任何特定規(guī)則給用戶。唯一的例外是，如果您碰巧同意它強(qiáng)制執(zhí)行的所有規(guī)則，在這種情況下，它可能值得研究。

代碼風(fēng)格檢查工具是發(fā)現(xiàn)問題的好方法，但它只能發(fā)現(xiàn)其規(guī)則允許的錯(cuò)誤。為了更可靠地自動(dòng)捕獲錯(cuò)誤，我建議使用單元測試。代碼審查也可以為此目的提供幫助。

您和您的團(tuán)隊(duì)如何確保代碼的質(zhì)量？

關(guān)于JavaScript代碼風(fēng)格檢查工具的常見問題解答

(此處省略了FAQ部分，因?yàn)槠^長，且與偽原創(chuàng)目標(biāo)不符。FAQ部分內(nèi)容可以根據(jù)需要自行添加或修改。)

以上是JavaScript刺激工具的比較的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！