ESLintのFlatConfigの設定管理のコツ
2025-09-13
a month ago
開発環境
- Node.js v18以上
- ESLint v9以降（Flat Config対応版）
- VSCode + ESLint拡張機能
前提
ESLintはv9から「Flat Config」という新しい設定形式が導入され、従来の.eslintrcは非推奨になりました。
Flat Configではeslint.config.jsにすべての設定を記述しますが、単純に書き連ねると肥大化して分かりにくくなります。
そこで「用途ごとに分割し、順序を意識して組み立てる」ことが大切です。
本題
1. 用途別にconfigを分ける
Flat Configでは、設定をオブジェクトとして用途ごとに分けるのがおすすめです。
- ベース設定: 全体で共通のルール
- TypeScript設定: 型チェックやtsconfig依存のルール
- React設定: JSXやHooksに関するルール
- テスト設定: JestやVitestなどテスト環境に関するルール
こうすることで「このルールは何のためのものか」が明確になり、管理しやすくなります。
// eslint.config.js
const baseConfig = {
name: "base",
files: ["**/*.js"],
rules: {
semi: ["error", "always"],
},
};
const tsConfig = {
name: "typescript",
files: ["**/*.ts", "**/*.tsx"],
rules: {
"@typescript-eslint/no-unused-vars": "error",
},
};
const reactConfig = {
name: "react",
files: ["**/*.tsx"],
rules: {
"react/jsx-uses-react": "off",
},
};
export default [baseConfig, tsConfig, reactConfig];2. 配列の順序が大事
設定は配列としてまとめますが、後ろのものが前を上書きする仕様になっています。
上記の例では、
- baseConfig が適用され、
- tsConfig がその内容を補強し、
- reactConfig がさらに上書きする
という順序です。
もし順番を変えてしまうと、React専用のルールがTypeScript設定に潰される、といったトラブルが起こり得ます。
用途ごとに分けることと同じくらい、並べる順序の設計が重要です。
3. nameを付けてConfig Inspectorで確認する
Flat Configの各オブジェクトにはnameプロパティを付けられます。
このnameを設定しておくと、ESLintのConfig Inspectorで実際にどのconfigがどのファイルに効いているかを画面上で確認でき、デバッグや共有が格段に楽になります。
## ツールダウンロード
$ pnpx @eslint/config-inspector
## コマンドで起動
$ pnpm eslint --inspect-configたとえば、上記の例では「base」「typescript」「react」と名前を付けているため、Config Inspector上でそれぞれの適用範囲を視覚的に把握できます。
さいごに
Flat Configは従来よりシンプルかつ柔軟ですが、自由に書けるがゆえに混乱しやすい面もあります。
そこで大事なのは以下の3点です。
- 用途ごとにconfigを分割する
- 配列の順序を意識して組み立てる
- nameを付けてConfig Inspectorで確認できるようにする
この運用ルールを取り入れることで、Flat Configをチーム開発でも安心して管理できるようになります。