優れた文章が優れた編集の恩恵を受けていることは、ほぼ間違いないでしょう。 この点で、コードは散文と何ら変わりません。 3517>

Linting は、コードに何らかのエラーがないかチェックする行為またはプロセスです。 与えられたコードの部分の有効性を最適化する方法について、多くの考えがあります。 しかし、エラーがなく、特定のスタイル ガイドに準拠していることを確認することは、基本中の基本です。 これは一貫性と読みやすさの問題である場合もあれば、そもそもコードを実際に実行するための問題である場合もあります。

JavaScript linting に関して言えば、際立ったツールがいくつかあります。 ここでは、Linting プロセスを開始または改善するのに役立つ 4 つのリンターについて見ていきましょう。 JSLint、standardJS、JSHint、および ESLint です。

JSLint

JSLint は Douglas Crockford によって 2002 年に作られましたが、彼は JavaScript に関して間違いなく最高の本の 1 つを書いてもいる方です。 JSLint はシンプルさとスピードをもたらします。

JSLint は、コードを貼り付けることができるテキストフィールドによって支配されている 1 ページのサイトで構成されています。 JSLint’ ボタンをクリックすると、文法的、構文的、またはその他のあらゆるエラーがテキスト フィールドの下に表示されます。 テキストフィールドの下には、チェックボックスで設定可能なオプションの小さなリストがあります。 オプションには、余分なホワイトスペース、’this’ キーワードの使用 (これは Crockford 氏の講演では推奨されていません)、および Node.js の包含が含まれます。

特定のスタイル ガイドに縛られず、自分のコードをチェックしてくれる信頼できるソースを求めるなら、JSLint は素晴らしいオプションです。 3517>

standardJS

GitHub のスターのみに基づいて、standardJS は最も人気のあるオプションで、約 19,000 のスターを獲得しています。 これは完全に意見であり、つまりカスタマイズは全くできません。 しかし、もしあなたが特定のスタイルガイドに縛られないのであれば、これは幸せなことかもしれません。 Node CLIの形で提供され、グローバルに、あるいは開発依存として、ターミナルやコマンドラインを使ってインストールすることができます:

$ npm install standard --global// or$ npm install standard --save-dev

標準JSはNodeとnpmを前提条件としており、コマンドラインやnpmスクリプトから実行するので、JSLintのレベルより少しハードルが上がっています。 しかし、その分設定ができないので、他に気にすることはあまりないでしょう。 コマンドラインから一言コマンドを実行すれば、現在の作業ディレクトリにある.js拡張子を持つすべてのファイルをチェックします。

見つかったエラーはターミナルやコマンドラインに出力されます。 標準 JS ドキュメントにあるこの例のような出力が期待できます。

$ standardError: Use JavaScript Standard Stylelib/torrent.js:950:11: Expected '===' and instead saw '=='.

ファイルまたはディレクトリを指定する必要がある場合、パスを引数として含め、ワイルドカードを使用できます。 また、ワイルドカードも受け付けます。 この例では、standardJS は src ディレクトリとそのサブディレクトリにある JavaScript ファイルを探して lint します:

$ standard "src/**/*.js" --fix

ファイルパスの後の --fix フラグは、エラーが見つかると自動的に修正するオプションです。 これは素晴らしい時間の節約になりますが、エラーを自分で修正する素晴らしい学習にもなります。

standardJS を使用するかどうかを決定する前に、使用する規約やルールを調べたい場合、完全なリストはここで見つけることができます。 StandardJS は、JavaScript リンターを始めるための迅速で信頼できる方法を探している人にとって、素晴らしい選択肢です。

JSHint

JSHint は JSLint のフォークとして始まりました。 目標は、より設定可能なリンタを作ることでした。 もしあなたが standardJS か、他の意見付きリンターを使っていて、 あなた自身のリントルールをカスタマイズし始める方法を探しているなら、 JSHint はあなたのためにあるかもしれません。

JSLint と同様に、JSHint のホームページには、コードを貼り付けることができるテキストフィールドがあります。 テキストフィールドの右側にある Metrics フィールドは、コードを入力するとリアルタイムに更新され、そのコードがいくつの関数を含んでいるかなど、コードに関する統計の実行中のリストを集計してくれます。 もちろん、見つかった linting エラーも表示されます。

コピー/貼り付けの手法が好きではなく、プロジェクトに組み込みたい場合、JSHint はグローバルまたは npm を使用してプロジェクトの依存性としてインストールすることができます。

$ jshint index.js// or$ jshint src/

最初の例では、JSHint は index.js ファイルを lint し、2番目の例では ‘src/’ ディレクトリを再帰的に検索して、見つかった JavaScript ファイルを lint します。

