IntelliJ IDEA 2026.1 Help

ESLint

IntelliJ IDEA は ESLint と連携し、プラグインで拡張可能な幅広いリントするルールを提供します。 IntelliJ IDEA は、入力時に ESLint によって報告された警告とエラーをエディターに表示します。 ESLint を使用すると、 JavaScript 標準スタイル(英語)を使用したり、 TypeScript コードをリントしたりすることもできます。

JavaScript と TypeScript に加えて、ESLint はプロジェクト全体またはその特定の部分の他のタイプのファイルに適用できます。 lint スコープを構成するを参照してください。

始める前に

  • Node.js をダウンロードしてインストールします。

ESLint をインストールする

  1. 埋め込まれた ターミナル （Alt+F12 ）で、次のいずれかのコマンドを入力します。

    • npm init @eslint/config@latest は現在のプロジェクトに ESLint をインストールし、構成ファイルを生成します。

      ウィザードの質問に答えます。 その結果、IntelliJ IDEA は最新バージョンの ESLint をインストールし、 eslint.config.js 構成ファイルを生成します。

    • 開発依存関係として ESLint をインストールするための npm install --save-dev eslint

    • グローバルインストール用の npm install --g eslint

    • pnpm create @eslint/config@latest は現在のプロジェクトに ESLint をインストールし、構成ファイルを生成します。

      ウィザードの質問に答えます。 その結果、IntelliJ IDEA は最新バージョンの ESLint をインストールし、 eslint.config.js 構成ファイルを生成します。

    • 開発依存関係として ESLint をインストールするための pnpm add -D eslint

    • グローバルインストール用の pnpm add -g eslint

    • yarn create @eslint/config は現在のプロジェクトに ESLint をインストールし、構成ファイルを生成します。

      ウィザードの質問に答えます。 その結果、IntelliJ IDEA は最新バージョンの ESLint をインストールし、 eslint.config.js 構成ファイルを生成します。

    • 開発依存関係として ESLint をインストールするための yarn add -D eslint

    • グローバルインストール用の yarn add eslint

  2. 必要に応じて、追加のプラグイン（たとえば、 eslint-plugin-react(英語) を lint React アプリケーションにインストール）をインストールします。

ESLint 公式 Web サイト(英語)の詳細を参照してください。

構成ファイル

サポートされている設定ファイルの形式

使用している ESLint のバージョンに応じて、IntelliJ IDEA は次のファイルタイプ内の構成を認識します。

ESLint バージョン 9 以降

eslint.config.js 、 eslint.config.mjs 、または eslint.config.cjs (フラットフォーマット) の場合は、 ESLint 公式 Web サイト(英語)から詳細を確認してください。

eslint.config.ts 、 eslint.config.mts 、 eslint.config.cts など、TypeScript で記述された構成ファイルを使用することもできます。 そのためには、 unstable_ts_config フラグを指定する必要があります。

  1. Ctrl+Alt+S を押して設定を開き、 言語 & フレームワーク | JavaScript | コード品質ツール | ESLint を選択します。

  2. 手動 ESLint 構成 を選択します。

  3. 「追加 eslint オプション 」フィールドに --flag unstable_ts_config と入力します。

  4. 適用 をクリックして変更を保存し、ダイアログを閉じます。

ESLint バージョン 8 以前

  • .eslintrc.* ( .eslintrc 、 .eslintrc.json 、または .eslintrc.yaml ファイル、またはサポートされている別の形式のファイル)。

  • .eslintignore

  • package.json で eslintIgnore または eslintConfig プロパティを使用します。 この構成システムは非推奨です。 ESLint 公式 Web サイト(英語)から詳細を確認してください。

ESLint 設定移行ガイド(英語)からフラット形式に切り替える方法を学習します。

