JavaScriptコードスタイルのチェックツールの比較：JSLINT、JSHINT、JSCS、およびESLINT

この記事では、4つの人気のあるJavaScriptコードスタイルのチェックツールを比較および分析します。JSLINT、JSHINT、JSC、ESLINTは、プロジェクトに最適なツールを選択するのに役立ちます。これらのツールは、コーディング仕様に従い、潛在的なエラーを特定することにより、コーディングエラーを回避できます。

キーポイント：

JSLINT、JSSLINT、JSCS、JSLINT、JSHINT、JSCS、ESLINTなどのESLINT JavaScriptコードスタイルのチェックツールは、標(biāo)準(zhǔn)をエンコードして潛在的なエラーを特定することでコーディングエラーを回避するのに役立ちます。各ツールには獨(dú)自の利點(diǎn)と短所があり、ツールの選択はプロジェクトの特定のニーズに依存します。

• jslintは、JavaScriptの良い部分を?qū)g施するために設(shè)計(jì)された最も古いツールです。構(gòu)成可能でスケーラブルではなく、ドキュメントがありません。 JshintはJSLINTのブランチであり、構(gòu)成が簡(jiǎn)単で大規(guī)模なプロジェクトで使いやすいですが、機(jī)能させるにはある程度のセットアップが必要です。
• JSCSは、潛在的なエラーではなく、コードのフォーマットに焦點(diǎn)を當(dāng)てたコードスタイルのチェッカーです。 90以上の異なるルールがあり、カスタムプラグインをサポートしています。ただし、他のツールほど柔軟ではなく、4つの中で最も遅いです。
• Eslintは、多くのカスタムルールを備えた最新の拡張可能なツールです。コード內(nèi)のエラーやその他の問(wèn)題をチェックするため、著者に推奨される選択です。 ES6機(jī)能とJSXをサポートします。ただし、そのドキュメントは混亂を招く可能性があり、ある程度の構(gòu)成が必要です。
プログラミングの経験は、変動(dòng)名のスペルエラー、文法エラー、エラーを正しく処理するのを忘れるなど、いくつかの低レベルの間違いを犯します。優(yōu)れたコードスタイルのチェッカーツールは、時(shí)間を無(wú)駄にする前にこれらの問(wèn)題を見(jiàn)つけることができます（またはさらに悪いことに、クライアント時(shí)間）。また、プロジェクトがコーディング仕様に準(zhǔn)拠するのにも役立ちます。

市場(chǎng)にはJavaScriptコードスタイルのチェックツールがたくさんありますか？ JSLINT、JSHINT、JSCS、ESLINTの4つの一般的な選択肢の機(jī)能と利點(diǎn)と短所を見(jiàn)てみましょう。

概要

これらの4つのツールは基本的に同じように機(jī)能します。 JavaScriptファイルで問(wèn)題を分析および報(bào)告するための一連のルールがあります。それらは、NPMを介してインストールしたり、コマンドラインから使用してファイルを渡したり、Gruntなどのツールのプラグインとして使用したり、エディターに統(tǒng)合したりすることができます。それらはすべて、コメントで構(gòu)成をサポートしています。

しかし、類(lèi)似點(diǎn)はここで終わります。各ツールには獨(dú)自の利點(diǎn)と短所があります。一部のツールには、欠點(diǎn)よりも多くの利點(diǎn)があるだけです。

jslint

jslintは、これらの4つのツールの中で最も古いものです。ダグラス?クロックフォードは、2002年にJavaScriptの良い部分であると彼が信じていることを強(qiáng)制することを目標(biāo)に、それを作成しました。これらの良い部分に同意する場(chǎng)合、JSlintは良いツールになる可能性があります。インストールして使用してください。

不利な點(diǎn)は、jslintが構(gòu)成できないか、スケーラブルではないことです。多くの機(jī)能を無(wú)効にすることはできません。それらのいくつかにはドキュメントが不足しています。公式ウェブサイトはあまり役に立ちません。たとえば、編集者と統(tǒng)合する方法に関する情報(bào)はありません。

長(zhǎng)所：

• 構(gòu)成後に使用する準(zhǔn)備ができています（実施するルールに同意する場(chǎng)合）。

短所：

• jslintには構(gòu)成ファイルがありません。設(shè)定を変更する必要がある場(chǎng)合に問(wèn)題になる可能性があります。
• 構(gòu)成オプションの數(shù)は限られており、多くのルールを無(wú)効にすることはできません。
• カスタムルールを追加することはできません。
• 関數(shù)は記録されていません。
• どのルールがどのエラーを引き起こすかを知ることは困難です。

jshint

jshintは、JSLINT（JSLINTのブランチ）の容易なバージョンとして作成されています。各ルールを構(gòu)成して構(gòu)成ファイルに配置できます。これにより、JShintは大規(guī)模なプロジェクトで使いやすくなります。 Jshintはまた、各ルールに優(yōu)れたドキュメントを提供しているので、それらが何をしているかを正確に知ることができます。エディターに統(tǒng)合することも簡(jiǎn)単です。

jshintの小さな欠點(diǎn)は、デフォルトの緩い構(gòu)成が付屬していることです。これは、それを機(jī)能させるためにいくつかのセットアップを作成する必要があることを意味します。 ESLINTと比較して、特定のエラーメッセージを有効または無(wú)効にするために、どのルールを変更する必要があるかを知ることも困難です。

長(zhǎng)所：