もしカスタマイズを気にしないのであれば、JSHint は上記の例のように使うことができ、うまく動作するでしょう。 しかし、JSHintは完全に設定可能であり、またAPIを公開しているので、あなた自身のJavaScriptファイルの中でJavaScriptモジュールとして使用することができるため、ここから複雑さが大幅に増加します。

カスタム設定は、.jshintrc という名前のファイルに保存されるべきで、ファイルは次のようになります:

{"esversion": 5,"eqeqeq": true,"strict": true}

この例は上から順に、ECMAScript のバージョンを 5 とし、値の比較では 2 つの等号 (== または !=) とは異なり 3 つの等号 ( === または !==) を使用しなければならず、Strict Mode を実施するよう求めています。 コマンドラインで -- config フラグの後ろに .jshintrc ファイルへのパスを指定するか、プロジェクトの package.json ファイルで ‘jshintConfig’ 属性として宣言すれば、独自の設定を含めることができます。

コマンドラインオプションは次のようになります:

// looks for '.jshintrc' in the current directory$ jshint --config './.jshintrc'

一方、package.json オプションは次のようになります:

{ "jshintConfig": { "esversion": 5, "eqeqeq": true, "strict": true }}

JSHint で独自の linting 規則をカスタマイズするためにこれらの基本を利用することができます。 もっと知りたい場合は、公式ドキュメントに JSHint API の使い方と、ニーズに合わせてカスタマイズできるすべての方法が網羅されています。

ESLint

GitHub スターとは別に、JavaScript のリントに関しては ESLint がおそらく最もよく見られるリンターで、多くの人が使うものでしょう。 ESLintはJavaScriptのパース方法に関してJSLintやJSHintと比較しています。

ESLint を使い始めるには、グローバルに、または開発依存としてインストールします。

$ npm install eslint --save-dev// or$ npm install eslint --global

ESLint をグローバルにインストールすると、その設定は、実行するすべてのプロジェクトファイルに適用されます。 しかし、プロジェクトごとに異なる設定が必要な場合、開発用依存ファイルとしてインストールし、プロジェクトごとに異なる設定ファイルを作成することができます。 ESLint がグローバルにではなく、プロジェクトの依存関係としてインストールされた場合、次のように node_modules フォルダから実行ファイルを実行する必要があることに注意してください：

$ ./node_modules/.bin/eslint --init

上記のコマンドを実行すると、一連の質問によって ESLint を設定するように促されるでしょう。 (注意: lintingルールをどれだけカスタマイズしようと、ESLintはあなたのコードをlintする前にこのプロセスで生成される.eslintrcファイルを必要とするので、このステップから始めなければなりません。)

最初の質問は、ESLintをどのように設定するかというものです。 3つの選択肢があります: 一般的なスタイルガイドを使うか、あなたのスタイルに関する質問に答えるか、ESLintがあなたのために、あなたのファイルを検査してルールを設定する方法を決定することによって、自分自身を設定させるかです。

どの経路をたどっても、ESLint はあなたの回答を使って、現在の作業ディレクトリに .eslintrc という名前のファイルを生成します。 このファイルは、この先、lintingのルールを変更したい場合に修正するファイルです。

JSON 形式の .eslintrc ファイルの例です。デフォルトの Airbnb JavaScript スタイル ガイド ルールを使用し、2 つのカスタム ルール (ストリクト モードをオフにし、console.log() ステートメントを許可) を含んでいます:

{ "extends": "airbnb-base", "rules": { "strict": "off", "no-console": "off" }}

自分のスタイルに関する質問に回答すると、使用している ECMAScript バージョン、タブまたはスペース、セミコロンを使用するか否か、JSX または React を使用するかといった質問が表示されます。 ESLintはReactと補助的なプラグインをすぐに使えるので、React開発者にとって最高の選択肢になりそうです。

ESLint がインストールされ、.eslintrc ファイルが生成されたら、CLI を使用してコードの lint を開始することができます。 ESLint はデフォルトであなたの .eslintrc ファイルを探すので、コマンドラインで設定を指定する必要はありません。 しかし、ESLintの動作を変更するために、さまざまなフラグを使用することができます。 下の例では、 -- quietフラグがESLintに警告とエラーの両方を表示するのではなく、エラーだけを表示するように指示しています。 --fix フラグは、見つけたエラーを自動的に修正するように指示します。

// run eslint against file1.js$ ./node_modules/.bin/eslint file1.js// run eslint against file1.js and file2.js with flags to modify behavior$ ./node_modules/.bin/eslint file1.js file2.js --quiet --fix

これまで説明してきた他の CLI と同様に、必要であれば特定のファイル名の代わりにワイルドカードやファイルパスを使用することが可能です。 ESLint は高度な設定が可能ですが、デフォルトの設定方法として親しみやすいセットアップガイドを使用することで、学習曲線を緩和しています。

.