設定ファイルの作成と編集

  • プロジェクトのルートで設定ファイルを開くか、新しい設定ファイルを作成します。 使用している ESLint のバージョンに応じて設定ファイルを入力します。

    // @ts-check import eslint from '@eslint/js'; import tseslint from 'typescript-eslint'; export default tseslint.config( eslint.configs.recommended, tseslint.configs.recommended, );

    ESLint 公式 Web サイト(英語)の詳細を参照してください。

    /* eslint-env node */ module.exports = { extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], root: true, };

    ESLint 公式 Web サイト(英語)の詳細を参照してください。

IntelliJ IDEA で ESLint を設定する

デフォルトでは、ESLint は 自動的に構成されます。 すべての構成設定を 手動で指定するか、ESLint を無効にするかを選択できます。

ESLint を自動的に構成する

自動構成では、IntelliJ IDEA はプロジェクトの node_modules フォルダーの ESLint パッケージと、現在のファイルが保存されているフォルダーの 構成ファイルを使用します。 現在のファイルフォルダーに 構成ファイルが見つからない場合、IntelliJ IDEA はプロジェクトルートまでの親フォルダーで構成ファイルを検索します。

ESLint が依存関係としてリストされている複数の package.json ファイルがある場合、IntelliJ IDEA は package.json ごとに別々のプロセスを開始し、その下にあるすべてのものを処理します。 これにより、モノレポまたは複数の ESLint 構成を持つプロジェクトの各パスに、特定の ESLint バージョンまたは特定のプラグインセットを適用できます。

  • 現在のプロジェクトで ESLint を自動的に構成するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動して、 自動 ESLint 構成 オプションを選択します。

  • すべての新しいプロジェクトで ESLint を自動的に構成するには、 新規プロジェクトの設定 ダイアログ（ファイル | 新規プロジェクトのセットアップ | 新規プロジェクトの設定 ）を開き、 言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動して、 自動 ESLint 構成 オプションを選択します。

ESLint を手動で構成する

手動構成では、カスタム ESLint パッケージ、構成ファイル、作業ディレクトリを使用したり、さまざまな追加のルールやオプションを適用したりできます。

  1. 設定 ダイアログ（Ctrl+Alt+S ）で、 言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動し、 手動 ESLint 構成 を選択します。

  2. ESLint パッケージ フィールドで、 eslint または 標準パッケージの場所を指定します。

  3. 作業ディレクトリ フィールドで、ESLint プロセスの作業ディレクトリを指定します。

    デフォルトでは、このフィールドは空で、IntelliJ IDEA は作業ディレクトリを自動的に検出します。 まず、 設定ファイルを含む lint ファイルに最も近いディレクトリを探します。

    自動検出された作業ディレクトリがプロジェクト構成と一致しない場合は、作業ディレクトリ（ディレクトリ）を手動で指定する必要があります。 区切り文字としてセミコロンを使用します。 許容値は次のとおりです。

    • 絶対パス。

    • プロジェクトのベースディレクトリ (IntelliJ IDEA 固有のプロジェクトメタデータが格納されている .idea フォルダーの親フォルダー) からの相対パス。 例:

      1. ./: プロジェクトのベースディレクトリを ESLint プロセスの作業ディレクトリとして使用します。

      2. client;server: <project_base_dir>/client および <project_base_dir>/server を作業ディレクトリとして使用します。 server フォルダーでもなく client でもないファイルの場合、作業ディレクトリは 上記のように自動検出になります。

      3. packages/*: <project_base_dir>/packages ディレクトリの各サブフォルダーは、対応する lint ファイルの作業ディレクトリとして使用されます。

    • 一部の lint ファイルがフォルダー階層のプロジェクトベースディレクトリにない場合は、コンテンツルートからの相対パスを使用できます。

    • 作業ディレクトリへの相対パスを定義する Glob パターン(英語)。 例: **/foo -* を使用すると、名前が foo- で始まる各ディレクトリが、対応する lint ファイルの作業ディレクトリとして使用されます。

  4. 使用する設定を選択します。

    • 自動検索: サポートされている形式の 構成ファイルで ESLint ルールが構成されている場合は、このオプションを選択します。

      IntelliJ IDEA は、チェック対象のファイルが保存されているフォルダーから始めて、その親フォルダーを検索し、プロジェクトルートに到達するまでこれを繰り返してそのようなファイルを検索します。

    • 構成ファイル - このオプションを選択してカスタムファイルを使用し、 パス フィールドでファイルの場所を指定します。

    ESLint 公式 Web サイト(英語)から ESLint を設定する方法の詳細を参照してください。

  5. オプション:

    • 追加eslint オプション フィールドで、ESLint を実行する際に使用する追加のコマンドラインオプションをスペース区切りで指定します。 例えば、 TypeScript で記述された構成ファイル を使用するには、 --flag unstable_ts_config を入力します。

      ESLint 公式 Web サイト(英語)の ESLint CLI オプションの詳細を参照してください。

    • 追加ルールディレクトリ フィールドで、追加のコード検証ルールを含むファイルの場所を指定します。 これらのルールは、デフォルトの構成ファイルまたはカスタム構成ファイルのルールの後に適用され、それに応じてそれらのルールを上書きします。

      ESLint 構成ファイル(英語)と ルールの追加(英語)の詳細については、ESLint の公式 Web サイトを参照してください。

