Configuração ESLint Flat
Ferramentas do ecossistema moderno JavaScript e TypeScript

Gerador Interativo de ESLint Flat Config (eslint.config.mjs)

Gere arquivos modernos de configuração plana para ESLint 9+ (eslint.config.mjs / .js) com suporte para TypeScript, React, Next.js, Vue, Prettier e regras personalizadas.

Zero uploads no servidor
TypeScript ESLint v8+
Predefinições:
Parâmetros do 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,
);
Plugins Flat AtivosCarregados
8 Plugins

Importações de matriz Flat Config nativas sem conflito de analisador.

Diretivas de RegrasAtivas
10 Diretivas

Regras granulares de estilo, importações não utilizadas e segurança de tipos.

Compatibilidade ESLint 9+Grade A+
100% Flat Nativo

Zero depreciações de .eslintrc; totalmente inspecionado e certificado.

Paradigma Flat Config ESLint 9+

Gera configurações planas modernas baseadas em arrays sem problemas de herança ou parsers ocultos do antigo .eslintrc.

Zero Telemetria no Servidor

Todas as análises de pacotes e geração de código ocorrem estritamente na memória do navegador sem envio para servidores.

Tipagem Segura e Sem Conflitos

Integração completa com typescript-eslint v8 e eslint-config-prettier para eliminar conflitos com formatadores.

Referência técnica e guia de arquitetura

Guia do Desenvolvedor: Gerador Interativo de ESLint Flat Config (eslint.config.mjs) — Guia de referência

Gere arquivos modernos de configuração plana para ESLint 9+ (eslint.config.mjs / .js) com suporte para TypeScript, React, Next.js, Vue, Prettier e regras personalizadas.

Parâmetros principais e controles

Ambientes de Execução e Globaisstring[]

Define variáveis globais de ambiente através do pacote 'globals' (ex.: globals.browser, globals.node) dentro de languageOptions.globals.

Padrão: ['browser', 'node']
Frameworks e Predefiniçõesstring[]

Seleciona conjuntos modulares de regras como typescript-eslint, React, React Hooks, Next.js, Vue e Prettier.

Padrão: ['typescript', 'react', 'prettier']
Padrões de Arquivos (files)string[]

Padrões glob que delimitam quais arquivos e diretórios são afetados pelo respectivo bloco de configuração.

Padrão: ['**/*.{js,mjs,cjs,ts,jsx,tsx}']
Exclusões Globais (ignores)string[]

Substitui o arquivo obsoleto .eslintignore definindo um array global de pastas e arquivos ignorados no repositório.

Padrão: ['dist/**', 'build/**', '.next/**', 'node_modules/**']
Opções do Linter (linterOptions)object

Controla o comportamento geral da engine, como reportUnusedDisableDirectives e noInlineConfig.

Padrão: { reportUnusedDisableDirectives: 'warn' }

Dicas profissionais e melhores práticas

No Flat Config

No Flat Config, qualquer objeto contendo apenas a chave 'ignores' sem um seletor 'files' funciona como exclusão global em todo o projeto, substituindo o .eslintignore.

Aproveite o utilitário tseslint.config()

Envolver o array de exportação com tseslint.config(...) do typescript-eslint habilita verificação de tipos estrita e autocompletar no seu eslint.config.mjs.

Sempre adicione eslint-config-prettier

Sempre adicione eslint-config-prettier como o elemento final da lista para desativar com precisão todas as regras conflitantes de formatação.

Conecte plugins legados com FlatCompat

Caso um plugin antigo ainda não ofereça suporte nativo ao Flat Config, instancie FlatCompat({ baseDirectory: import.meta.dirname }) de @eslint/eslintrc para utilizá-lo.

Problemas comuns e solução de problemas

TypeError: Key 'plugins' is expected to be an object

No Flat Config, 'plugins' deve ser um objeto associando namespaces às instâncias importadas dos plugins (ex.: { react: reactPlugin }), e não um array de strings com nomes de plugins.

Regras com reconhecimento de tipos relatam erro ao buscar 'tsconfig.json'

Defina languageOptions.parserOptions.projectService: true e restrinja as regras estritamente a arquivos TypeScript através da propriedade 'files'.

Globais comuns como 'window' ou 'process' disparam advertência 'no-undef'

O Flat Config não inclui ambientes padrão de forma implícita. Instale o pacote 'globals' e faça o spread (ex.: ...globals.browser) em languageOptions.globals.

Perguntas frequentes (FAQ)

Qual é a principal diferença entre o Flat Config e o formato antigo .eslintrc?▼

O Flat Config baseia-se em módulos ES padrão (export default [...]) avaliados em ordem sequencial, eliminando a herança em cascata complexa e a resolução mágica de plugins por texto.

Por que usar eslint.config.mjs em vez de eslint.config.js?▼

Se o seu package.json não contiver 'type': 'module', o uso da extensão .mjs força o Node.js a interpretar o arquivo como módulo ES, viabilizando o uso de declarações import e export nativas.

O ESLint 9+ ainda processa o arquivo .eslintignore?▼

Não. Por padrão, o ESLint 9 ignora o .eslintignore. Todas as exclusões devem ser declaradas diretamente no array 'ignores' do seu arquivo de configuração plana.

Como integrar o ESLint Flat Config ao Next.js 14 e 15?▼

Importe @next/eslint-plugin-next diretamente ou utilize FlatCompat para estender 'next/core-web-vitals' até que predefinições planas nativas estejam consolidadas no Next.js.

É possível manter o ESLint operando em modo legado temporariamente?▼

Sim. A variável de ambiente ESLINT_USE_FLAT_CONFIG=false permite executar o ESLint 9 no modo clássico .eslintrc enquanto a migração é realizada.

Ferramentas e utilitários relacionados

Todas as ferramentas →