PhpStorm 2026.1 Help

ESLint

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

JavaScript や TypeScript 以外にも、ESLint はプロジェクト全体や特定の部分の他の種類のファイルにも適用できます。詳しくは リントスコープの構成 を参照してください。

始める前に

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

ESLint をインストールする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

構成ファイル

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

使用している ESLint のバージョンに応じて、PhpStorm は以下のファイルタイプの構成を認識します：

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 公式サイト をご覧ください。

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 サイト(英語)の詳細を参照してください。

PhpStorm で ESLint を設定する

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

ESLint を自動的に構成する

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

ESLint が依存関係として記載されている複数の package.json ファイルがある場合、PhpStorm は 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 プロセスの作業ディレクトリを指定します。

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

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

    • 絶対パス。

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

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

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

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

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

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

  4. 使用する構成を選択します。

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

      PhpStorm は、チェック対象ファイルが保存されているフォルダーから検索を開始し、その親フォルダー、さらにその上、とプロジェクトルートまで順にファイルを探します。

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

    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 を使用して保存されるたび、または実行/デバッグ構成を起動したり、PhpStorm を閉じたり、バージョン管理アクションを実行したりして自動的に保存されるたびに、検出された問題を修正できます。詳細については、 自動保存を参照してください。

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

コードの Lint

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

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

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

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

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

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

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

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

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

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

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

    ESLint: 問題を解決する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PhpStorm はすべての公式形式の 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 サイト(英語)の詳細を参照してください。

  • 初めてプロジェクトを開いたとき、PhpStorm はプロジェクト ESLint 構成からコードスタイルを自動でインポートします。

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

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

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

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

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

JavaScript 標準スタイルを使用

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

JavaScript Standard をインストール

ESLint 経由で Standard のリントを有効化する

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

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

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

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

  1. 設定 ダイアログ（Ctrl+Alt+S ）で エディター | コードスタイル | JavaScript に移動します。

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

Docker を使用した ESLint

PhpStorm を使えば、ローカルと同様、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. エディターの任意の場所を右クリックして、コンテキストメニューから 「パッケージマネージャー install」を実行してください。 を選択します。

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

    Docker コンテナー内の ESLint
2026 年 5 月 22 日
JavaScript リンター​​JSLint​​