VSCodeでESLintを使う方法！「インストール」から「自動修正の方法」まで解説！

この記事では『ESLint』について、以下の内容をわかりやすく解説します。ご参考になれば幸いです。

  • ESLintとは何か
  • VSCodeでESLintを使うメリット
  • VSCodeでESLintを使えるようにする具体的な手順

ESLintとは

ESLintは、JavaScript / TypeScriptのコードをチェックしてくれる静的解析ツール（Linter）です。簡単に言うと、「コードの間違いやクセを事前に教えてくれる先生」のような存在です。

ESLintの主な機能は、次のとおりです。

  • 書き方のミス（文法エラー）の検出
    • JavaScript / TypeScriptの文法的な誤りを見つけてくれます。タイプミスや構文エラーなど、基本的なミスに早い段階で気づけます。
  • バグになりやすいコードの検出
    • 実行時エラーや予期しない動作につながりやすい書き方を警告してくれます。
  • コードスタイルのチェック
    • 不要なスペース、使われていない変数、書き方の不統一などを検出し、コードの見た目や品質を整えます。

VSCodeと組み合わせることで、コードを書いている途中でリアルタイムに警告が表示され、保存時には自動で修正まで行ってくれるため、開発がとてもスムーズになります。

例えば、次のようなコードがあったとします。

const value = 10;

この変数valueはどこでも使われていないため、ESLintが有効の場合、次のようなエラー（または警告）を表示してくれます。

'value' is assigned a value but never used.  no-unused-vars

これは、「値を代入しているのに使われていない変数がある」という指摘です。使われていない変数は、不要なコードやバグの原因になりやすいため、ESLintではエラーの対象になります。

VSCodeでESLintを使うメリット

VSCodeでESLintを使うと、次のようなメリットがあります。

メリット1：エディタ上でリアルタイムに警告が出る

VSCodeでESLintを有効にすると、コードを書いている途中で、次のような表示が出ます。

  • 該当行に赤色の波線（エラー）が表示される
  • 該当行に黄色の波線（警告）が表示される
  • 波線の上にマウスを乗せると、具体的なエラーメッセージが表示される

つまり、コードを実行する前の段階でミスに気づけるようになります。ターミナルでコマンドを実行してからエラーに気づくのではなく、書いた瞬間に教えてくれるのが大きなポイントです。

メリット2：保存時に自動でコードを整形できる

ESLintには、あらかじめ決めたルールに従って、コードを自動で修正してくれる機能があります。

例えば、次のような処理は、ファイルを保存するだけでESLintが自動的に行ってくれます。

  • インデントを自動で揃える
  • 余計なスペースを削除する
  • 書き方をルールに合わせて修正する

この機能を使うことで、コードの見た目を手作業で整える必要がなくなり、ロジックの実装に集中できるようになります。

メリット3：チーム開発でもコードが統一される

ESLintのルールは、設定ファイルとしてプロジェクト内で共有できます。

そのため、次のようなメリットがあります。

  • 誰が書いても、同じルール・同じ書き方のコードになる
  • コードレビューでの細かい書き方の指摘が減る

特にチーム開発では、「動いてはいるけれど、書き方が人によってバラバラ」という問題を防げる点が大きな強みです。

VSCodeでESLintを使えるようにする手順

VSCodeでESLintを使うには、いくつかの準備作業が必要です。「拡張機能をインストールすれば終わり」と思われがちですが、それだけではESLintは有効になりません。ここが、ESLintの少し分かりにくいポイントです。

VSCodeでESLintを使えるようにするまでの手順は、次のとおりです。

手順

  • VSCodeにESLint拡張機能をインストールする
  • プロジェクトにESLintをインストールする
  • ESLintの設定ファイルを作成する
  • VSCodeで保存時にESLintの自動修正を実行するようにする

それでは、各手順を順番に詳しく説明していきます。

VSCodeにESLint拡張機能をインストールする

まずは、VSCodeにESLint拡張機能をインストールします。手順は以下となっています。

  1. VSCodeを起動する
  2. 画面左側のサイドバーにある「Extensions（拡張機能）」のアイコンをクリックする
  3. Extensionsの検索ボックスに「ESLint」と入力する
  4. 一覧から「ESLint（提供元：Microsoft）」を選択する
  5. 「インストール」をクリックする
VSCodeにESLint拡張機能をインストールする

これで、ESLint拡張機能のインストールが完了です。

ただ、拡張機能をインストールしただけでは、ESLintは効きません。実際にESLint本体をプロジェクトにインストールする必要があります。

プロジェクトにESLintをインストールする

次に、プロジェクトにESLint本体をインストールします。

ESLintのインストール方法には、次の2通りがあります。

  • グローバルインストール
    • PC全体で1つのESLintを使う
  • ローカルインストール（プロジェクト単位）
    • プロジェクトごとにESLintを入れる

グローバルインストールはおすすめしません。一見すると便利そうですが、人によってESLintのバージョンがズレやすいという欠点があります。例えば、自分のPCでは「ESLint v9」、他の人のPCでは「ESLint v8」といった状態になると、同じコードを書いているのにエラーが出たり出なかったりすることが起こります。そのため、環境差による混乱を防ぐためにも、ESLintはローカルインストールするのが安心です。

