VSCode + ESLint 拡張機能環境で eslint v9以降のフラットコンフィグを採用したらハマった話

TL;DR

VSCode の設定から eslint.useFlatConfig を検索してチェックを入れる。または設定をリセット（後述）する。

あるいは .vscode/settings.json に以下の様な設定を加える。

{
	"eslint.useFlatConfig": true,
}

経緯

VSCode も TypeScript も ESLint も 初心者の人間が VSCode のプロジェクトにイマドキの eslint の設定法らしい Flat Config をいきなり導入してみようとしたら変なところでハマった。

TypeScript 向け eslint の導入手順

一応 TypeScript プロジェクト向けの eslint の導入手順も簡単に説明しておく。

拡張機能の ESLint の説明に TypeScript で使いたいなら “typescript-eslint”を見てね、と書いてあるのでそこからプロジェクトのサイトをたどり“Getting Started”の通りにモジュールをインストールして、コンフィグファイルを作成すれば完了する。

本来、拡張機能の ESLint がインストール済みであれば（ルールの設定はともかく）これで完了する。

ハマった eslint.useFlatConfig の設定

しかし、npx eslint は正常動作するのに拡張機能の ESLint が反応しないという状況に陥る。

拡張機能の ESLint の説明には「eslint のバージョンが 9.0.0 以上、10.x 未満ならば、eslint.useFlatConfig のデフォルトは true になる」と書かれている。

インストールした eslint は 9.9.1 なので設定は不要のはずだ。

しかし、VSCode の設定「ESLint: Use Flat Config」を一度でもチェックしたことがあると、チェックを外した状態が実は "eslint.useFlatConfig": false と設定されてしまう罠があった。

他のプロジェクトなどで試しに導入してみるかと試行錯誤しているときに一度チェックしてしまったのだろう。

そのため何か別の問題があるのだろうと丸1日ほどハマる。

最終的に .vscode/settings.json に片っ端から eslint.xxxx の設定を書き込んでいった結果原因が判明する。

eslint.useFlatConfig 設定のリセット

この状態を回避するには、eslint.useFlatConfig 設定にチェックを入れてしまうのが明示的で良いが、設定項目の歯車マークから「設定をリセット」することで拡張機能のデフォルト動作を回復させることも出来る。

もちろんプロジェクト毎にフラグを管理したいなら .vscode/settings.json に書いておくのも有効な手段だろう。

環境・各バージョン

• macOS: 14.6.1
• VSCode: 1.92.2
• ESLint（VScode 拡張機能の方）: v3.0.10
• eslint（npm の方）: 9.9.1