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

[MT224244]

内容

ESLintに関連した依存関係を最新にし、FlatConfigにします。

fmtの実行と簡単に修正できそうな点は直しましたが、まだ以下の8件のエラーが残っています。
これらの修正はこのPRの範囲外だと思うので、そのままにしています。

pnpm lint

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

path/to/voicevox/src/backend/browser/sandbox.ts
  64:7  error  Unsafe return of a value of type `Promise<any>`  @typescript-eslint/no-unsafe-return

path/to/voicevox/src/backend/electron/manager/windowManager.ts
  102:7  error  Expected an assignment or function call and instead saw an expression  @typescript-eslint/no-unused-expressions

path/to/voicevox/src/store/audio.ts
  1553:30  error  'reader.result' may use Object's default stringification format ('[object Object]') when stringified  @typescript-eslint/no-base-to-string
  1558: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

✖ 8 problems (8 errors, 0 warnings)

FlatConfig化以外の主な変更点

@typescript-eslint/no-var-requires

ルールの名前が変更されました。(-> @typescript-eslint/no-require-imports)
https://typescript-eslint.io/rules/no-var-requires/

@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

このPRでは no-empty-object-type のみoffにしてありますが、議論の余地はあるかと思います。

Unused eslint-disable directive警告

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

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

eslint-plugin/ ディレクトリの中身

FlatConfig用に書き換えています。
また、このディレクトリもESLintの観測対象になっています。

ESLint Config Inspector

FlatConfigにしたことによって、こちらのツールが使用可能になりました。
どのルールがどのファイルに適用されているのか等の確認がしやすくなります。
https://eslint.org/docs/latest/use/configure/debug#use-the-config-inspector

npm scriptsに lint:inspector を追加しています。

関連 Issue

close #2216
close #2250

スクリーンショット・動画など

その他

eslint.config.mjs を .mts 化しようと思いましたが、jiti の導入に関して何やらこのプロジェクトなりの事情がありそうだったので .mjs のままにしています。

[voicevox-preview-pages]

🚀 プレビュー用ページを作成しました 🚀

• 📝 エディタ
• 📖 Storybook

更新時点でのコミットハッシュ：7d78552

[Hiroshiba]

おーーーーー！！！！！！　お待ちしていました！！！
とても大変だったと思います、ありがとうございます！！！！！！

@sevenc-nanashi さんもアサインさせていただきました！
気づいた点等あればコメントいただけると心強いです！！

これらの修正はこのPRの範囲外だと思うので、そのままにしています。

これって変更しなくてもCIはエラーを出さない感じでしょうか？ 👀
もしCIがエラーを出す感じだったら修正してからマージしたいな～と！！

でもちょっと修正は厄介なやつもある気がするので、僕とか @sevenc-nanashi さんとかが直すのが良いかも？（もちろん @MT224244 さんでも！！）
たぶんmainブランチ側を変えても大丈夫だと思うので、変更コミットを別途mainブランチに向けてPR出すとかが良さそう。
もしmainブランチで変更したときにmainブランチ側が別エラーになる感じだったら、こちらのPRに向けてPR出そうと思います！！

[Hiroshiba]

全lintエラーを解決するPRを作ってmainブランチに向けて投げました！！

• chore: FlatConfigにしたら出るエラーをいくつか解消 #2564

マージされたあとにmainブランチマージすればlintエラーは消えるはず･･･！！

[sevenc-nanashi]

no-empty-object-type

オフにした時のメリット（vuex.tsのコメントがなくなる程度）が小さすぎるのでオンにした方がいいと思います。

[sevenc-nanashi]

ここまで来るとjiti入れた方が良さそう（どういう事情で入れられてないのかな）

[Hiroshiba]

jitiはDiscordで話題に出たことあって、依存増やすほどなんだろうかみたいなコメントをしたことがあります！
https://discord.com/channels/879570910208733277/893889888208977960/1328201417760182383

でも今回のPRを見て、たしかに恩恵ありそうに感じたのでjitiに依存しても良いかもと感じました！
ただまあ恩恵あるのがeslintくらいな気がして若干迷いどころなので、このままでもOKだとも感じます。

[MT224244]

no-empty-object-type

オフにした時のメリット（vuex.tsのコメントがなくなる程度）が小さすぎるのでオンにした方がいいと思います。

よく考えてみると、確かにオフにする意味があまりない気がしてきました…。
戻しておきます。

[Hiroshiba]

しかし、このプロジェクトには開発時はoffでproductionビルド時に警告を出すルールがあり、それを無効化するコメントが入っています。(no-console等)

これ、productionでだけ条件が変わる系のは全部排除して条件揃えてしまっても良い気がしますね！！
けどまあ結構変更多くなりそうなのと、どうするか決めるのが大変そうなので別タイミングが良さそう！

[Hiroshiba]

ほぼLGTMです！！
ありがとうございます！！！

[Hiroshiba]

野望としてTODOを書いても良いかも

Suggested change

	{
	name: "voicevox/defaults/linterOptions",
	linterOptions: {
	reportUnusedDisableDirectives: false,
	},
	},
	// TODO: いずれは有効化する
	{
	name: "voicevox/defaults/linterOptions",
	linterOptions: {
	reportUnusedDisableDirectives: false,
	},
	},

[Hiroshiba]

整理されて消えたのかもなのですが、一応確認まで･･･！

以前あった

• "@vue/typescript/recommended"
• "@vue/prettier"

がなくなってそうですが、これは別のに含まれている感じでしょうか？ 👀

[Hiroshiba]

ちなみにこれって

Suggested change

	"*.config.*",
	"src/**/*.{js,ts,vue}",
	"tests/**/*.{js,ts,mts,vue}",
	"build/**/*.{js,ts,vue}",
	"tools/**/*.{js,ts,mts}",
	".storybook/**/*.{js,ts,vue}",
	"eslint-plugin/**/*.{js,mjs,ts,mts}",
	"**/*.{js,mjs,ts,mts,vue}",

でも行けたりしませんかね･･･？
追加絶対忘れるので、サボれるならこっちのが嬉しいな～～みたいな。

まああるいはtargetExtentions = "{js,mjs,ts,mts,vue}"みたいなconst定義して、全部に付けちゃうとか！！

[Hiroshiba]

ここ表記ゆれしてるかも？
個人的にはtypescriptだとわかりやすい気がするのと、このファイル内は全部eslintなので省けるはずというのと、まあこれくらいなら略さなくてもという気がするので、typescriptConfigs・typescriptParserが好みです！

[Hiroshiba]

こちらもtypescriptではなくtypeCheckedとなってて表記揺れを感じるかもです！
vueParser→vueParserOptionsなのでこちらもtypescriptParserOptions・typescriptRulesとかが良いかも！