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

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

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

• JSLint、JSHint、JSCS和ESLint等JavaScript代碼風(fēng)格檢查工具有助於通過遵守編碼標(biāo)準(zhǔn)和識(shí)別潛在錯(cuò)誤來(lái)避免編碼錯(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ò)誤、語(yǔ)法錯(cuò)誤以及忘記正確處理錯(cuò)誤。一個(gè)好的代碼風(fēng)格檢查工具可以在浪費(fèi)時(shí)間（或者更糟的是，浪費(fèi)客戶時(shí)間）之前就發(fā)現(xiàn)這些問題。它還可以幫助項(xiàng)目遵守編碼規(guī)範(fàn)。

市面上有很多JavaScript代碼風(fēng)格檢查工具，如何選擇呢？讓我們來(lái)看看四款流行的替代方案：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ú)法禁用許多功能，並且其中一些功能缺乏文檔。官方網(wǎng)站不是很有用，例如，它缺乏關(guān)於如何將其與您的編輯器集成的任何信息。

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

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

缺點(diǎn)：

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

JSHint

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

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

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

• 大多數(shù)設(shè)置都可以配置。
• 支持配置文件，使其更易於在大型項(xiàng)目中使用。
• 開箱即用地支持許多庫(kù)，例如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)：

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

ESLint

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

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

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

• 靈活：任何規(guī)則都可以切換，並且許多規(guī)則都有可以調(diào)整的額外設(shè)置。
• 非常可擴(kuò)展，並且有許多可用的插件。
• 易於理解的輸出。
• 包含其他代碼風(fēng)格檢查工具中沒有的許多規(guī)則，使ESLint在檢測(cè)問題方面更有用。
• 最好的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也是顯而易見的選擇。在所有提到的工具中，它對(duì)ES6特性的支持最廣泛。

如果您想嘗試ESLint，我已經(jīng)通過創(chuàng)建5步快速入門指南為您簡(jiǎn)化了操作。您可以從我的網(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ò)誤，我建議使用單元測(cè)試。代碼審查也可以為此目的提供幫助。

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

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

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

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