VS Codeのエージェントモードを拡張するには、を試してください！

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拡張機能のコンテキストメニューから無効にするを選択します。

リンティングの開始です！このコマンドを使用してください：eslint -c .eslintrc.js --ext .ts <mySrcFolder>（ESLintにTypeScriptファイルを見るように指示する--ext .tsオプションに注意してください）。このコマンドをpackage.jsonファイルのscriptsセクションに以下のように記述することをお勧めします。

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

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

  • ESLint拡張機能をインストールします。
  • タスク: タスクを構成コマンドを使ってタスクを作成し、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をアンインストールします。

07/09/2025