TypeScript の lint
TypeScript コードに推奨されるリンターは ESLint(英語) で、プラグインで拡張できる幅広い lint ルールをもたらします。 IntelliJ IDEA は、入力時に ESLint によって報告された警告とエラーをエディターに表示します。 詳細については、 ESLint を参照してください。
IntelliJ IDEA は、プロジェクトの ESLint 構成で @typescript-eslint/parser がパーサーとして設定されている場合、 .ts と .tsx ファイル内で ESLint から報告されたエラーをハイライトします。 typescript-eslint リポジトリ内の readme ファイル から詳細を確認してください。
始める前に
Node.js をダウンロードしてインストールします。
プロジェクトで、 ローカル Node.js インタープリターの構成、 Linux用のWindows Subsystem (WSL)で Node.js を使用する 、または リモート Node.js ランタイムの構成 の説明に従って、Node.js ランタイムを設定してください。
設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript と TypeScript と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。
ESLint をインストールする
ESLint バージョン 9 以降
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install --save-dev eslint @eslint/js typescript typescript-eslintpnpm add --save-dev eslint @eslint/js typescript typescript-eslintyarn add --dev eslint @eslint/js typescript typescript-eslint
typescript-eslint 公式サイト(英語)の詳細を参照してください。
ESLint バージョン 8 以前
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescriptpnpm add --save-dev eslint @eslint/js typescript-eslintyarn add --dev eslint @eslint/js typescript-eslint
typescript-eslint 公式サイト(英語)の詳細を参照してください。
構成ファイル
使用している 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 を押して設定を開き、 を選択します。
手動 ESLint 構成 を選択します。
「追加 eslint オプション 」フィールドに
--flag unstable_ts_configと入力します。適用 をクリックして変更を保存し、ダイアログを閉じます。
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, );typescript-eslint 公式サイト(英語)の詳細を参照してください。
/* eslint-env node */ module.exports = { extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], root: true, };typescript-eslint 公式サイト(英語)の詳細を参照してください。
IntelliJ IDEA で ESLint を設定する
デフォルトでは、ESLint は 自動的に構成されます。 すべての構成設定を 手動で指定するか、ESLint を無効にするかを選択できます。
ESLint の詳細を参照してください。
ESLint で TypeScript コードのリントを抑制する
@typescript-eslint/parserをすでに使用しているが ESLint で TypeScript コードをチェックしたくない場合は、 .eslintignore ファイルに .ts または .tsx を追加してください。
コードの Lint
ESLint をインストールして有効にすると、TypeScript ファイルを開くたびに ESLint が自動的に起動します。 保存時に問題を自動的に検出して修正するように ESLint を構成することもできます。
デフォルトでは、IntelliJ IDEA は、ESLint 構成の重大度に基づいて検出された問題をマークします。 これらの設定を無効にする方法については、 ESLint ハイライトの設定を参照してください。
現在のファイルで検出されたエラーの説明とそれらのクイックフィックスは、エディターおよび 問題ツールウィンドウの ファイル タブから入手できます。
以前に開いたすべてのファイルのエラーとそれらのクイックフィックスは、 問題 ツールウィンドウの プロジェクトエラー タブに表示されます。 ツールウィンドウを開くには、エディターの右上隅にある インスペクション ウィジェットをクリックします。
詳細については、 エディターで問題を表示してクイックフィックスを適用するおよび 問題ツールウィンドウを参照してください。
エディターで問題の記述を表示するには、ハイライトされたコードの上にマウスを置いてください。
検出された問題を解決するには、 ESLint: 「<ルール名>」を修正 をクリックするか、 Alt+Shift+Enter を押します。
現在のファイルで検出されたすべての問題を解決するには、 More actions （Alt+Enter ）をクリックして、リストから を選択します。
または、 問題 ツールウィンドウ Alt+6 の ファイル タブを開くと、問題の説明を表示したり、クイックフィックスを適用したり、エラーが発生したソースコードのフラグメントに移動したり、ツールウィンドウを移動せずに エディタープレビュー ペインでエラーを修正したりできます。
詳細は 問題ツールウィンドウでご覧ください。
このファイルが保存されるときにファイル内のすべての問題を修正するように ESLint を構成することもできます。 このような動作を構成するには、 IntelliJ IDEA での ESLint のアクティブ化と構成の説明に従って、 設定 ダイアログの ESLint ページで 保存時に eslint --fix を実行 チェックボックスを選択します。
エディターで問題を表示してクイックフィックスを適用するおよび ESLint から詳細を学びます。
TSLint
IntelliJ IDEA 内から TSLint(英語) コード検証ツールを使用して、アプリケーションを実行せずに TypeScript コードによくある間違いがないかチェックすることもできます。 このツールがアクティブになると、開いているすべての TypeScript ファイルがリントされ、検出された問題がマークされます。
問題の説明を表示するには、ハイライトされたコードにカーソルを合わせます。 デフォルトでは、IntelliJ IDEA は、TSLint 構成ファイルの重大度レベルに基づいて検出された問題をマークします。 これらの設定を上書きする方法については、 TSLint ハイライトの設定を参照してください。
始める前に
Node.js をダウンロードしてインストールします。
プロジェクトでローカルの Node.js ランタイムが構成されていることを確認してください。 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動します。 Node runtime フィールドには、デフォルトのプロジェクト Node.js ランタイムが表示されます。 Node.js インタープリターの設定の詳細を参照してください。
設定 | プラグイン ページの インストール済み タブで、 JavaScript and TypeScript および TSLint に必要なプラグインが有効になっていることを確認します。 詳細は、 プラグインの管理を参照してください。
TSLint をインストールする
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install tslint typescript --save-devTSLint 公式サイト(英語)の詳細を参照してください。
TSLint 設定ファイルを作成する
組み込み ターミナル (Alt+F12) で次のように入力します。
cd <project root> tslint --init
IntelliJ IDEA で TSLint を有効化して設定する
デフォルトでは、IntelliJ IDEA はプロジェクトの node_modules フォルダーの TSLint パッケージと、現在のファイルが保存されているフォルダーの tslint.json 構成ファイルを使用します。 現在のファイルフォルダーに tslint.json 構成ファイルが見つからない場合、IntelliJ IDEA はプロジェクトルートまでの親フォルダーで構成ファイルを検索します。
TSLint が依存関係としてリストされている複数の package.json ファイルがある場合、IntelliJ IDEA は package.json ごとに別々のプロセスを開始し、その下にあるすべてのものを処理します。 これにより、モノレポまたは複数の TSLint 構成を持つプロジェクトの各パスに、特定の TSLint バージョンまたは特定のプラグインセットを適用できます。
この動作はすべての新しい IntelliJ IDEA プロジェクトでデフォルトです。 以前に作成したプロジェクトで有効にするには、 設定 ダイアログ（Ctrl+Alt+S ）で に移動し、 自動 TSLint 構成 オプションを選択します。
カスタム TSLint パッケージと tslint.json を使用して追加の規則を指定するように TSLint を手動で構成することもできます。
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。
手動構成 オプションを選択してください。
TSLint パッケージへのパスを指定します。
構成ファイル 領域で、使用する構成を指定します。
デフォルトでは、IntelliJ IDEA は最初に tslint.json 、 tslint.yaml 、 tslint.yml 構成ファイルを検索します。 IntelliJ IDEA は、チェックするファイルが保存されているフォルダーから検索を開始し、親フォルダーを検索し、プロジェクトルートに到達するまで続けます。 tslint.json 、 tslint.yaml 、 tslint.yml 構成ファイルが見つからない場合、TSLint はデフォルトの組み込み構成ファイルを使用します。 tslint.json 、 tslint.yaml 、または tslint.yml 構成ファイル、カスタム構成ファイルのいずれかに適用する構成を定義するか、デフォルトの組み込み構成に依存する必要があります。
IntelliJ IDEA に tslint.json 、 tslint.yaml 、 tslint.yml ファイルを検索させるには、 自動検索 オプションを選択します。
カスタムファイルを使用するには、 構成ファイル オプションを選択し、 パス フィールドにファイルの場所を指定します。 リストからパスを選択するか、手動で入力するか、
をクリックして表示されるダイアログから関連ファイルを選択します。
TSLint 公式サイト(英語)から TSLint を構成する方法の詳細を参照してください。
必要に応じて、 追加ルールディレクトリ フィールドで、追加のコード検証規則を使用してファイルの場所を指定します。 これらの規則は、 tslint.json 、 tslint.yaml 、 tslint.yml からの規則の後、または上記で指定したカスタム構成ファイルからの規則の後に適用されるため、上書きします。
TSLint のハイライトを設定する
デフォルトでは、IntelliJ IDEA は、TSLint 構成ファイルの重大度レベルに基づいて、検出されたエラーと警告をマークします。 例: エラーは赤い波線でハイライトされ、警告は黄色の背景でマークされます。 詳細については、 コードインスペクション および インスペクションの重大度を変更する を参照してください。
TSLint 構成のルールの重大度レベルを変更する
TSLint 構成ファイルで、編集するルールを見つけ、その ID を
警告またはエラーに設定します。 TSLint 公式サイト(英語)の詳細を参照してください。
TSLint 構成ファイルから重大度をオーバーライドして、IntelliJ IDEA が無視し、リンターによって報告されたすべてのものをエラー、警告、カスタムカラーで表示することができます。
構成から重大度レベルを無視する
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。 インスペクションページが開きます。
中央ペインで、 JavaScript and TypeScript | コード品質ツール | TSLint に移動します。
右側のペインで、 構成ファイルのルール重要度を使用する チェックボックスをオフにし、デフォルトの代わりに使用する重大度レベルを選択します。
TSLint 設定ファイルからコードスタイルをインポートする
IntelliJ IDEA は、 tslint.json 、 tslint .yaml 、または tslint.yml 構成ファイルに記述されているいくつかの TSLint 規則を理解し、プロジェクト内の TypeScript コードスタイルの設定に適用できるようにします。
プロジェクトを初めて開くと、IntelliJ IDEA はプロジェクト tslint.json 、 tslint.yaml 、 tslint.yml からコードスタイルを自動的にインポートします。
tslint.json 、 tslint.yaml 、 tslint.yml が（手動でまたはバージョン管理から）更新された場合は、エディターで開き、コンテキストメニューから TSLint コードスタイルルールを適用する を選択します。
TSLint のクイックフィックス
IntelliJ IDEA を使用すると、TSLint が報告する問題の一部を自動的に修正できます。
特定のエラーを修正するには、ハイライトされたコードにキャレットを置き、 Alt+Enter を押して、リストから TSLint: '<現在の error>' を修正 を選択します。
ファイルで検出されたすべての問題を修正するには、 TSLint: 現在のファイルを修正 を選択します。
現在のファイルおよび現在の行の TSLint 規則を抑制することができます。 IntelliJ IDEA は、 /* tslint:disable:<rule name> または // tslint:disable-next-line:<rule name> の形式でコメントを無効にして、ファイルの上または現在の行の上にそれぞれ配置します。
その場で TSLint ルールを抑制する
TSLint によって報告されたエラーまたは警告にキャレットを置き、 Alt+Enter を押します。
無効にするルールのクイックフィックスを選択し、 Right を押します。
リストから、 現在のファイルに対して <ルール名> を表示しない または 現在の行に <ルール名> を表示しない を選択します。