RubyMine 2026.1 Help

ESLint

RubyMine は ESLint と統合しており、リントするための幅広いルールを提供します。これらはプラグインで拡張することも可能です。 RubyMine は、入力中に ESLint から報告された警告やエラーをエディターに表示します。 ESLint を使用すると、 JavaScript 標準スタイル(英語)を使用したり、 TypeScript コードをリントしたりすることもできます。

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

始める前に

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

ESLint をインストールする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

構成ファイル

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

使用している ESLint のバージョンにより、RubyMine は次のファイルタイプ内の構成を認識します：

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

RubyMine で ESLint を設定する

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

ESLint を自動的に構成する

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

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

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

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

    • 絶対パス。

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

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

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

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

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

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

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

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

      RubyMine は、チェック対象ファイルが保存されているフォルダーから開始し、それを親フォルダーへと辿ってプロジェクトルートに至るまで、そのようなファイルを探します。

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

    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}

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

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

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

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

コードの Lint

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

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

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

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

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

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

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

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

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

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

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

    ESLint: 問題を解決する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript Standard をインストールする

ESLint 経由で Standard によるリントを有効化します。

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

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

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

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

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

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

Docker を使用した ESLint

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

詳細は Node.js と Docker をご覧ください。

  1. JetBrains Marketplace からプラグインをインストールする方法に従い、 設定 | プラグイン ページ、 Marketplace タブで Node.js および Node.js リモートインタープリター プラグインをインストールしてください。

  2. 設定で Docker プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに 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 年 6 月 2 日
JavaScript リンターJSLint