lint スコープを構成する

  1. 設定 ダイアログ（Ctrl+Alt+S ）を開き、 言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動して、 自動 ESLint 構成 または 手動 ESLint 構成 を選択します。

  2. ファイルに対して実行 フィールドで、リントするファイルのセットを定義するパターンを指定します。 デフォルトのパターンを受け入れるか、カスタムパターンを入力できます。

    デフォルトのパターンである **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,html,vue} を使用すると、ESLint が起動し、更新された JavaScript、TypeScript、JSX、TSX、HTML、Vue ファイルを処理します。 他のタイプのファイルまたは特定のフォルダーに保存されているファイルをリントするには、 glob パターン(英語)を使用してデフォルトのパターンを更新します。

    • 例: CoffeeScript ファイルも自動的に lint するには、次のように coffee をデフォルトのパターンに追加します。

      **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,html,vue,coffee}

    • サブフォルダーを含む特定のフォルダーからファイルを lint する場合は、 **/* を <path to the folder>/**/* に置き換えます。

      次のような構造のプロジェクトがあるとします。

      ESLint: カスタムパターン。 プロジェクト構造の例

      coffee フォルダー内のファイルのみをリントするには、次のようにパターンを更新します。

      coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,html,vue,coffee}

      その結果、ファイル lint.coffee はリントされますが、 no_lint .coffee はリントされません。

保存時に問題を自動的に修正

ESLint は、変更が手動で Ctrl+S を使用して保存されるたび、または実行/デバッグ構成を起動したり、IntelliJ IDEA を閉じたり、バージョン管理アクションを実行したりして自動的に保存されるたびに、検出された問題を修正できます。詳細については、 自動保存を参照してください。

  • 設定 ダイアログ（Ctrl+Alt+S ）を開き、 言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動して、 保存時に eslint --fix を実行 チェックボックスを選択します。

コードの Lint

ESLint をインストールして有効にすると、JavaScript ファイルを開くたびに ESLint が自動的に起動します。 保存時に問題を自動的に検出して修正するように ESLint を構成することもできます。

デフォルトでは、IntelliJ IDEA は、ESLint 構成の重大度に基づいて検出された問題をマークします。 これらの設定を無効にする方法については、 ESLint ハイライトの設定を参照してください。

現在のファイルで検出されたエラーの説明とそれらのクイックフィックスは、エディターおよび 問題ツールウィンドウの ファイル タブから入手できます。

以前に開いたすべてのファイルのエラーとそれらのクイックフィックスは、 問題 ツールウィンドウの プロジェクトエラー タブに表示されます。 ツールウィンドウを開くには、エディターの右上隅にある インスペクション ウィジェットをクリックします。

インスペクションウィジェット

詳細については、 エディターで問題を表示してクイックフィックスを適用するおよび 問題ツールウィンドウを参照してください。

