ESLintをプログラミングエディタで使う「Visual Studio Code編」

ESLintはCLIツールですが、プログラミングエディタと組み合わせることでリアルタイムに問題箇所を指摘してくれるようになります。後でまとめて指摘されるよりも適宜チェックしてくれる方がスムーズに開発できるはずです。

そこで今回は人気のプログラミングエディタ、Visual Studio CodeとESLintを組み合わせた使い方について紹介します。

プラグインについて

Visual Studio Codeでは多数のプラグインを提供しています。その中でもESLintで使うのはESLint – Visual Studio Marketplaceになります。これをVisual Studio Codeのプラグインインストーラーからインストールします。

ESLintについて

このプラグインはESLintは含まれていません。そのため npm を使ってインストールする必要があります。グローバルにインストールする場合は次のようにコマンドを打ちます。

プロジェクト以下でだけ使う場合には次のようになるでしょう。

ESLintの設定

幾つかの設定があります。今回は主なものについて紹介します。

• eslint.autoFixOnSave
  保存時に自動的にエラーを修正します。有効で良いでしょう。
• eslint.run
  いつのタイミングでESLintを実行するか設定します。デフォルトはonTypeでキー入力時に実行されます。
• eslint.validate
  検証する言語です。デフォルトではJavaScript,JavaScriptReactとなっています。
• eslint.nodePath
  Node.jsのパスを設定します。あらかじめパスが通っている場合は設定しなくとも大丈夫です。

ファイルを開く

後は .eslintrc を配置したJavaScriptプロジェクトを開くと自動的にESLintによるチェックが行われます。赤い波線があるところがチェックに引っかかった部分になります。そして、マウスオーバーで指摘事項が表示されます。

eslint.autoFixOnSave が有効になっていると保存時、自動的にエラーを修正してくれます（修正できないエラーもあります）。

基本的には指摘事項に合わせて修正を行っていくだけです。指摘のメッセージを見て修正していくのですが、Atomのように詳細ページへのリンクがないので分かりづらい指摘の時にどう修正すべきかが分からないかも知れません。

JavaScriptのコードをより高品質にしていくためにもLintツールの力を借りるのは良いことです。Visual Studio Codeを使っている方はぜひESLintを使ってみましょう。