ESLintをローカルインストールするためには、プロジェクトのルートディレクトリで、次のコマンドを実行します。

npmを使う場合
npm install --save-dev eslint

yarnを使う場合
yarn add -D eslint

インストールが完了すると、

  • node_modulesにESLintが追加される
  • package.jsonのdevDependenciesにeslintが登録される

という状態になります。これでESLintのローカルインストールが完了しました。

ESLintの設定ファイルを作成する

ESLintをインストールしただけでは、「どんなファイルを」「どんなルールで」チェックするのかがまだ決まっていません。

そこで次に行うのが、ESLintの初期設定（設定ファイルの作成）です。

ESLintには、質問に答えるだけで設定を作ってくれる便利なコマンドがあります。プロジェクトのルートディレクトリで、次のコマンドを実行します。

npx eslint --init

このコマンドを実行すると、いくつかの質問が順番に表示されます。初心者の方は、次のように選ぶのがおすすめです。

  • What do you want to lint?
    • どの種類のファイルをチェックしますか？
    • ここでは、ESLintでチェックしたいファイルの種類を選びます。
    • JavaScriptを選択しましょう。
  • How would you like to use ESLint?
    • ESLintをどのように使いますか？
    • 「To check syntax only（文法エラーだけをチェック）」と「To check syntax and find problems（文法エラー＋問題になりやすいコードもチェック）」から選択できます。「To check syntax and find problems」を選択しましょう。
  • What type of modules does your project use?
    • どのモジュール形式を使っていますか？
    • 「JavaScript modules (import/export)」、「CommonJS (require/exports)」、「None of these」から選択できます。「JavaScript modules (import/export)」を選択しましょう。
  • Which framework does your project use?
    • どのフレームワークを使っていますか？
    • Reactを使っている場合は「React」を選択しましょう。Vue.jsを使っている場合は「Vue.js」を選択しましょう。それらを使っていない場合は「None of these」を選択します。
  • Does your project use TypeScript?
    • TypeScriptを使っていますか？
    • .ts / .tsxファイルを使っている場合は「Yes」を、JavaScriptだけの場合は「No」を選択しましょう。
  • Where does your code run?
    • このコードはどこで実行されますか？
    • フロントエンドの場合は「Browser」を選択します。バックエンドの場合は「Node」を選択します。
  • eslint, @eslint/js, globals? Would you like to install them now?
    • 必要なパッケージを今インストールしますか？
    • 「Yes」を選択します。ESLintが動作するために必要なパッケージを自動でインストールしてくれます。
  • Which package manager do you want to use?
    • どのパッケージマネージャを使いますか？
    • npmを使っている場合は「npｍ」、yarnを使っている場合は「yarn」を選択します。

設定が完了すると、プロジェクトにeslint.config.mjsまたはeslintrc.jsが作成されます（プロジェクトやESLintのバージョンによって、作成されるファイルが異なります）。

この設定ファイルに「どんなルールでチェックするか」「どんな環境で動かすか」といった情報が書かれます。

VSCodeで保存時にESLintの自動修正を実行するようにする

VSCodeでは、ファイル保存時にESLintの自動修正（--fix）を実行できます。VSCodeのsettings.jsonに、次の設定を追加します。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

この設定を入れると、ファイル保存時にESLintが自動で--fixを実行してコードを自動修正してくれるようになります。

--fixは万能ではなく、「自動修正可能なルール」だけ直します。未使用変数などは自動では消えません。

ESLintが動いているか確認する

設定がひと通り終わったら、ESLintが正しく動作しているかを確認してみましょう。まず、ESLintが警告を出しやすいコードを書いてみます。

const value = 10;

変数valueがどこでも使われていないため、ESLintでは警告の対象になり、該当行に黄色または赤の波線が表示されます。また波線の上にマウスを乗せると、'value' is assigned a value but never used. no-unused-varsという具体的なエラーメッセージが表示されます。

また、ESLintが正しく動作しているかをコマンドラインから確認することもできます。プロジェクトのルートディレクトリで、次のコマンドを実行します。

npx eslint .

このコマンドは、プロジェクト内のファイルを対象にESLintを実行します。エラーや警告がある場合、対象ファイル・行番号・エラーメッセージ・ルール名（例：no-unused-vars）が表示されます。

$ npx eslint .

C:\Users\user01\test\src\test.js
  1:7  error  'value' is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

本記事のまとめ

この記事では『ESLint』について説明しました。

ESLintはJavaScript / TypeScriptのコード品質を保つために欠かせないツールです。

VSCodeと組み合わせることで、

  • コードを書いた瞬間にミスに気づける
  • 保存時に自動でコードを整形できる
  • チーム全体で書き方を統一できる

といった大きなメリットがあります。

最初は設定が少し難しく感じるかもしれませんが、一度導入してしまえば、普段の開発がとても快適になります。ぜひこの機会に、ESLintを開発環境に取り入れてみてください。

お読みいただきありがとうございました。

スポンサーリンク