ESLintフラット設定生成
最新JavaScript & TypeScriptエコシステムツール

ESLint Flat Config (eslint.config.mjs) 対話型ビルダー

TypeScript、React、Next.js、Vue、Prettier、カスタムルールに対応した最新のESLint 9+ フラット設定ファイル(eslint.config.mjs / .js)をブラウザ上で安全に生成します。

サーバー送信ゼロ
TypeScript ESLint v8+
プリセット:
ESLint Flat Config パラメータ
// ============================================================================
// ESLint 9+ Flat Configuration File
// Generated by ToolsAA ESLint Flat Config Builder (https://toolsaa.com)
// Format: ESM (eslint.config.mjs)
// ============================================================================

import js from "@eslint/js";
import tseslint from "typescript-eslint";
import nextPlugin from "@next/eslint-plugin-next";
import jsxA11y from "eslint-plugin-jsx-a11y";
import simpleImportSort from "eslint-plugin-simple-import-sort";
import unusedImports from "eslint-plugin-unused-imports";
import tailwind from "eslint-plugin-tailwindcss";
import prettier from "eslint-config-prettier";
import globals from "globals";

export default tseslint.config(
  // 1. Global Ignores
  {
    ignores: [
      "node_modules/**",
      ".next/**",
      "out/**",
      "dist/**",
      "build/**",
      "coverage/**",
      "*.config.js",
      "*.config.mjs",
    ],
  },

  // 2. Base ESLint Recommended Rules
  js.configs.recommended,

  // 3. TypeScript Rules
  ...tseslint.configs.recommendedTypeChecked,
  ...tseslint.configs.stylisticTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },

  // 4. Next.js 15 App Router Integration
  {
    files: ["**/*.{js,jsx,mjs,ts,tsx}"],
    plugins: {
      "@next/next": nextPlugin,
      "jsx-a11y": jsxA11y,
    },
    rules: {
      ...nextPlugin.configs.recommended.rules,
      ...nextPlugin.configs["core-web-vitals"].rules,
      ...jsxA11y.configs.recommended.rules,
    },
  },

  // 5. Tailwind CSS Class Sorting & Linting
  ...tailwind.configs["flat/recommended"],

  // 7. Environment & Runtime Globals
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        ...globals.es2024,
      },
    },
  },

  // 8. Custom Rules & Directives
  {
    plugins: {
      "simple-import-sort": simpleImportSort,
      "unused-imports": unusedImports,
    },
    rules: {
      "no-console": "warn",
      "prefer-const": "error",
      "@typescript-eslint/no-unused-vars": [
        "warn",
        {
          argsIgnorePattern: "^_",
          varsIgnorePattern: "^_",
          caughtErrorsIgnorePattern: "^_",
        },
      ],
      "@typescript-eslint/no-explicit-any": "warn",
      "react-hooks/exhaustive-deps": "warn",
      "simple-import-sort/imports": "error",
      "simple-import-sort/exports": "error",
      "unused-imports/no-unused-imports": "error",
      "@next/next/no-html-link-for-pages": "error",
      "@next/next/no-img-element": "warn",
    },
  },

  // 9. Prettier Formatting Harmony (Must remain at the very end to disable conflicting rules)
  prettier,
);
有効なフラットプラグイン読込済
8 プラグイン

パーサー衝突のないネイティブフラット設定配列インポート。

設定ルールディレクティブ有効
10 ディレクティブ

きめ細やかなコード整形、未使用インポートおよび型安全性ルール。

ESLint 9+ 互換性評価Grade A+
100% フラットネイティブ

レガシー.eslintrcの非推奨事項ゼロ、完全検証認定済み。

ESLint 9+ Flat Config パラダイム

従来の .eslintrc におけるカスケーディングの混乱や隠れたパーサー競合を排除し、明示的な配列形式の設定を出力します。

完全ローカル・通信ゼロ

package.json の解析やルールの合成はすべてブラウザのメモリ内で完結し、外部サーバーへの通信は一切発生しません。

型安全性とフォーマッタ競合防止

typescript-eslint v8 と eslint-config-prettier に完全対応し、Prettier との不要なルール衝突を防止します。

技術リファレンス&アーキテクチャガイド

ESLint Flat Config (eslint.config.mjs) インタラクティブビルダー — リファレンスガイド

TypeScript、React、Next.js、Vue、Prettier、カスタムルールに対応した最新のESLint 9+ フラット設定ファイル(eslint.config.mjs / .js)をブラウザ上で安全に生成します。

主要パラメータ&設定項目

対象ランタイム環境&グローバル変数string[]

languageOptions.globals 内で 'globals' パッケージ(例: globals.browser, globals.node)を展開し、実行環境ごとの大域変数を定義します。

初期値: ['browser', 'node']
フレームワーク&プリセット統合string[]

typescript-eslint、React、React Hooks、Next.js、Vue、Prettier などの拡張プリセットおよびルールセットを選択します。

初期値: ['typescript', 'react', 'prettier']
対象ファイルパターン (files)string[]

各設定ブロックを適用する対象ファイルやディレクトリを glob パターンで指定します。