• ほとんどの設(shè)定は設(shè)定可能です。
• 構(gòu)成ファイルをサポートして、大規(guī)模なプロジェクトで使いやすくします。
• jquery、qunit、nodejs、mochaなど、多くのライブラリを箱から出してサポートします。
• 基本的なES6サポート。

短所：

• どのルールがエラーを引き起こすかを知ることは困難です。
• 2種類(lèi)のオプションがあります。必須とリラクゼーション（Jshintをより厳格にするために使用するか、警告を抑制するために使用できます）。これにより、構(gòu)成がわずかに混亂する可能性があります。
• カスタムルールはサポートされていません。

jscs

jscsは、構(gòu)成ファイルを提供したり、プリセットを使用するように指示しない限り、何もしないという點(diǎn)で他のツールとは異なります。 Webサイトから構(gòu)成をダウンロードできます。これは、大きな問(wèn)題ではなく、jQueryコーディングスタイルプリセットやGoogleプリセットなどのプリセットがたくさんあります。

プラグインを使用してカスタムルールを作成できる90を超えるルールがあります。 JSCSはカスタムレポートプログラムもサポートしているため、特定の形式で入力を必要とするツールと統(tǒng)合しやすくなります。

jscsはコードスタイルのチェッカーです。これは、潛在的なエラーではなく、コード形式に関連する問(wèn)題のみをキャッチすることを意味します。したがって、他のツールほど柔軟ではありませんが、特定のコーディングスタイルを?qū)g施する必要がある場(chǎng)合、JSCはうまく機(jī)能します。

長(zhǎng)所：

• カスタムレポートプログラムをサポートしているため、他のツールと統(tǒng)合しやすくなります。
• プリセットと既製の構(gòu)成ファイルにより、利用可能なコーディングスタイルのいずれかに従えばセットアップが簡(jiǎn)単になります。
• レポートにルール名を含めることができるフラグがあるため、どのルールがどのエラーを引き起こすかを簡(jiǎn)単に見(jiàn)つけることができます。
• カスタムプラグインを使用して拡張できます。

短所：

• コードスタイルの競(jìng)合のみを検出します。 JSCは、未使用の変數(shù)や予期しないグローバル変數(shù)など、潛在的なエラーを検出しません。
4つのツールの中で最も遅いですが、これは典型的な使用では問(wèn)題ではありません。

eslint

Eslintは、これらの4つのツールの最新のものです。多くのカスタムルールがあり、プラグインの形でより多くのルールを簡(jiǎn)単にインストールできるように設(shè)計(jì)されています。簡(jiǎn)潔な出力を提供しますが、デフォルトでルール名が含まれているため、どのルールがエラーメッセージを引き起こすかが常にわかります。

eslintドキュメントは少し不均一かもしれません。ルールリストは理解しやすく、論理カテゴリにグループ化されていますが、構(gòu)成命令は一部の場(chǎng)所では少し混亂しています。ただし、1つの場(chǎng)所でエディターの統(tǒng)合、プラグイン、および例へのリンクを提供します。

長(zhǎng)所：

柔軟性：すべてのルールを切り替えることができ、多くのルールには調(diào)整できる追加の設(shè)定があります。
は非常に拡張可能であり、多くのプラグインがあります。
理解しやすい出力。
他のコードスタイルのチェックツールには見(jiàn)られない多くのルールが含まれているため、ESLINTが問(wèn)題の検出に役立ちます。
最高のES6サポートとJSXをサポートする唯一のツール。
カスタムレポートプログラムをサポートします。

短所：

には構(gòu)成が必要です。
速度が遅いですが、これは使用を妨げません。

推奨

これらの4つのツールの中からEslintを選択しました。 JSLINTは厳格で不倫できませんが、Jshintには拡張メカニズムがありません。コードスタイルをチェックしたい場(chǎng)合は、JSCSが適切な選択ですが、Eslintはそれを行うことができ、コードのエラーやその他の問(wèn)題もチェックします。

ES6（またはES2015が今それをそう呼んでいるように見(jiàn)えるので）を使用したい場(chǎng)合、

eslintも明らかな選択です。上記のすべてのツールのうち、ES6機(jī)能に最も広範(fàn)なサポートがあります。

jshintは強(qiáng)力な2番目の選択肢です。 ESLINTの高度な機(jī)能が必要ない場(chǎng)合、Jshintは適切に構(gòu)成された後、多くの問(wèn)題をキャッチできます。 JSCSには多くのルールがあり、コードスタイルのチェック（インデント、ブレースなど）のみが必要な場(chǎng)合は、素晴らしいオプションです。

jslintをお?jiǎng)幛幛工毪长趣騢eします。他のツールも同じことをしますが、ユーザーに特定のルールを課しません。唯一の例外は、たまたま実施するすべてのルールに同意した場(chǎng)合、その場(chǎng)合は調(diào)査する価値があるかもしれません。

コードスタイルのチェックツールは、問(wèn)題を見(jiàn)つけるのに最適な方法ですが、ルールが許可するエラーのみを見(jiàn)つけることができます。より確実に自動(dòng)的にエラーをキャッチするために、単體テストを使用することをお?jiǎng)幛幛筏蓼埂％畅`ドレビューは、この目的にも役立ちます。

あなたとあなたのチームはあなたのコードの品質(zhì)をどのように保証しますか？

JavaScriptコードスタイルチェッカーツールに関する

FAQ

（長(zhǎng)さが長(zhǎng)すぎて擬似オリジナルの目標(biāo)と一致しないため、FAQパーツはここで省略されています。必要に応じてFAQパーツを追加または変更できます。

以上がJavaScript Lintingツールの比較の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。