ESLintの設定をeslintrcからFlat Configへ移行しました
ESLintの新しいFlat Config形式への移行について、移行手順や課題、そして得られたメリットを詳しく解説します。
#frontend #eslint #tools
はじめに
ESLintの設定を新しいFlat Config形式へ移行しました。その取り組みについて紹介します。
ESLintとFlat Configについて
ESLintはJavaScriptおよびTypeScriptのコード品質を維持するための静的解析ツールです。Flat Configは「ESLint v8.21.0で実験的機能として導入され、v8.57.0で安定版となった新しい設定形式」です。v9.0.0では従来の.eslintrc.*形式が非推奨となりました。
移行の背景
ESLint v10での従来形式の削除が予定されているため、将来の互換性確保を目的に移行を決断しました。
移行手順
1. eslint-migrate-configツールの実行
公式の移行ツールで自動変換を実施しました。
2. 生成された設定の調整
プロジェクト固有の要件に対応しました。
3. プロジェクト固有の課題への対応
- CommonJS形式の維持
- Vue 2のルール設定
- プラグイン対応確認
4. 最終的な設定ファイル
eslint.config.mjsの完成まで段階的に調整を行いました。
移行の結果
ESLint Config Inspectorの活用： 複数の設定が重なり合う複雑な構成でも、最終的にどのルールが適用されているかを可視化できるようになりました。
Flat Config形式の利点：
- 条件分岐や動的設定が容易
- 設定の継承と優先順位が明確
- プラグイン設定がより直感的
- 複数ファイルから単一ファイル管理へ
まとめ
設定ファイルの一元管理、保守性向上、ESLint v10への互換性確保を実現することができました。Flat Config形式への移行により、より柔軟で分かりやすいLint設定が可能になりました。