はじめに
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を利用するのも容易なので、積極的に利用していきたいです。