エディターで問題を表示してクイックフィックスを適用する

  • 問題の説明を表示するには、ハイライトされたコードにカーソルを合わせます。

    ESLint: エラーと警告がハイライトされ、問題の説明がツールチップに表示されます。

    検出された問題を解決するには、 ESLint: 「<ルール名>」を修正 をクリックするか、 Alt+Shift+Enter を押します。

    現在のファイルで検出されたすべての問題を解決するには、 More actions （Alt+Enter ）をクリックして、リストから ESLint: 現在のファイルを修正 を選択します。

    ESLint: 問題を解決する

    詳細は、 エディターで問題を表示してクイックフィックスを適用するを参照してください。

  • このファイルが保存されるときにファイル内のすべての問題を修正するように ESLint を構成することもできます。 このような動作を構成するには、 IntelliJ IDEA での ESLint のアクティブ化と構成の説明に従って、 設定 ダイアログの ESLint ページで 保存時に eslint --fix を実行 チェックボックスを選択します。

問題ツールウィンドウでコードをリントする

  • 問題 ツールウィンドウを開くには、エディターの右上隅にある インスペクション ウィジェットをクリックします。

    インスペクションウィジェット

    または、メインメニューから 表示 | ツールウィンドウ | 問題 を選択するか、 Alt+6 を押します。

  • ファイル タブでは、問題の記述を表示したり、クイックフィックスを適用したり、エラーが発生したソースコードのフラグメントへ移動したり、さらにツールウィンドウを離れずに エディタープレビュー ペインで修正したりできます。 問題ツールウィンドウから詳細を参照してください。

    問題ツールウィンドウのクイックフィックス

  • プロジェクトエラー タブでは、現在のセッション中に開かれたすべてのファイルのエラーが表示され、エラーメッセージが検出されたファイルごとにグループ化されます。

    問題ツールウィンドウ、ESLint。 プロジェクト全体で以前に開かれたファイルの構文エラーが Project Errors タブに表示されます。

    ここでは、問題の説明を表示したり、クイックフィックスを適用したり、エラーが発生したソースコードのフラグメントに移動したり、ツールウィンドウを移動せずに エディタープレビュー ペインでフラグメントを修正したりできます。 問題ツールウィンドウから詳細を参照してください。

ESLint のハイライトを構成する

デフォルトでは、IntelliJ IDEA は、ESLint 構成の重大度レベルに基づいて、検出されたエラーと警告をマークします。 例: エラーは赤い波線でハイライトされ、警告は黄色の背景でマークされます。 詳細については、 コードインスペクション および インスペクションの重大度を変更する を参照してください。

ESLint 構成のルールの重大度レベルを変更する

構成から重大度レベルを無視する

ESLint 構成の重大度をオーバーライドして、IntelliJ IDEA が無視し、リンターによって報告されたすべてのものをエラー、警告、カスタムカラーで表示することができます。

ESLint のカスタム重大度レベルの指定

構成から重大度レベルを無視する

  1. 設定 ダイアログ（Ctrl+Alt+S ）で、 エディター | インスペクション を選択します。 インスペクションページが開きます。

  2. 中央ペインで、 JavaScript | コード品質ツール | ESLint に移動します。

  3. 右側のペインで、 構成ファイルのルール重要度を使用する チェックボックスをオフにし、デフォルトのものの代わりに使用する重大度を選択します。

ESLint からコードスタイルをインポートする

ESLint コードスタイルルール(英語)の一部を IntelliJ IDEA JavaScript コードスタイル設定にインポートできます。 これにより、IntelliJ IDEA は、コードの自動補完、生成、リファクタリング、インポートステートメントの追加時に、プロジェクトに対してより正確なコードスタイルオプションを使用できるようになります。 再フォーマット アクションを使用すると、IntelliJ IDEA は ESLint の観点から適切にフォーマットされたコードを壊さなくなります。

