TSLint から ESLint への移行

TSLintはこれまで推奨されてきたリンターですが、現在は非推奨となり、ESLintがその役割を引き継いでいます。この記事では、TSLintからESLintへの移行手順を説明します。

ESLint: インストール

まずESLintをインストールする必要があります。ESLintはネイティブでTypeScriptをサポートしていないため、eslint-typescript-supportもインストールする必要があります。

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

または、パッケージマネージャーにyarnを使用している場合

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

上記のコマンドにより、ESLintが追加され、ESLintでTypeScriptを理解するためのパーサーが追加され、さらにTypeScript特有のルールがいくつか追加されます。

次に、実際の移行を簡素化するために、tslint-to-eslint-configユーティリティを実行します。このツールは、既存のTSLint構成を読み取り、それに基づいた「最も近い」ESLint構成を作成します。

npx tslint-to-eslint-config

このコマンドは、移行を実行するためにユーティリティをダウンロードして実行します。その他のオプションについては、ユーティリティの使用ガイドを確認してください。

これで、新しい .eslintrc.js ファイル、ログファイル (tslint-to-eslint-config.log) が作成され、.vscode/settings.json などの他のファイルも変更されているはずです。変更点、特に既存ファイルへの変更を慎重に確認し、ログファイルにも目を通してください。

ESLint: 設定

通常は .eslintrc.js ファイルだけで開始できますが、parserOptions.project プロパティが tsconfig.json ファイルに設定されたままになっている可能性が高いです。これは、ESLintルールがセマンティック情報（例：この変数は文字列か、数値の配列か？）を使用できることを意味します。この設定により強力なルールが有効になりますが、ESLintの計算時間が大幅に長くなります。拡張機能のデフォルトルールではセマンティック情報は必要ないため、それを使用するルールを追加していない限り、parserOptions.project プロパティを削除することを推奨します。

ESLint: 実行

これでESLintを実行する準備が整いました。その前に、TSLintを無効化することを推奨します。これを行うには、拡張機能ビューを開き、TSLint拡張機能のコンテキストメニューから無効にする (Disable) を選択します。

さあ、リンターを実行しましょう！以下のコマンドを使用します： eslint -c .eslintrc.js --ext .ts <mySrcFolder>（ESLintにTypeScriptファイルを探すよう指示する --ext .ts オプションに注意してください）。このコマンドを package.json ファイルの scripts セクションに入れることを推奨します。以下のように記述します。

"lint": "eslint -c .eslintrc.js --ext .ts <mySrcFolder>"

Visual Studio CodeにESLintを統合するには、以下の手順を実行します。

ESLint拡張機能をインストールします。
タスク: タスクの構成 (Tasks: Configure Task) コマンドを使用してタスクを作成し、npm: lint を選択します。
作成された tasks.json ファイルで、問題マッチャーを $eslint-stylish に設定します。

ヒント: ESLintは動作がより「厳密」であるため、以前にはなかった警告（例：セミコロンの欠落の指摘など）が表示されることがあります。--fix オプションを試して、ESLintに自動修正させてみてください。

TSLint: 削除

おめでとうございます。これでESLintの設定が機能しているはずです。最後に不要なファイルをクリーンアップしましょう。

TSLintの削除手順はプロジェクトによって異なりますが、通常は以下の手順で行います。

.vscode/extensions.json を更新し、TSLintではなくESLint拡張機能を推奨するように変更します。
```
"recommendations": [
  "dbaeumer.vscode-eslint"
]
```
tslint.json ファイルを削除します。
package.json ファイルから tslint への依存関係を削除します。
npm uninstall tslint を実行してTSLintをアンインストールします。

4/8/2026