ESLintを最新にしてFlat Configにする

[MT224244]

内容

現在最新のeslint@v9ではデフォルトがFlat Configになり、v10では旧コンフィグが廃止される予定のようです。
https://eslint.org/blog/2023/10/flat-config-rollout-plans/

Pros 良くなる点

ESLint Config Inspectorというツールが使えるようになり、適用されている設定の確認が非常に簡単になります。

Cons 悪くなる点

特になし？

実現方法

1. eslint周りの依存関係を最新にする
2. .eslintrc.js を削除し、 eslint.config.mjs を作る

試しにできる限り対応してみたブランチがこちら。
@vue/eslint-config-typescript を強制インストールしているので、 npm i --force する必要があります。
eslint-plugin-storybook は無効化してあります。
後述している3件+2件で合計5件のエラーが残っている状態です。

npm run lint

path\to\voicevox\src\backend\browser\fileImpl.ts
24:7  error  Expected the Promise rejection reason to be an Error  @typescript-eslint/prefer-promise-reject-errors
40:9  error  Expected the Promise rejection reason to be an Error  @typescript-eslint/prefer-promise-reject-errors

path\to\voicevox\src\store\audio.ts
1534:17  error  Expected the Promise rejection reason to be an Error  @typescript-eslint/prefer-promise-reject-errors

path\to\voicevox\src\store\audioContinuousPlayer.ts
37:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`.
If your function does not access `this`, you can annotate it with `this: void`, or consider using an arrow function instead  @typescript-eslint/unbound-method
37:22  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`.
If your function does not access `this`, you can annotate it with `this: void`, or consider using an arrow function instead  @typescript-eslint/unbound-method

✖ 5 problems (5 errors, 0 warnings)

ルール @typescript-eslint/ban-types について

このルールは廃止され、4つのルールに分割されたようです。
https://typescript-eslint.io/rules/ban-types/

• no-restricted-types
• no-empty-object-type
• no-unsafe-function-type
• no-wrapper-object-types

このルールを無効化している箇所のdisableコメントを書き換える必要があります。
これは議論の余地があるかもしれませんが、 no-empty-object-type はoffで良いのではと思っています。

ルール @typescript-eslint/no-require-imports について

ルールの名前が変わったようです。 no-var-requires -> no-require-imports
このルールを無効化している箇所のdisableコメントを書き換える必要があります。

ルール @typescript-eslint/prefer-promise-reject-errors について

FlatConfigに対応したタイミングでrecommended-type-checkedにerrorとして追加されたようです。
これにより3件のエラーが検出されています。

ルール @typescript-eslint/unbound-method について

こちらは以前からrecommended-type-checkedにあり、旧コンフィグ時点でerrorとして設定されていたようですが、何故か検出されていませんでした。
今回、2件のエラーが新たに検出されるようになっています。

Unused eslint-disable directive 警告について

v9から、 eslint-disable 系のルール無効化コメントが不要な場合にデフォルトで警告が出るようになったようです。

本来なら警告を出す方が良いと思います。
しかし、このプロジェクトには開発時はoffでproductionビルド時に警告を出すルールがあり、それを無効化するコメントが入っています。(no-console等)
このルールが開発時に不要だとして警告を出し続けてしまうため、切っておく方が良さそうです。

現状の問題点

v9に正式対応していないプラグインがそこそこあります。

• @vue/eslint-config-prettier Eslint 9.0 released and the flat configuration format vuejs/eslint-config-prettier#19
  • FlatCompatで対応可能。
• @vue/eslint-config-typescript Support ESLint v9 vuejs/eslint-config-typescript#76
  • バージョン範囲外でインストール不可。
    一応、 --force で強制インストールすればFlatCompatで動きました。
• eslint-plugin-import Support eslint v9 import-js/eslint-plugin-import#2948
  • プラグインとしてなら普通に使えました。
• eslint-plugin-storybook Suport ESLint v9 storybookjs/eslint-plugin-storybook#157
  • 実行時エラーでおそらく現状使用不可。

VOICEVOXのバージョン

0.?.0

OSの種類/ディストリ/バージョン

• Windows
• macOS
• Linux

その他

長々と書きましたが、結論は「FlatConfig未対応プラグインが対応するまで移行不可」です。

[Hiroshiba]

まとめありがとうございます！！！！！！！！！！
非常に参考になります！！！

結論の「FlatConfig未対応プラグインが対応するまで移行不可」に賛成です！

調べてみた感じ旧仕様のが利用不可になるv10のリリースが2024年末～2025年初頭らしいので･･･え、もうそろそろですね･･･。
将来、旧仕様configが使えるESLint v9がしんどくなってきたら、未対応のルールは切り捨ててでもFlatConfig対応したくなりそうですね･･･。

とりあえず依存ライブラリが対応してくれる、あるいはv10がリリースされるまで待機･･･ですかねぇ･･･。