はじめに

ESLintは2024年4月5日をもってバージョン9.0.0を迎え、ルール設定ファイルのデフォルト形式がFlat Configになりました。これにより、eslintrcで記述される旧形式が非推奨となりました(リリースブログ)。

Flat Configでは1つのファイルから中央集権的に設定を構築するので、どのファイルに対してどのルールが有効になっているかが把握しにくくなっています。
そのため、旧形式からの移行やルールの増減時に設定を確認する作業が困難になります。

このような時、ESLint Config Inspectorを利用することで、視覚的に有効なルールと対象ファイルを確認できます。

利用方法

ESLint Config Inspectorの利用方法は以下の通りです。

パッケージ内のESLintのバージョンが9.0.0以上の場合は

npx eslint --inspect-config

を実行し、パッケージのESLintを使わない場合は

npx @eslint/config-inspector

を実行します。実行するとlocalhost:7007に設定が視覚化されたページ表示されます。

機能

ページにはConfigs、Rules、Filesの3種類の機能があります。

Configs

Configsは定義した配列の各要素に適応された内容が表示されます。同一配列要素内で記述されていても、extendsに記述された内容などは異なる要素として表示されます。

表示される内容には、有効なファイル、プラグイン、ルール、その他の構成としてlanguageOptionsやsettingsなどが含まれます。

検索フィールドを使用して特定のファイルを指定することで、設定を絞り込めます。

Merged Rulesにタブを切り替えると、統合された設定も確認できます。全ファイルと特定のファイルに適応される設定が2つの項目で表示されます。

Rules

RulesはパッケージにインストールされたESLintのプラグインのルールが表示されます。

表示されるルールは、以下の3つの項目で絞り込めます。

Plugins：特定のパッケージ
Usage：利用しているルールや全てのルール等の使われ方
State：ルールの推奨、廃止等の状況

Files

FilesはESLintが有効なファイルの一覧が表示されます(experimentalなので、今後大きな変更のある可能性があります)。

表示されたファイル名をクリックするとConfigsに移って有効な設定が表示されます。

File Groupsに変更すると、同じ設定が有効になっているファイルがグループごとに表示されます。

おわりに

ESLint Config Inspectorにより、設定を視覚的に把握し、適用されるルールやファイルを明確に理解しやすくなりました。
設定の確認作業が大幅に簡単になることで、より速くより確実にコードの品質を維持するルールを設定できるようになります。
Flat Configを利用してさえいればESLint Config Inspectorを利用するのも容易なので、積極的に利用していきたいです。