[Angular] TSLintからESLintに移行する

はじめに

Angular環境でTSLintからESLintへの移行について記載します。
Angularのプロジェクト作成済みの場合は、こちらから
2021年2月時点

簡単な説明

TSLintとは

TypeScriptコードの静的解析ツール
2020/12/1に開発が中止し、ESLintへの移行が推奨されている。

ESLintとは

JavaScriptコードの静的解析ツール

ライブラリのバージョン

• eslint: 7.6.0
• eslint-plugin-import: 2.22.1,
• eslint-plugin-jsdoc: 30.7.6
• eslint-plugin-prefer-arrow: 1.2.2
• @angular-eslint/builder: 1.2.0
• @angular-eslint/eslint-plugin: 1.2.0
• @angular-eslint/eslint-plugin-template: 1.2.0
• @angular-eslint/schematics: 1.2.0
• @angular-eslint/template-parser: 1.2.0
• @typescript-eslint/eslint-plugin: 4.3.0,
• @typescript-eslint/parser": 4.3.0

Angularのインストール

$npm install -g @angular/cli
$ng version
Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.0
@angular-devkit/build-angular   0.1102.0
@angular-devkit/core            11.2.0
@angular-devkit/schematics      11.2.0
@schematics/angular             11.2.0
@schematics/update              0.1102.0
rxjs                            6.6.3
typescript                      4.1.5

Angularプロジェクトの作成

# プロジェクトの作成
$ng new eslint-convert
? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
  This setting helps improve maintainability and catch bugs ahead of time.
  For more information, see https://angular.io/strict Yes
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss]

TSLintからESlintへ移行

・eslint-convertの部分は、プロジェクト名に合わせる。

# プロジェクトフォルダにて
$ ng add @angular-eslint/schematics
$ ng g @angular-eslint/schematics:convert-tslint-to-eslint eslint-convert

# TSLintの削除
$ rm tslint.json
$ npm uninstall tslint

VSCode extensionのインストール(VSCodeの場合)

• VS Code ESLint extension

VSCodeの設定

• 保存時に自動補正を行う

settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

動作確認

• 保存前

export class AppComponent {
  constructor() {
    let hoge = '';
  }
}

• 保存後 letがconstに置き換わることが確認できる。

export class AppComponent {
  constructor() {
    const hoge = '';
  }
}

参考

https://github.com/angular-eslint/angular-eslint