💭

@angular-eslintはpackage.jsonから削除へ。ESLint v9対応のangular-eslintにマイグレーション

2024/12/12に公開

Angular

ESLint

tech

タイトルいろいろ考えたんですが、文字数制限の中では語弊ありますね。もうちょっと詳細を書くと

ESLint v8は、今年10月にEOLを迎えた
ESLint v9は、Flat Configが導入され、マイグレーションが必要
Angular ESLintチームは、ESLint v9に対応したangular-eslintをリリース
ESLint v9以降は @angular-eslint は angular-eslint の内部で使われるため、ユーザの package.json からは削除可能（※プラグイン開発等の用途を除く）

ということになります。

マイグレーション

ESLint v9 & FlatConfig環境でしたら、 @angular-eslint から angular-eslint への移行は ng add コマンドで容易に行うことができます。ただ、ESLint v9 & FlatConfig環境へのマイグレーション機構は ng コマンドでは用意されていないので、別途作業する必要があります。以下の手順でマイグレーションを行ってください。

0. Angular 19へアップデート

まだの場合は済ませてください。以下は一例です。

% ng update @angular-eslint/schematics @angular/cli  @angular/core

いつものやつです。

1. ESLint v9 & FlatConfig環境へのマイグレーション

ESLintがマイグレーション機構を用意していますので、これを使います。以下のコマンドを実行してください。

% npx @eslint/migrate-config [eslint設定ファイル（例：.eslintrc.json）]

そうすると、 eslint.config.mjs が自動生成されます。そのあと、案内されるように、必要パッケージをインストールします。

% npm install @eslint/js @eslint/eslintrc -D

そして、不要になったeslint設定ファイルを削除します。.eslintrc.json の場合でしたら、以下のコマンドを実行してください。

% rm .eslintrc.json

簡単ですね。

2. `@angular-eslint` から `angular-eslint` への移行

@angular-eslint から angular-eslint へ移行します。以下のコマンドを実行してください。

% ng add angular-eslint

終了すると、自動的に @angular-eslint/* が削除されて、 angular-eslint が追加されます。あと、 eslint がアップデートされます。終了です！！

けど、mjsでいい？

ただ、マイグレーションとしてあまりきれいなファイルじゃないんですよね。ちょっと長いですが、私の環境で新しく生成された eslint.config.mjs です（多少改行など修正しています）。

eslint.config.mjs

import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended,
    allConfig: js.configs.all
});

export default [{
    ignores: ["projects/**/*", "**/deep-model.ts"],
}, ...compat.extends(
    "plugin:@angular-eslint/recommended",
    "plugin:@angular-eslint/template/process-inline-templates",
).map(config => ({
    ...config,
    files: ["**/*.ts"],
})), {
    files: ["**/*.ts"],
    languageOptions: {
        ecmaVersion: 5,
        sourceType: "script",
        parserOptions: {
            project: ["tsconfig.json"],
            createDefaultProgram: true,
        },
    },
    rules: {
      "@angular-eslint/directive-selector": ["error", {
          type: "attribute",
          prefix: "app",
          style: "camelCase",
      }],
      "@angular-eslint/component-selector": ["error", {
          type: "element",
          prefix: "app",
          style: "kebab-case",
      },],
    },
}, ...compat.extends("plugin:@angular-eslint/template/recommended").map(config => ({
    ...config,
    files: ["**/*.html"],
})), {
    files: ["**/*.html"],
    rules: {},
}];

うーん・・・。後方互換で compat あるし、 import 使うために mjsになってしまってるし。これ、Angularで新規プロジェクトつくったらどうなるんだろうと思ってみてみました。

eslint.config.js

// @ts-check
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
    ],
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "app",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "app",
          style: "kebab-case",
        },
      ],
    },
  },
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {},
  }
);

そうそう、こういうシンプルなのがいいんですよ。拡張子も js ですし。こちらの方がいいという方は、 eslint.config.mjs を eslint.config.js に変更して、中身を変更するといいかなと思います。

まとめ

@angular-eslint から angular-eslint への移行は ng add コマンドで簡単に行うことができます。ただ、ESLint v9 & FlatConfig環境へのマイグレーションは手動で行う必要があります。また、 mjs で生成されるファイルは、あまりきれいなファイルではないので、 eslint.config.js に変更して、中身を変更するといいかもしれません。

ESLint v8は、今年10月にEOLを迎えたので、早めにマイグレーションを行いたいですよね。

それでは、また。