ESLint v10 (Flat Config) への完全移行実録：eslint-plugin-react を捨てて @eslint-react に乗り換える

---

2026年3月現在、ESLint v10 へのアップデートに伴い、従来広く使われてきた eslint-plugin-react から、よりモダンでパフォーマンスに優れた @eslint-react/eslint-plugin への移行が推奨されています。

本記事では、11種類のボードゲームを統合した大規模モノレポにおいて、AI（LLM）を活用して 152件の警告を解消しつつ、Lint時間を 1/4 に短縮した 移行の具体的な手順を共有します。

2026年4月の更新では、152件の警告を0件に戻した実績と、1,922件のテストを維持したまま移行した流れを反映しています。
ESLint の公式ドキュメントは flat config を中心に案内しているため、設定の中心点を一箇所へ寄せる方針を採りました。

---

🚀 なぜ @eslint-react なのか？

従来の eslint-plugin-react は長年愛用されてきましたが、以下の課題がありました。

1. ESLint v10 (Flat Config) への対応の遅れ: peerDependencies の不一致が発生しやすい。
2. パフォーマンス: AST の走査が重複し、大規模プロジェクトでは解析が重い。
3. React 19 への対応: Hooks の新しいルールや静的解析の厳格化が不十分。

@eslint-react は、これらをゼロからモダンな思想で再設計したプラグインです。

---

🛠 移行ステップ

1. 依存関係の整理

古いプラグインを削除し、最新のパッケージをインストールします。

# 古いプラグインを削除
npm uninstall eslint-plugin-react eslint-plugin-react-hooks

# 最新のスタックを導入 (2026年3月時点)
npm install -D \
  eslint@latest \
  @eslint-react/eslint-plugin@v2.13.0 \
  typescript-eslint \
  eslint-plugin-react-hooks@latest

2. eslint.config.js の記述 (Flat Config)

eslint.config.mjs または eslint.config.js を以下のように構成します。

import js from "@eslint/js";
import tseslint from "typescript-eslint";
import reactHooks from "eslint-plugin-react-hooks";
import eslintReact from "@eslint-react/eslint-plugin";

export default tseslint.config(
  {
    ignores: ["dist", "build", "node_modules"],
  },
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ["**/*.{ts,tsx}"],
    plugins: {
      "react-hooks": reactHooks,
      "@eslint-react": eslintReact,
    },
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.json"],
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      // @eslint-react のルールを適用
      "@eslint-react/hooks-extra/no-unnecessary-use-state": "warn",
      "@eslint-react/naming-convention/filename": ["error", "kebab-case"],
      // AIによる自動リファクタリングを前提とした厳格なルール設定
      "@eslint-react/prefer-read-only-props": "error",
    },
  },
);

---

🤖 AI (LLM) を活用した「152件の警告解消」法

手動で直すのは非効率です。私は AI エージェント（Cursor / GitHub Copilot 等）に以下のプロンプトを投げて一括修正しました。

Prompt:
「ESLint v10 と @eslint-react への移行ルールに従って、全パッケージのコードをリファクタリングしてください。特に eslint-disable で逃げている箇所は、型安全な実装に書き換えた上で理由をコメントしてください。152件の警告をゼロにすることがゴールです。」

実績

• 警告解消数: 152件 (100% 解消)
• eslint-disable 削減: 72件 → 38件 (47% 削減)
• Lint 速度: 約 4.2倍 高速化 (AST 走査の最適化による)

---

💡 まとめ：移行のポイント

• Flat Config への完全移行: eslintrc.json を捨て、eslint.config.js へ。
• プラグインの刷新: eslint-plugin-react から @eslint-react へ。
• AI 駆動リファクタリング: 警告の山は人間が直さず、AIにルールを教えて直させる。

詳細なアーキテクチャや、モノレポでの統合設定ファイル（shared config）の全容は、note の有料記事でも詳しく解説しています。

---

🔗 関連リンク

• note 記事一覧
• GitHub: @eslint-react/eslint-plugin

注意

設定例は執筆時点の ESLint と @eslint-react の仕様を前提にしています。将来の更新で推奨構成が変わる可能性があります。

#ESLint #React #TypeScript #AI #2026年開発