環境

Angular v18
ESLint v9
Prettier v3
Node v22

新規のAngularプロジェクトを作成

npx -p @angular/cli ng new

ESLintをインストール＋セットアップ

Lintを実行すると、スキーマティクスを経由してESLintがセットアップできます。

npm run ng lint

LintのビルダーがESLintに変更され、設定ファイルが作成されます。

git status

Changes not staged for commit:
    modified:   angular.json
    modified:   package-lock.json
    modified:   package.json

Untracked files:
    eslint.config.js

これだけでLintのコマンドが通るようになります。
毎回思うことですが本当に便利です。

npm run ng lint

> Linting "demo-eslint"...
> All files pass linting.

Prettierをインストール

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

ESLint v8+でフォーマットに関するルールはDeprecatedになったようですが、とりあえず安全のために eslint-config-prettier（ルールが被った時にPrettierを優先するプラグイン） を入れておきます。

Deprecation of formatting rules | ESLint

設定ファイルを書き換え

ESLintの設定ファイルを以下のように書き換えます。

eslint.config.js

// @ts-check
import eslint from "@eslint/js";
import angular from "angular-eslint";
import eslintConfigPrettier from "eslint-config-prettier";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import tseslint from "typescript-eslint";

export default tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...angular.configs.tsRecommended,
      eslintPluginPrettierRecommended,
      eslintConfigPrettier,
    ],
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "app",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "app",
          style: "kebab-case",
        },
      ],
      "prettier/prettier": [
        "error",
        {
          semi: true,
          indent: 2,
          singleQuote: false,
          trailingComma: "es5",
        },
      ],
    },
  },
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {},
  },
);

eslint.config.js でimportを使っているので、package.json ではESMを指定しておきます。

package.json

{
  "name": "demo-eslint",
+  "type": "module",

ESLint v9からFlat Configというものがデファクトになったようですね。

以前のバージョンとだいぶ書き方が変わっていたので「あれ？プラグインはテキストで指定するんじゃなかったっけ？」「ん？module.exportsが怒られている？」とハマってしまいました。

Migration to Flat Config | ESLint

エディタ用の設定を追加

VSCodeの例です。

コマンドパレットで Preferences: Open Workspace settings(JSON) を呼び出し、以下のように設定します。

{
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
}

この設定はワークスペース上、つまりプロジェクト配下で有効です。

VSCodeのエクステンション「Prettier」と「ESLint」が互いに同じファイルをフォーマットしないよう、このプロジェクトではESLintを優先させます。

Lintを実行

npm run lint

/src/app/app.config.ts
  1:63  error  Replace `'@angular/core'` with `"@angular/core"` prettier/prettier
  2:31  error  Replace `'@angular/router'` with `"@angular/router"` prettier/prettier
  4:24  error  Replace `'./app.routes'` with `"./app.routes"` prettier/prettier
  
/src/app/app.routes.ts
  1:24  error  Replace `'@angular/router'` with `"@angular/router"` prettier/prettier
...

たくさんエラーが出てきますね。
prettierのルールでフォーマットしておきましょう。

npm run lint -- --fix

以上で完了です！