初期値: ['**/*.{js,mjs,cjs,ts,jsx,tsx}']
グローバル除外パターン (ignores)string[]

廃止された .eslintignore に代わり、リポジトリ全体で静的解析から除外するパスをグローバルに指定します。

初期値: ['dist/**', 'build/**', '.next/**', 'node_modules/**']
リンターオプション (linterOptions)object

未使用の eslint-disable コメントの警告(reportUnusedDisableDirectives)など、エンジン全体の挙動を設定します。

初期値: { reportUnusedDisableDirectives: 'warn' }

プロの活用テクニック&推奨設定

グローバル ignores は単独オブジェクトで定義する

Flat Config において、files キーを持たず ignores キーのみを含む設定オブジェクトは、プロジェクト全体のグローバル除外(従来の .eslintignore 相当)として機能します。

tseslint.config() ヘルパーを活用する

typescript-eslint が提供する tseslint.config(...) で設定配列全体をラップすることで、完全な TypeScript 型補完と安全な設定合成が可能になります。

Prettier 設定は必ず配列の末尾に配置する

eslint-config-prettier を設定配列の最後の要素として追加することで、先行するリンタールールに含まれる競合フォーマット設定を確実に無効化できます。

未対応プラグインは FlatCompat で移行する

Flat Config にネイティブ対応していないレガシープラグインは、@eslint/eslintrc の new FlatCompat({ baseDirectory: import.meta.dirname }) を使うことで安全にブリッジ接続できます。

よくあるトラブルと解決策

TypeError: Key 'plugins' is expected to be an object というエラーが出る

従来の文字列配列とは異なり、Flat Config の plugins は名前空間とインポートしたプラグインオブジェクトのマッピング(例: { react: reactPlugin })として定義する必要があります。

型認識ルール(Type-Aware)で tsconfig.json が見つからないエラーが発生する

languageOptions.parserOptions.projectService: true を有効化し、files オプションで TypeScript ファイルのみに対象を限定して通常 JS ファイルの解析失敗を防いでください。

console や window などの標準グローバル変数が no-undef で警告される

Flat Config では暗黙の env 設定が廃止されました。npm から 'globals' パッケージを導入し、languageOptions.globals に ...globals.browser などを展開してください。

よくある質問 (FAQ)

従来の .eslintrc と Flat Config の最大の違いは何ですか?▼

Flat Config は階層的な自動カスケードや暗黙の文字列解決を廃止し、JavaScript/MJS の標準 ES モジュール(export default [...])による明示的なインポートと上から下への確定的な配列評価を採用しています。

eslint.config.js ではなく eslint.config.mjs を使うべき理由は何ですか?▼

package.json に 'type': 'module' が指定されていないプロジェクトでも、.mjs 拡張子を使用することで Node.js が常に ES モジュールとして実行し、ネイティブ import 構文を確実に処理できるためです。

ESLint 9+ では .eslintignore ファイルは読み込まれますか?▼

いいえ。ESLint 9 ではデフォルトで .eslintignore を読み込みません。すべての除外パターンは eslint.config.mjs 内の単独 ignores 配列として明示的に宣言する必要があります。

Next.js 14 や 15 では Flat Config をどのように設定すればよいですか?▼

@next/eslint-plugin-next を直接インポートしてルールを適用するか、FlatCompat を用いて 'next/core-web-vitals' を拡張することで、最新の Next.js プロジェクトでも安全に運用できます。

移行作業が完了するまで一時的にレガシーモードで実行できますか?▼

はい。環境変数 ESLINT_USE_FLAT_CONFIG=false を設定することで、従来の .eslintrc モードで一時的に ESLint 9 を実行することが可能です。

関連するおすすめ開発ツール

すべてのツール →
SemVer範囲・バージョン適合性テスター開発ツール

セマンティック バージョニング(SemVer)範囲(キャレット ^、チルダ ~、ハイフン範囲、X-Range、プレリリース)をテストし、パッケージバージョンの適合性をリアルタイムに検証します。

ツールを開く→
Crontab 表現式解析・スケジュール自動生成ツール開発ツール

POSIXおよびVixie cron式の構文解析、バリデーション、次回実行日時の算出を行う開発者向けリファレンス。

ツールを開く→
正規表現チェッカー・リアルタイムRegExテスター開発ツール

developer向け正規表現テスターユーティリティ。

ツールを開く→
URLエンコード・デコードツール開発ツール

RFC 3986厳格規格、encodeURIComponent、encodeURI、formUrlEncodedに対応した高速・安全な双方向URL変換ツール。

ツールを開く→
HTML実体参照エンコード・デコードツール開発ツール

名前付き実体参照、10進数参照、16進数参照を相互変換し、XSS攻撃を防ぎ特殊記号を正しく表示する高速エスケープツール。

ツールを開く→
Unixタイムスタンプ&エポック時刻相互変換開発ツール

POSIXエポック秒(1970年1月1日基準)の秒・ミリ秒・マイクロ秒・ナノ秒相互変換、タイムゾーン計算、ISO 8601フォーマット、2038年問題の完全ガイド。

ツールを開く→