1. ホーム
2. web
3. ESLint Flat Config：従来の.eslintrcからの移行ガイド

ESLint v9.0（2024年リリース）は、Flat Configシステム（eslint.config.js）をデフォルトとし、10年以上使われてきた従来の.eslintrc形式を置き換えました。この移行ガイドでは、移行プロセス全体、新しい概念、実践的な例を解説します。

Flat Configが必要な理由

従来の.eslintrcシステムには、設定のカスケードによる予測不能な動作、ディレクトリベースの解決の複雑さ、JSON/YAMLの制限（関数やコメントの非対応）、共有設定の合成困難さなどの問題がありました。Flat Configは単一設定ファイル、JavaScript配列による明示的な合成、簡略化されたプラグイン解決、JavaScriptネイティブの構文でこれらを解決します。

Flat Configの形式

新しい形式はeslint.config.jsから設定オブジェクトの配列をエクスポートします：

import js from "@eslint/js";
import typescript from "typescript-eslint";

export default [
  js.configs.recommended,
  ...typescript.configs.recommended,
  {
    files: ["src/**/*.ts"],
    rules: {
      "@typescript-eslint/no-unused-vars": "error",
    },
  },
  {
    ignores: ["dist/**", "node_modules/**"],
  },
];

各設定オブジェクトはfiles（適用対象）、ignores（除外対象）、rules、plugins、languageOptions、linterOptionsを指定できます。

移行手順

従来の.eslintrcからFlat Configへの変換パターン：

// 移行前: .eslintrc.json
// { "env": { "browser": true }, "extends": ["eslint:recommended"] }

// 移行後: eslint.config.js
import globals from "globals";
import js from "@eslint/js";

export default [
  js.configs.recommended,
  {
    languageOptions: { globals: globals.browser },
  },
];

TypeScript統合

typescript-eslint v7+はFlat Configを完全サポートしています：

import tseslint from "typescript-eslint";

export default tseslint.config({
  files: ["src/**/*.ts"],
  languageOptions: {
    parserOptions: { project: true },
  },
  rules: {
    "@typescript-eslint/no-floating-promises": "error",
  },
});

tseslint.config()ヘルパーは型チェック付きの設定オブジェクトを提供し、TypeScript認識リンティングの設定を簡素化します。

プラグイン互換性

Flat Configではプラグインを文字列ではなく、オブジェクトとしてインポートします：

import react from "eslint-plugin-react";

export default [
  {
    files: ["src/**/*.jsx"],
    plugins: { react },
    rules: {
      "react/jsx-uses-react": "error",
    },
  },
];

Flat Config未対応のレガシープラグインには@eslint/compatのfixupPluginRulesラッパーを使用します。FlatCompatユーティリティは段階的な移行中にレガシーextendsチェーンを橋渡しします。

パフォーマンス向上

Flat Configは、レガシーのO(n)カスケード方式に対してO(1)の設定解決を実現します。大規模なモノレポではリンティング時間が大幅に短縮されます。ESLint v9のキャッシュ改善により、CIパイプラインでのリント時間もさらに削減されます。

CI設定

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npx eslint src/ --cache

よくある落とし穴

@eslint/jsプリセットの欠如（eslint:recommendedを提供）、envの置き換え方法の混乱（globalsパッケージを使用）、全ファイルに適用される空の設定オブジェクトに注意。トラブルシューティング時は--debugフラグを使用：npx eslint --debug src/。

まとめ

Flat Configへの移行はESLintの設定を簡素化し、パフォーマンスを向上させ、より保守しやすい設定形式を提供します。初期の移行作業は、明確な設定合成、高速なリンティング、より良いツール連携という形で投資対効果をもたらします。まずは単一プロジェクトから始め、出力がレガシー設定と一致することを検証した上で、コードベース全体に展開しましょう。