ESLint

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

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

始める前に

Node.js をダウンロードしてインストールします。
ローカル Node.js インタープリターの構成、または Windows Subsystem for Linux で Node.js を使用する、またはリモート Node.js インタープリターの構成に従って、プロジェクトで Node.js インタープリターを構成します。

ESLint をインストールする

埋め込まれたターミナル（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
必要に応じて、追加のプラグイン（たとえば、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 フラグを指定する必要があります。

Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint を選択します。
手動 ESLint 構成を選択します。
追加 eslint オプションフィールドに --flag unstable_ts_config と入力します。
適用をクリックして変更を保存し、ダイアログを閉じます。

ESLint バージョン 8 以前

.eslintrc.* (.eslintrc、.eslintrc.json、または .eslintrc.yaml ファイル、またはサポートされている別の形式のファイル)。
.eslintignore
eslintIgnore または eslintConfig プロパティを持つ package.json。この構成システムは非推奨です。詳細については、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 パッケージ、構成ファイル、作業ディレクトリを使用したり、さまざまな追加のルールやオプションを適用したりできます。

設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動し、手動 ESLint 構成を選択します。
ESLint パッケージフィールドで、eslint または標準パッケージの場所を指定します。
作業ディレクトリフィールドで、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 ファイルの作業ディレクトリとして使用されます。
使用する設定を選択します。
- 自動検索 : サポートされている形式の構成ファイルで ESLint ルールが構成されている場合は、このオプションを選択します。
  IntelliJ IDEA は、チェック対象のファイルが保存されているフォルダーから始めて、その親フォルダーを検索し、プロジェクトルートに到達するまでこれを繰り返してそのようなファイルを検索します。
- 構成ファイル - このオプションを選択してカスタムファイルを使用し、パスフィールドでファイルの場所を指定します。
ESLint 公式 Web サイト(英語)から ESLint を設定する方法の詳細を参照してください。
オプション:
- 追加 eslint オプションフィールドで、ESLint を実行するための追加のコマンドラインオプションを指定します。区切り文字としてスペースを使用します。例: TypeScript で記述された構成ファイルを使用するには、--flag unstable_ts_config と入力します。
  ESLint 公式 Web サイト(英語)の ESLint CLI オプションの詳細を参照してください。
- 追加ルールディレクトリフィールドで、追加のコード検証ルールを含むファイルの場所を指定します。これらのルールは、デフォルトの構成ファイルまたはカスタム構成ファイルのルールの後に適用され、それに応じてそれらのルールを上書きします。
  ESLint 構成ファイル(英語)とルールの追加(英語)の詳細については、ESLint の公式 Web サイトを参照してください。

lint スコープを構成する

設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動して、自動 ESLint 構成または手動 ESLint 構成を選択します。
ファイルに対して実行フィールドで、リントするファイルのセットを定義するパターンを指定します。デフォルトのパターンを受け入れるか、カスタムパターンを入力できます。
デフォルトのパターンである **/*.{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>/**/* に置き換えます。
  次のような構造のプロジェクトがあるとします。
  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: 「<ルール名>」を修正をクリックするか、Alt+Shift+Enter を押します。
現在のファイルで検出されたすべての問題を解決するには、その他のアクション（Alt+Enter）をクリックして、リストから ESLint: 現在のファイルを修正を選択します。
詳細は、エディターで問題を表示してクイックフィックスを適用するを参照してください。
または、問題ツールウィンドウ Alt+6 のファイルタブを開くと、問題の説明を表示したり、クイックフィックスを適用したり、エラーが発生したソースコードのフラグメントに移動したり、ツールウィンドウを移動せずにエディタープレビューペインでエラーを修正したりできます。詳細については、問題ツールウィンドウを参照してください。
このファイルが保存されるときにファイル内のすべての問題を修正するように ESLint を構成することもできます。このような動作を構成するには、IntelliJ IDEA での ESLint のアクティブ化と構成の説明に従って、設定ダイアログの ESLint ページで保存時に eslint --fix を実行チェックボックスを選択します。

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

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

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

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

Problems tool window, ESLint. Project Errors tab shows syntax errors in previously opened files across the project

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

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

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

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

設定ファイルで、編集するルールを見つけて、その値を 1 warn または 2 error に設定します。
ESLint 公式 Web サイト(英語)の詳細を参照してください。

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

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

Specifying a custom severity level for ESLint

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

設定ダイアログ（Ctrl+Alt+S）で、エディター | インスペクションを選択します。インスペクションページが開きます。
中央ペインで、JavaScript | コード品質ツール | ESLint に移動します。
右側のペインで、構成ファイルのルール重要度を使用するチェックボックスをオフにし、デフォルトのものの代わりに使用する重大度を選択します。

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 コードスタイルルールの適用を選択します。
または、ファイルの上部にある "ESLint からコードスタイルを適用しますか？ " の質問にはいと答えるだけです。
適用されたルールのリストは、通知ツールウィンドウに表示されます。

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

JavaScript 標準スタイル(英語)をアプリケーションのデフォルトの JavaScript コードスタイルとして設定して、コードを入力または再フォーマットするときにそのメインルールが適用されるようにすることができます。Standard は ESLint に基づいているため、IntelliJ IDEA ESLint 統合を介して Standard を使用することもできます。

JavaScript 標準をインストールする

埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install standard --save-dev
JavaScript 標準スタイル公式サイト(英語)の詳細を参照してください。

ESLint を介して標準で lint を有効にする

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

設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動します。
表示された ESLint ページで、手動 ESLint 構成を選択し、ESLint パッケージフィールドに standard パッケージの場所を指定します。

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

設定ダイアログ（Ctrl+Alt+S）で、エディター | コードスタイル | JavaScript に移動します。
JavaScript ページで選択して設定をクリックし、次に JavaScript 標準スタイルを選択します。スタイルは現在のスキームを置き換えます。

Docker を使用した ESLint

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

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

JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Node.js リモートインタープリタープラグインをインストールして有効にします。
設定 | プラグインページのインストール済みタブで、Node.js および Docker に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
Docker トピックの説明に従って、Docker をダウンロード、インストール、構成します。
Docker で Node.js リモートインタープリターを構成するまたは Docker Compose を介して、プロジェクトのデフォルトとして設定します。また、このリモートインタープリターに関連付けられているパッケージマネージャーがプロジェクトのデフォルトとして設定されていることを確認してください。
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" } }
エディターの任意の場所を右クリックして、コンテキストメニューから実行 '<package manager> install' を選択します。
その後、ESLint は、コードをローカルで操作する場合と同じように機能します。検出された不一致の説明をエディターまたは問題ツールウィンドウで表示し、提案されたクイックフィックスを適用します。