🔖

Angular に ESLINT の設定を入れる

2022/04/22に公開

Angular Eslint

Angular で LINT を実行する場合は ng lint を実行します。

ng lint はインストールされている lint のパッケージに基づいた lint チェックを実行しますが、初回実行時などまだパッケージがインストールされていない場合は、プロンプトを通じて @angular-eslint/schematics のインストールが促されるようです。

Angular & Prettier

フォーマッタとしてr Prettier を導入したい場合、
angular-eslint では eslint-plugin-prettier の利用が推奨されています。

まずは、必要なモジュールをインストールします。

$ npm i -D @typescript-eslint/eslint-plugin eslint-plugin-prettier prettier prettier-eslint eslint-config-prettier

.eslintrc.jsonにおいて、以下２店の修正を加えます。

"files": ["*.ts"] の extends に prettier を追加
"files": ["*.html"] のブロックを新しく追加して prettier の設定を記述

{
  ...,
  "overrides": [
    {
      "files": ["*.ts"],
      ...
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended" // 追加
      ],
      ...
    },
    // 既存の .html ブロックは触らない
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    },
    // prettier ように新しく追加
    {
      "files": ["*.html"],
      "excludedFiles": ["*inline-template-*.component.html"],
      "extends": ["plugin:prettier/recommended"],
      "rules": {
        "prettier/prettier": ["error", { "parser": "angular" }]
      }
    }
  ]
}

最後に .prettierrc.json を作成して、設定を完了します。

{
  "printWidth": 80,
  "useTabs": false,
  "singleQuote": true
}

angular-eslint の prettier 対応に関する情報は、 GitHub の README からも確認可能です。

Angular に ESLINT の設定を入れる

Angular Eslint

Angular & Prettier

参考

Discussion