【Angular】 TSLint から ESLint への移行

概要

Angular を v6 の頃から利用しており、ずっと TSLint を利用していた。

しかし、TSLint が deprecated になってしまったので、ESLint に移行した。

 やったこと

angular-eslint による移行

以下の記事を読む。

• Angular: ESLintサポートの現状 2020 Autumn | lacolaco/tech

上記で紹介されていた angular-eslint に従う。

• angular-eslint/angular-eslint: Monorepo for all the tooling related to using ESLint with Angular

まずは README 通りにコマンドの実行。

$ ng add @angular-eslint/schematics
$ ng g @angular-eslint/schematics:convert-tslint-to-eslint

これによって、tslint.json を元に .eslintrc.json が作成されたり、angular.json が書き換えられたり、必要なパッケージがインストールされる。

パッケージ 追加削除と別途インスール

消してくれなかったパッケージと、要らないのにインストールされたパッケージの削除。

$ npm uninstall tslint-plugin-prettier tslint-config-prettier typescript-tslint-plugin
$ npm uninstall eslint-plugin-react

必要そうなパッケージを別途インストール。

$ npm i --save-dev eslint-config-prettier eslint-plugin-prettier

ESLint エラー対応

ここで Lint を起動したところ、1300件超のエラーが。

TSLint と同じ状態を再現するべく、いくつかのルールをオフ。

rules: {
+ "@typescript-eslint/member-ordering": "off",
+ "@typescript-eslint/naming-convention": "off"
+ "@typescript-eslint/no-empty-function": "off",
}

せっかくなので、 @typescript-eslint/no-inferrable-types などにはコード変更をして対応。

angular-eslint の compat ではなく recommended を利用

自動生成された現状維持のための compatルールセットを削除し、せっかくなので recommended にしてしまう。

extends: [
- "plugin:@angular-eslint/ng-cli-compat",
- "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+ "plugin:@angular-eslint/recommended",
]

これによって、 compat が必要としていたプラグインをさらに削除可能に。

$ npm uninstall eslint-plugin-prefer-arrow eslint-plugin-jsdoc

Prettier for HTML 設定

ESLint 経由で HTML ファイルに prettier を効かせるために、 .eslintrc.json を拡張。

• angular-eslint/angular-eslint: Monorepo for all the tooling related to using ESLint with Angular

{
"files": ["*.html"],
"extends": ["plugin:@angular-eslint/template/recommended"],
"rules": {}
},
{
"files": ["src/app/**/*.html"],
"extends": ["plugin:prettier/recommended"],
"rules": {
"prettier/prettier": ["error", { "parser": "angular" }]
}
}

あとは、 lintstagerc.json や vscode/settings.json を修正し、ESLint が使われるようにした。

やったことは以上。