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

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

キーポイント：

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

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

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

概要

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

しかし、類似點はここで終わります。各ツールには獨自の利點と短所があります。一部のツールには、欠點よりも多くの利點があるだけです。

jslint

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

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

長所：

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

短所：

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

jshint

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

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

長所：

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

短所：

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

jscs

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

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

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

長所：

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

短所：

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

eslint

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

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

長所：

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

短所：

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

推奨

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

ES6（またはES2015が今それをそう呼んでいるように見えるので）を使用したい場合、

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

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

jslintをお勧めすることをheします。他のツールも同じことをしますが、ユーザーに特定のルールを課しません。唯一の例外は、たまたま実施するすべてのルールに同意した場合、その場合は調(diào)査する価値があるかもしれません。

コードスタイルのチェックツールは、問題を見つけるのに最適な方法ですが、ルールが許可するエラーのみを見つけることができます。より確実に自動的にエラーをキャッチするために、単體テストを使用することをお勧めします。コードレビューは、この目的にも役立ちます。

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

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

FAQ

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

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