Angular10にESLintとPrettierを追加する #Angular #Angular10

2020/07/07現在の最新バージョン、Angular10ではTSLintが適用されています。
ですが、TSLintのロードマップにもある通り、既にTSLintは非推奨になっていて2020年12月1日に完全廃止することが宣言されています。
よってTSLintからESLintへの移行が推奨されています。

ここでは、Angular10のプロジェクトにESLintとPrettierを追加する手順を紹介します。

環境

• Angular: 10.0.2
• Angular CLI: 10.0.1
• eslint: 6.8.0
• prettier: 2.0.5

ESLint

TSLintの削除

まずはデフォルトでインストールされているTSLintを削除します。

$ rm tslint.json
$ npm uninstall tslint

angular-eslint関連パッケージのインストール

以下のコマンドで関連するパッケージが一括でインストールされます。

$ ng add @angular-eslint/schematics

ESLintの設定ファイルを追加

$ touch .eslintrc.js

.eslintrc.js

module.exports = {
    extends: ['plugin:@angular-eslint/recommended'],
    rules: {
      '@angular-eslint/directive-selector': [
        'error',
        { type: 'attribute', prefix: 'app', style: 'camelCase' },
      ],
      '@angular-eslint/component-selector': [
        'error',
        { type: 'element', prefix: 'app', style: 'kebab-case' }
      ]
    },
    overrides: [
      {
        files: ['*.ts'],
        parser: '@typescript-eslint/parser',
        parserOptions: {
          ecmaVersion: 2020,
          sourceType: 'module',
          project: ['*/tsconfig.json', './tsconfig.**.json'] // 追加
        },
        plugins: ['@angular-eslint/template'],
        processor: '@angular-eslint/template/extract-inline-html'
      },
    ],
};

上記は@angular-eslintのサンプルです。

ただ、サンプルではAngular9のプロジェクトとなっているので、Angular10に合わせて少し修正します。
Angular10では、tsconfig.jsonが下記のように分割されています。

• tsconfig.json
• tsconfig.base.json
• tsconfig.app.json
• tsconfig.spec.json
• e2e/tsconfig.json

これを全て反映させるためにparserOptions.projectに以下を追加します。

['*/tsconfig.json', './tsconfig.**.json']

ちなみにESLintの設定ファイルはJSON|YAML|JSで記述できます。

ng lintの設定変更

angular.jsonのLintの項目を修正します。

angular.json

"lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "eslintConfig": ".eslintrc.js", // 追加
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }

確認

ESLintが正しく適用できているか確認します。

$ ng lint

Linting "sample-app"...

/Users/oka.haruna/playground/sample-app/src/app/app.component.html
   12:1  error  This line has a length of 159. Maximum allowed is 140   max-len
   // 中略
  519:1  error  This line has a length of 1046. Maximum allowed is 140  max-len

✖ 41 problems (41 errors, 0 warnings)


/Users/oka.haruna/playground/sample-app/src/app/app.component.spec.ts
  23:6  error  Strings must use singlequote  quotes

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Lint errors found in the listed files.

初期構成のままだと app.component.spec.ts と app.component.html でエラーが出ました。

とりあえずエラーを消すため、fixオプションを実行します。

$ ng lint --fix

app.component.htmlの方は自動修正されないのでサンプルコード部分は一旦削除します。(routerを有効にしてる場合はその部分だけ残す)

app.component.html

<router-outlet></router-outlet>

$ ng lint

Linting "sample-app"...
All files pass linting.

これでLint自体の追加は完了です。 ルールはカスタマイズしてください。

Prettier

Prettierのインストール

$ npm i -D prettier \
    eslint-config-prettier \
    eslint-plugin-prettier

Prettierの設定ファイルを追加

Prettierの設定ファイルもJSON|YAML|JS|TOML、もしくはpackage.jsonに内包する形で記述できます。
ここでは記述量が比較して少ないYAMLにします。

$ touch .prettierrc.yml

以下はデフォルトのルールになります。

.prettierrc.yml

trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true

こちらのドキュメントに従ってルールを変更してください。

VSCodeの設定（オプション）

VSCodeの拡張機能を追加することで、ファイル保存時に自動でフォーマットすることができます。

Prettierの拡張機能を追加して、.vscode/settings.jsonに以下を追加してください。

.vscode/settings.json

"editor.formatOnSave": true

参考

Angular ESLint