ESLint v9 の flat config に移行したら、設定ファイルがかなりスッキリした話

🙌 結論から

ESLint v9 からデフォルトになった **flat config（eslint.config.js）**に移行したところ、設定の全体像が把握しやすくなって、管理がかなり楽になりました！

.eslintrc.js・.eslintrc.json・.eslintignore とファイルが分散していた状態から、eslint.config.js 1ファイルにすっきりまとまります。

移行コストはそれほど高くなく、個人開発レベルなら1〜2時間あれば完了できる印象でした(^_^)

💡 flat config とはなにか

flat config とは、ESLint v8 以前の .eslintrc.* 系の設定を廃止し、eslint.config.js という1ファイルで設定を管理する新しい形式です。

flat config は ESLint v9 でデフォルトになり、現行の ESLint v10 では旧来の .eslintrc.* 系がついに完全に削除されました。今から設定を書くなら flat config 一択という状況です。

旧形式との一番大きな違いは、設定が JavaScript の配列として書ける点です。

// eslint.config.js
import js from "@eslint/js";
import globals from "globals";

export default [
  js.configs.recommended,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
    rules: {
      "no-unused-vars": "warn",
    },
  },
];

以前の extends や plugins の書き方とは異なる部分もありますが、ファイルが1つになるだけで見通しがかなりよくなります！

👀 移行してみた

移行は基本的に以下の手順で進められます。

まず ESLint を最新（現行は v10 系）に更新します。v10 は Node.js 20.19 以降が必要なので、その点だけ先に確認しておくと安心です(^_^)

npm install eslint@latest --save-dev

次に .eslintrc.* を参考にしながら eslint.config.js を新たに作成します。

プラグインによっては flat config への対応が遅れている場合もあります(・_・;)

こういったケースは @eslint/compat パッケージを使うと、旧形式のプラグインをラップして使えるのでかなり助かります。

npm install @eslint/compat --save-dev

import { fixupPluginRules } from "@eslint/compat";
import reactPlugin from "eslint-plugin-react";

export default [
  {
    plugins: {
      react: fixupPluginRules(reactPlugin),
    },
  },
];

.eslintignore の内容は eslint.config.js 内の ignores フィールドに移動すると完結します。

export default [
  {
    ignores: ["dist/", "node_modules/"],
  },
];

設定のすべてを1ファイルで管理できるのが、想像以上にスッキリしました！

✨ 使ってみた感想

移行して一番よかったのは、設定ファイルがどこにあるかを探す手間がなくなったことです！

以前は .eslintrc.js と .eslintignore と package.json の設定が混在していて、どこで何を制御しているかがわかりにくかったです(´･ω･`)

eslint.config.js に全部書いてあれば、見たいときにそのファイルだけ開けばいいので、さりげなく管理が楽になりました。

ただし、使用しているプラグインによっては flat config 未対応のものがあって、移行時にエラーが出ることもありました。

この点は事前に使用プラグインの対応状況を確認しておくのがおすすめです！

TypeScript を使っているプロジェクトでは typescript-eslint が flat config 対応済みなので、そちらは問題なく移行できました(^_^)

パパ系Webエンジニア〜愛用ガジェット一覧 🛍️

この記事を書いている作業環境のガジェットを楽天ROOMにまとめています ✨ 在宅エンジニアのデスク作りの参考にどうぞ 🙌

👍 まとめ

ESLint v9 の flat config は、設定を eslint.config.js 1ファイルにまとめてわかりやすくする新しい形式です。

旧形式（.eslintrc.*）は現行の v10 で完全に削除されたので、新規プロジェクトはもちろん、まだ旧形式のままの既存プロジェクトも移行はほぼ必須のタイミングになっています。

プラグインの対応状況だけ事前に確認すれば、移行作業そのものはそれほど大変ではなかったです。

「設定ファイルが増えて管理が面倒になってきた」と感じている方は、ぜひ flat config への移行を試してみてください！✨