TSLint から ESLint への移行

TSLint は過去におすすめのリンターでしたが、現在では 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 拡張機能のコンテキストメニューで [無効にする] を選択します。

いよいよ lint の実行です！このコマンド eslint -c .eslintrc.js --ext .ts <mySrcFolder> を使用してください (TypeScript ファイルを対象とするように ESLint に指示する --ext .ts オプションに注意してください)。コマンドを package.json ファイルの scripts セクションに入れることをお勧めします。以下のようにします。

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

ESLint を Visual Studio Code と統合するには、次の手順に従います。

ESLint 拡張機能をインストールします。
[タスク: タスクの構成] コマンドを使用してタスクを作成し、[npm: lint] を選択します。
結果として生成される tasks.json ファイルで、問題matcher を $eslint-stylish に構成します。

ヒント: ESLint は、実行方法において「より正確」な場合があり、以前はなかった警告が表示されることがあります。たとえば、セミコロンの欠落を指摘するなどです。--fix オプションを試して、ESLint に問題を修正させてみてください。

TSLint: 削除

おめでとうございます。これで ESLint の設定が完了し、クリーンアップの時が来ました。

TSLint の削除はプロジェクトによって異なりますが、通常、次の手順を実行します。

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

04/03/2025