Skip to main content

ESLint Config Gen

v1.0.0

Generate ESLint flat config for Next.js, React, and Node.js projects

Generates an ESLint flat config (eslint.config.mjs) with framework-specific plugins, TypeScript support, and optional Prettier integration.

How to use
  • →Pick a framework preset to auto-include the right plugins and globals for your project.
  • →Enable TypeScript support to add typescript-eslint with type-aware rules.
  • →Toggle Prettier integration last — its config must appear at the end of the config array to override formatting rules.

This generates an ESLint flat config (eslint.config.mjs). Flat config is the default format since ESLint v9 and replaces the legacy .eslintrc format.

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import next from "@next/eslint-plugin-next";
import jsxA11y from "eslint-plugin-jsx-a11y";
import importPlugin from "eslint-plugin-import";
import prettier from "eslint-config-prettier";

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  react.configs.flat.recommended,
  react.configs.flat["jsx-runtime"],
  jsxA11y.flatConfigs.recommended,
  importPlugin.flatConfigs.recommended,
  prettier,
  {
    files: ["**/*.{js,jsx,ts,tsx}"],
    languageOptions: {
      globals: {
        ...globals.browser,
      },
      parserOptions: {
        projectService: true,
      },
      parserOptions: {
        ecmaFeatures: { jsx: true },
      },
    },
    plugins: {
      "react-hooks": reactHooks,
      "@next/next": next,
    },
    rules: {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",
      "react/prop-types": "off",
      "@next/next/no-html-link-for-pages": "error",
      "import/order": ["warn", { "newlines-between": "always" }],
      "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
      "@typescript-eslint/no-explicit-any": "warn",
    },
    settings: {
      react: { version: "detect" },
    },
  },
  {
    ignores: ["node_modules/", "dist/", ".next/", "coverage/"],
  },
];