ESLint
PyCharm は ESLint と連携しており、幅広いリントルールを提供し、プラグインで拡張できます。 PyCharm は、入力中にエディターで ESLint によって報告された警告とエラーを表示します。 ESLint を使用すると、 JavaScript 標準スタイル(英語)を使用したり、 TypeScript コードをリントしたりすることもできます。
JavaScript と TypeScript 以外にも、ESLint はプロジェクト全体や特定の部分で他の型のファイルにも適用できます。詳しくは リントスコープの設定 を参照してください。
始める前
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
ESLint をインストールする
埋め込まれた ターミナル （Alt+F12 ）で、次のいずれかのコマンドを入力します。
npm init @eslint/config@latestは現在のプロジェクトに ESLint をインストールし、構成ファイルを生成します。ウィザードの質問に答えます。 その結果、PyCharm は最新バージョンの ESLint をインストールし、 eslint.config.js 構成ファイルを生成します。
開発依存関係として ESLint をインストールするための
npm install --save-dev eslintグローバルインストール用の
npm install --g eslint
pnpm create @eslint/config@latestは現在のプロジェクトに ESLint をインストールし、構成ファイルを生成します。ウィザードの質問に答えます。 その結果、PyCharm は最新バージョンの ESLint をインストールし、 eslint.config.js 構成ファイルを生成します。
開発依存関係として ESLint をインストールするための
pnpm add -D eslintグローバルインストール用の
pnpm add -g eslint
yarn create @eslint/configは現在のプロジェクトに ESLint をインストールし、構成ファイルを生成します。ウィザードの質問に答えます。 その結果、PyCharm は最新バージョンの ESLint をインストールし、 eslint.config.js 構成ファイルを生成します。
開発依存関係として ESLint をインストールするための
yarn add -D eslintグローバルインストール用の
yarn add eslint
必要に応じて、追加のプラグイン（たとえば、 eslint-plugin-react(英語) を lint React アプリケーションにインストール）をインストールします。
ESLint 公式 Web サイト(英語)の詳細を参照してください。
構成ファイル
サポートされている設定ファイルの形式
使用している ESLint のバージョンに応じて、PyCharm は次のファイルタイプで構成を認識します：
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 を押して設定を開き、 を選択します。
手動 ESLint 構成 を選択します。
追加 eslint オプション フィールドに
--flag unstable_ts_configと入力します。適用 をクリックして変更を保存し、ダイアログを閉じます。
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 サイト(英語)の詳細を参照してください。
PyCharm で ESLint を設定する
デフォルトでは、ESLint は 自動的に構成されます。 すべての構成設定を 手動で指定するか、ESLint を無効にするかを選択できます。
ESLint を自動的に構成する
自動構成では、PyCharm はプロジェクトの node_modules フォルダーの ESLint パッケージと、現在ファイルが保存されているフォルダーの 構成ファイルを使用します。 現在のファイルフォルダーに 構成ファイルが見つからない場合、PyCharm はプロジェクトルートまでの親フォルダーで構成ファイルを検索します。
ESLint が依存関係としてリストされている複数の package.json ファイルがある場合、PyCharm は package.json ごとに別々のプロセスを開始し、その下にあるすべてのものを処理します。 これにより、モノレポまたは複数の ESLint 構成を持つプロジェクトの各パスに、特定の ESLint バージョンまたは特定のプラグインセットを適用できます。
現在のプロジェクトで ESLint を自動的に構成するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、 自動 ESLint 構成 オプションを選択します。
すべての新しいプロジェクトで ESLint を自動的に構成するには、 新規プロジェクトの設定 ダイアログ（ ）を開き、 に移動して、 自動 ESLint 構成 オプションを選択します。
ESLint を手動で構成する
手動構成では、カスタム ESLint パッケージや構成ファイル、作業ディレクトリの利用に加え、さまざまな追加ルールやオプションも適用できます。
設定 ダイアログ（Ctrl+Alt+S ）で、 に移動し、 手動 ESLint 構成 を選択します。
ESLint パッケージ フィールドで、 eslint または 標準パッケージの場所を指定します。
作業ディレクトリ フィールドで、ESLint プロセスの作業ディレクトリを指定します。
デフォルトでは、このフィールドは空で、PyCharm は作業ディレクトリを自動的に検出します。 まず、 設定ファイルを含む lint ファイルに最も近いディレクトリを探します。
自動検出された作業ディレクトリがプロジェクト構成と一致しない場合は、作業ディレクトリ（ディレクトリ）を手動で指定する必要があります。 区切り文字としてセミコロンを使用します。 許容値は次のとおりです。
絶対パス。
プロジェクトのベースディレクトリ（PyCharm 固有のプロジェクトメタデータが格納されている .idea フォルダーの親フォルダー）からの相対パス。 例：
./: プロジェクトのベースディレクトリを ESLint プロセスの作業ディレクトリとして使用します。client;server: <project_base_dir>/client および <project_base_dir>/server を作業ディレクトリとして使用します。 サーバー フォルダーでもなく client でもないファイルの場合、作業ディレクトリは 上記のように自動検出になります。packages/*: <project_base_dir>/packages ディレクトリの各サブフォルダーは、対応する lint ファイルの作業ディレクトリとして使用されます。
一部のリント対象ファイルがプロジェクトベースディレクトリ配下にない場合、コンテンツルートからの相対パスも利用できます。
作業ディレクトリへの相対パスを定義する Glob パターン(英語)。 例:
**/foo -*を使用すると、名前がfoo-で始まる各ディレクトリが、対応する lint ファイルの作業ディレクトリとして使用されます。
使用する構成を選択してください。
自動検索: サポートされている形式の 構成ファイルで ESLint ルールが構成されている場合は、このオプションを選択します。
PyCharm は、チェック対象ファイルが格納されているフォルダーから順に親フォルダーを検索し、プロジェクトルートに到達するまで該当ファイルを探します。
構成ファイル - このオプションを選択してカスタムファイルを使用し、 パス フィールドでファイルの場所を指定します。
ESLint 公式 Web サイト(英語)から ESLint を設定する方法の詳細を参照してください。
オプション：
追加 eslint オプション フィールドに、ESLint を実行するための追加のコマンドラインオプションをスペース区切りで指定します。 たとえば、 TypeScript で記述された構成ファイル を使う場合、
--flag unstable_ts_configと入力します。ESLint 公式 Web サイト(英語)の ESLint CLI オプションの詳細を参照してください。
追加ルールディレクトリ フィールドで、追加のコード検証ルールを含むファイルの場所を指定します。 これらのルールは、デフォルトの構成ファイルまたはカスタム構成ファイルのルールの後に適用され、それに応じてそれらのルールを上書きします。
ESLint 構成ファイル(英語)と ルールの追加(英語)の詳細については、ESLint の公式 Web サイトを参照してください。
lint スコープを構成する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、 自動 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}その結果、ファイル linting.coffee はリントされますが、 no_linting .coffee はリントされません。
保存時に問題を自動的に修正
ESLint は、変更が手動で Ctrl+S を使用して保存されるたび、または実行/デバッグ構成を起動したり、PyCharm を閉じたり、バージョン管理アクションを実行したりして自動的に保存されるたびに、検出された問題を修正できます。詳細については、 自動保存を参照してください。
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、 保存時に eslint --fix を実行 チェックボックスを選択します。
コードの Lint
ESLint をインストールして有効にすると、JavaScript ファイルを開くたびに ESLint が自動的に起動します。 保存時に問題を自動的に検出して修正するように ESLint を構成することもできます。
デフォルトでは、PyCharm は ESLint 構成の重要度レベルに基づいて検出された問題をマークします。 これらの設定を無効にする方法については、 ESLint ハイライトの設定を参照してください。
現在のファイルで検出されたエラーの説明とそれらのクイックフィックスは、エディターおよび 問題ツールウィンドウの ファイル タブから入手できます。
以前に開いたすべてのファイルのエラーとそれらのクイックフィックスは、 問題 ツールウィンドウの プロジェクトエラー タブに表示されます。 ツールウィンドウを開くには、エディターの右上隅にある インスペクション ウィジェットをクリックします。
詳細は エディターで問題を表示・クイックフィックスを適用 および 問題ツールウィンドウ をご参照ください。
エディターで問題を表示してクイックフィックスを適用する
問題の説明を表示するには、ハイライトされたコードにカーソルを合わせます。
検出された問題を解決するには、 ESLint: 「<rule name>」を修正 をクリックするか、 Alt+Shift+Enter を押します。
現在のファイルで検出されたすべての問題を解決するには、 その他のアクション （Alt+Enter ）をクリックして、リストから を選択します。
詳細は、 エディターで問題を表示してクイックフィックスを適用するを参照してください。
このファイルが保存されるときにファイル内のすべての問題を修正するように ESLint を構成することもできます。 このような動作を構成するには、 PyCharm での ESLint のアクティベートと構成の説明に従い、 設定 ダイアログの ESLint ページで 保存時に eslint --fix を実行 チェックボックスを選択します。
問題ツールウィンドウでコードをリントする
問題 ツールウィンドウを開くには、エディターの右上隅にある インスペクション ウィジェットをクリックします。
または、メインメニューから を選択するか、 Alt+6 を押します。
ファイル タブで問題の説明を表示し、クイックフィックスを適用したり、エラーが発生したソースコード断片に移動したり、ツールウィンドウ内にある エディタープレビュー ペインで修正できます。 問題ツールウィンドウから詳細を参照してください。
プロジェクトエラー タブでは、現在のセッション中に開かれたすべてのファイルのエラーが表示され、エラーメッセージが検出されたファイルごとにグループ化されます。
ここでは、問題の説明を表示したり、クイックフィックスを適用したり、エラーが発生したソースコードのフラグメントに移動したり、ツールウィンドウを移動せずに エディタープレビュー ペインでフラグメントを修正したりできます。 Problems tool windowから詳細を参照してください。
ESLint のハイライトを構成する
デフォルトでは、PyCharm は ESLint 構成の重要度レベルに基づいて、検出されたエラーと警告をマークします。 例: エラーは赤い波線でハイライトされ、警告は黄色の背景でマークされます。 詳細については、 コードインスペクション および インスペクションの重大度を変更する を参照してください。
ESLint 構成のルールの重大度レベルを変更する
設定ファイルで、編集するルールを見つけて、その値を
1warnまたは2errorに設定します。ESLint 公式 Web サイト(英語)の詳細を参照してください。
構成から重大度レベルを無視する
ESLint の構成による重大度をオーバーライドして、PyCharm がそれらを無視し、リンターから報告されたすべての項目をエラーや警告、またはカスタムカラーとして表示できます。
構成から重大度レベルを無視する
設定 ダイアログ（Ctrl+Alt+S ）で、 を選択します。 インスペクションページが開きます。
中央ペインで、 JavaScript | コード品質ツール | ESLint に移動します。
右側のペインで、 構成ファイルのルール重要度を使用する チェックボックスをオフにし、デフォルトのものの代わりに使用する重大度を選択します。
ESLint からコードスタイルをインポート
ESLint コードスタイルルールの一部を PyCharm の JavaScript コードスタイル設定にインポートできます。 これにより、自動補完、生成、リファクタリング、またはインポートステートメントの追加時に、PyCharm はプロジェクトにより正確なコードスタイルオプションを使用できるようになります。 再フォーマット アクションを使用すると、PyCharm は ESLint の観点から適切にフォーマットされたコードを壊さなくなります。
PyCharm はすべての公式形式の 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 サイト(英語)の詳細を参照してください。
最初にプロジェクトを開くと、PyCharm はプロジェクト ESLint 構成からコードスタイルを自動的にインポートします。
ESLint の設定が（手動またはバージョン管理から）更新されている場合は、それをエディターで開き、コンテキストメニューから ESLint コードスタイルルールの適用 を選択します。
または、ファイルの上部にある "ESLint からコードスタイルを適用しますか？" の質問に はい と答えるだけです。
適用されたルールのリストは、 通知 ツールウィンドウに表示されます。
JavaScript 標準スタイルを使用する
JavaScript 標準スタイル をアプリケーションのデフォルト JavaScript コードスタイルに設定し、コード入力や再フォーマット時に主要なルールを適用できます。 Standard は ESLint ベースなので、PyCharm の ESLint 連携を通じて Standard も使用できます。
JavaScript Standard をインストール
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install standard --save-devJavaScript 標準スタイル公式サイト(英語)の詳細を参照してください。
Standard で ESLint を通してリントすることを有効にする
プロジェクトの package.json ファイルに standard が記載されているプロジェクトを開くと、PyCharm は自動的に Standard でのリントを有効にします。
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。
表示された ESLint ページで、 手動 ESLint 構成 を選択し、 ESLint パッケージ フィールドに
standardパッケージの場所を指定します。
JavaScript 標準スタイルをデフォルトに設定
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。
JavaScript ページで 選択して設定 をクリックし、次に JavaScript 標準スタイル を選択します。 スタイルは現在のスキームを置き換えます。
Docker を使用した ESLint
PyCharm なら Docker コンテナー内のコードにも、ローカルと同様に ESLint を実行できます。
詳細は Node.js と Docker をご覧ください。
Node.js および Node.js リモートインタープリター の各プラグインを、 設定 | プラグイン ページ・ マーケットプレース タブで、 JetBrains マーケットプレイスからプラグインをインストール の説明どおりに導入してください。
設定で Docker プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに Docker と入力します。 プラグインの詳細については、 Managing plugins を参照してください。
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 は、コードをローカルで操作する場合と同じように機能します。 検出された不一致の説明をエディターまたは 問題 ツールウィンドウで表示し、提案されたクイックフィックスを適用します。
