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> (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 は、物事のやり方において「より正確」である場合があり、以前はなかった警告、たとえばセミコロンの欠落などを表示することがあります。ESLint にクリーンアップさせるには --fix オプションを試してください。
TSLint: 削除
おめでとうございます。ESLint のセットアップが機能するようになり、クリーンアップする時が来ました。
TSLint の削除はプロジェクトによって異なりますが、通常は次の手順です。
-
.vscode/extensions.jsonを更新し、TSLint ではなく ESLint 拡張機能を推奨するようにします。"recommendations": [ "dbaeumer.vscode-eslint" ] -
tslint.jsonファイルを削除します。 -
package.jsonファイルのtslintへの依存関係を削除します。 -
npm uninstall tslintで TSLint をアンインストールします。