ESLint 9のflat configに移行する

[ha6-6ru]

概要

ESLintの新しいconfig（flat config）の実装が進んでいるので、経過を見て適用する。
https://eslint.org/blog/2022/08/new-config-system-part-1/

typescript-eslintおよび他のプラグインの状況を併せてウォッチする。
typescript-eslint/typescript-eslint#5908

完了条件

• flat configへの移行完了
• アーキテクチャCSR編の改修が完了していること
• ガイド/AP開発手順Vue.js編の改修が完了していること

[1nu1taichi]

Dresscaのeslintrc.cjsをマイグレーションすると以下のようになる

import { FlatCompat } from '@eslint/eslintrc';
import gitignore from 'eslint-config-flat-gitignore';
import js from '@eslint/js';

const compat = new FlatCompat();

export default [
  gitignore(),
  js.configs.recommended,
  ...compat.extends(
    'plugin:vue/vue3-recommended',
    '@vue/eslint-config-typescript/recommended',
    '@vue/eslint-config-prettier',
  ),
  {
    files: ['**/*.{vue,js,ts,jsx,tsx}'],
    languageOptions: {
      globals: {
        'vue/setup-compiler-macros': true,
      },
    },
    ignores: ['postcss.config.cjs', 'tailwind.config.js'],
  },
];

ただしoverridesの仕組みがなくなっており、Cypress関連ファイルのみプラグインとルールを適用する方法が判明していない。
eslintrcではoverrides-extendsと入れ子になっており、flat configでは入れ子でextendsができず、並列となってしまい、tsやvueファイルに対してもcypressプラグインがかかってしまう。

[1nu1taichi]

参考資料

ESLint 公式マイグレーションガイド
Flat Config導入完了！　新しいESLintの設定フォーマットを使ってみた
ESLint の共有設定を Flat Config に対応させる
overridesとextendsをどうするか

[KentaHizume]

Vue.js関連のOSSでも対応が始まっているようです。

eslint-plugin-vue

• feat: support flat configs vuejs/eslint-plugin-vue#2407
  create-vue
• ESLint v9 support vuejs/create-vue#488

[KentaHizume]

• feat!: support ESLint 9 flat config vuejs/eslint-config-typescript#81

[KentaHizume]

ESLint 8系は2024/10/5にEOLになる。

https://eslint.org/version-support/

[KentaHizume]

@vue/eslint-config-prettier 10系以降でflat configをサポートするようになった。
一方で、10系以降では旧形式はサポートされない。

• npm-dressca-frontend: bump @vue/eslint-config-prettier from 9.0.0 to 10.0.0 in /samples/Dressca/dressca-frontend #1853

https://github.com/vuejs/eslint-config-prettier/releases/tag/v10.0.0