IntelliJ IDEA はすべての公式形式の ESLint 構成を理解します。上記の ESLint 設定ファイルのサポートされている形式も参照してください。

  • ESLint バージョン 9 以降の場合は eslint.config.js 、 eslint.config.mjs 、 eslint.config.cjs 、 eslint.config.ts 、 eslint.config.mts 、または eslint.config.cts (フラット形式)。

  • ESLint バージョン 8 以前の eslintConfig プロパティを持つ .eslintrc ファイルと package.json ファイル。

ESLint 公式 Web サイト(英語)の詳細を参照してください。

  • 最初にプロジェクトを開くと、IntelliJ IDEA はプロジェクトの ESLint 設定からコードスタイルを自動的にインポートします。

  • ESLint の設定が（手動またはバージョン管理から）更新されている場合は、それをエディターで開き、コンテキストメニューから ESLint コードスタイルルールの適用 を選択します。

    JavaScript または YAML 設定ファイルから ESLint コードスタイルルールをインポートする

    または、ファイルの上部にある "ESLint からコードスタイルを適用しますか？ " の質問に はい と答えるだけです。

    適用されたルールのリストは、 通知 ツールウィンドウに表示されます。

    イベントログツールウィンドウに、適用されている ESLint ルールのリストが表示されます

JavaScript 標準スタイルを使用する

JavaScript 標準スタイル をアプリケーションのデフォルトの JavaScript コードスタイルとして設定できます。これにより、コードの入力や整形時に主なルールが適用されます。 Standard は ESLint をベースとしているため、IntelliJ IDEA の ESLint 連携を通じて Standard も使用できます。

JavaScript Standard のインストール

ESLint 経由で standard をリントすることを有効化する

プロジェクトの package.json ファイルに standard が記載されているプロジェクトを開くと、IntelliJ IDEA は自動的に lint を Standard で有効にします。

  1. 設定 ダイアログ (Ctrl+Alt+S) で、 言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に進みます。

  2. 表示された ESLint ページで、 手動 ESLint 構成 を選択し、 ESLint パッケージ フィールドに standard パッケージの場所を指定します。

JavaScript 標準スタイルをデフォルトとして設定する

  1. 設定 ダイアログ (Ctrl+Alt+S) で、 エディター | コードスタイル | JavaScript に進みます。

  2. JavaScript ページで 選択して設定 をクリックし、次に JavaScript 標準スタイル を選択します。 スタイルは現在のスキームを置き換えます。

Docker を使用した ESLint

IntelliJ IDEA を使用すると、ローカルで実行するのと同じ方法で、Docker コンテナー内のコードに対して ESLint を実行できます。

Node.js と Docker の詳細を参照してください。

  1. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに Node.js リモートインタープリタープラグインをインストールして有効にします。

  2. 設定 | プラグイン ページのタブ インストール済み で、 Node.js および Docker 必要なプラグインが有効になっていることを確認してください。 詳細は、 プラグインの管理を参照してください。

  3. Docker の説明に従って、 Docker をダウンロード、インストール、構成します。

  4. Docker で Node.js リモートランタイムを構成するまたは Docker Compose を介して、プロジェクトの デフォルトとして設定します。 また、このリモートランタイムに関連付けられたパッケージマネージャーが プロジェクトのデフォルトとして設定されていることを確認してください。

  5. package.json を開き、ESLint が devDependencies セクションにリストされていることを確認します。

    { "name": "node-eslint", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "2.0.0-beta11" }, "devDependencies": { "@eslint/js": "^9.15.0", "eslint": "^9.15.0", "globals": "^15.12.0" } }

  6. エディターの任意の場所を右クリックして、コンテキストメニューから '<パッケージマネージャー> のインストール' の実行 を選択します。

  7. その後、ESLint は、コードをローカルで操作する場合と同じように機能します。 検出された不一致の説明をエディターまたは 問題 ツールウィンドウで表示し、提案されたクイックフィックスを適用します。

    Docker コンテナー内の ESLint
2026 年 3 月 30 日
JavaScript リンターJSLint