Visual StudioにESLintを導入してJavaScriptのコードをチェックする

ESLintは、JavaScriptのコードに対して構文ミスや設定したルールに沿っているかどうかをチェックできるツールです。JavaScriptは、コード内にエラーがあっても実行するまではエラーが判明しないことがあります。そのため、実行前に正しくコードが書けているかを調べたいときに便利でしょう。

PG

実行せずにJavaScriptのコードをチェックする方法ってありますか？

PM

それならESLintを使うといいですよ。概要から使い方までを見ていきましょうか。

JavaScriptのコードチェックができるESLintの概要

ESLintは、JavaScriptのコードをチェックするためのツールです。実際に実行しながら出てくるエラーに対処していく方法もありますが、ほかのファイルや設定に干渉するような内容の場合は、実行するたびに元に戻すのが面倒な場合もあります。

そのようなときに使える強力なコードチェッカーとして、現在最も汎用性に優れたものがESLintです。また、チーム開発のプロジェクトにおいて、コードの品質を高めたいときにも使えるでしょう。

ルールの設定方法はstring型のようにダブルクォーテーションで括った形で記述します。コード内にある文字列に対して検索を行い、設定したコーディングルールに沿っているかを細かくチェックすることが可能です。

例えば、指定した位置にセミコロンがあるかどうかなど、indexofメソッドのように対象の行番号と文字数を結果として表示してくれます。C#など、Visual Studioとの相性も良く、複数のエディタとの統合も可能です。

ESLintの導入と実行例

ESLintをC#などのコードを開発するVisual Studioで導入するには、まずVisual Linterをダウンロードし、インストールします。前提としてESLintもローカルにインストールされている必要がありますが、パッケージをインストールする際に同時にインストールされることもあるようです。

Visual Studioを起動して、対象のソリューションエクスプローラからnpmを選択・右クリックします。「ソリューションパッケージをインストールする」を選択して、あらかじめ用意されている複数のパッケージから選んでインストールします。

インストール終了後にESLintの設定を行うための” .eslintrc.json”というファイルをプロジェクトルート配下に作成して、ESLintの設定内容を記述すれば完了です。

↑jsonファイルの中身には上記例のほかにも細かな設定が可能です。

デフォルトファイルの一部を削除すると、コンパイルエラー表示が出るようになりました。

検証に使用したVisual Studioのバージョン
Microsoft Visual Studio Community 2019 Version 16.4.1

PG

いろいろ細かいルール設定ができるので使いやすいですね！

PM

そうですね。コーディングルールを設けたいプロジェクトにもうってつけのツールでしょう。

JavaScript のコードを実行せずにチェックするに重宝する

ESLintを使用すると、JavaScriptのコードを実行せずに潜在しているエラーをチェックすることができます。通常は実行すると、最初のエラーが発生した時点の行番号しか返りませんが、ESLintは対象の行すべてをチェックしてくれるので、問題のある個所を一度に洗いだすことが可能です。Visual Studioではコンパイルする際にコードのエラーを洗い出していますが、それと同じことをJavaScriptのコードに対して行うことができます。