how to use antfu eslint with next js eslint ?

[yes-oo]

i want to add eslint-config-next ( next js own eslint) with antfu , any idea ?

[yes-oo]

so far here is my solution which i don't know if it's great or not :

// eslint.config.mjs
import antfu from '@antfu/eslint-config'
import { coreWebVitals, nextTypescript } from 'eslint-config-next'

export default antfu({
    // Type of the project. 'lib' for libraries, the default is 'app'
    type: 'lib',

    // Enable stylistic formatting rules
    // stylistic: true,

    // Customize the stylistic rules
    stylistic: {
        indent: 4, // 4 spaces for indentation
        quotes: 'single', // single quotes
    },

    // TypeScript and React are enabled
    typescript: true,
    react: true,

    // Add additional ESLint configurations from `next/core-web-vitals` and `next/typescript`
    overrides: [
        ...coreWebVitals,
        ...nextTypescript,
    ],

    // Disable jsonc and yaml support
    jsonc: false,
    yaml: false,

    // Replace `.eslintignore` with `ignores` in Flat config
    ignores: [
        '**/fixtures',
        // ...globs
    ],
})

[guigaribalde]

your suggestion doesnt work for so many reasons hahaha. Sending below a sugestion on how to make it properly:

eslint.config.js

import antfu from '@antfu/eslint-config';
import nextPlugin from '@next/eslint-plugin-next';
import jestDom from 'eslint-plugin-jest-dom';
import jsxA11y from 'eslint-plugin-jsx-a11y';
import playwright from 'eslint-plugin-playwright';
import tailwind from 'eslint-plugin-tailwindcss';
import testingLibrary from 'eslint-plugin-testing-library';

export default antfu(
  {
    react: true,
    typescript: true,

    lessOpinionated: true,
    isInEditor: false,

    stylistic: {
      semi: true,
    },

    formatters: {
      css: true,
    },

    ignores: ['migrations/**/*', 'next-env.d.ts'],
  },
  ...tailwind.configs['flat/recommended'],
  jsxA11y.flatConfigs.recommended,
  {
    plugins: {
      '@next/next': nextPlugin,
    },
    rules: {
      ...nextPlugin.configs.recommended.rules,
      ...nextPlugin.configs['core-web-vitals'].rules,
    },
  },
  {
    files: ['**/*.test.ts?(x)'],
    ...testingLibrary.configs['flat/react'],
    ...jestDom.configs['flat/recommended'],
  },
  {
    files: ['**/*.spec.ts', '**/*.e2e.ts'],
    ...playwright.configs['flat/recommended'],
  },
  {
    rules: {
      'antfu/no-top-level-await': 'off', // Allow top-level await
      'style/brace-style': ['error', '1tbs'], // Use the default brace style
      'ts/consistent-type-definitions': ['error', 'type'], // Use `type` instead of `interface`
      'react/prefer-destructuring-assignment': 'off', // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
      'node/prefer-global/process': 'off', // Allow using `process.env`
      'test/padding-around-all': 'error', // Add padding in test files
      'test/prefer-lowercase-title': 'off', // Allow using uppercase titles in test titles
    },
  },
);

and your dev deps should look like this:

package.json

  "devDependencies": {
    "@antfu/eslint-config": "^3.11.2",
    "@eslint-react/eslint-plugin": "^1.17.3",
    "@next/eslint-plugin-next": "^15.0.3",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "9.16",
    "eslint-config-next": "15.0.3",
    "eslint-plugin-format": "^0.1.3",
    "eslint-plugin-jest-dom": "^5.5.0",
    "eslint-plugin-jsx-a11y": "^6.10.2",
    "eslint-plugin-playwright": "^2.1.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "eslint-plugin-tailwindcss": "^3.17.5",
    "eslint-plugin-testing-library": "^7.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }

[guigaribalde]

make sure to run the lint command in your cli and install all the deps :)

[guigaribalde]

if you are using nextjs v15 or higher, you need to use eslint v9 or higher