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