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