Правильная конфигурация eslint в NextJS 15

Вопрос или проблема

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";

export default [
  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
  {languageOptions: {globals: {...globals.browser, ...globals.node}}},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  {
    rules: {
      "@typescript-eslint/no-unused-vars": "off",
      "react/prop-types": "off",
      "react/react-in-jsx-scope": "off",
      "@typescript-eslint/no-empty-object-type": "off", // удалить
      "no-prototype-builtins": "off", // исследовать
      "no-unused-vars": "warn",
      "no-undef": "warn",
    },
  },
  {
    ignores: ["src/tools/"],
  },
];

Ответ или решение

Правильная конфигурация ESLint в Next.js 15

При работе с Next.js 15 в комбинации с ESLint 9.13.0 и плагином @next/eslint-plugin-next 15.0.1, может возникнуть ошибка, сообщающая о том, что плагин Next.js не найден в вашей конфигурации ESLint. Это может вызывать затруднения при сборке проекта. Давайте разберёмся, как правильно настроить ESLint в этой среде, чтобы избежать подобных проблем.

Шаг 1: Установка необходимых пакетов

Перед началом настройки убедитесь, что все необходимые пакеты установлены. Вам понадобятся:

npm install --save-dev eslint @next/eslint-plugin-next

Шаг 2: Структура и содержание конфигурации ESLint

Вместо использования формата .eslintrc, рекомендуется перейти к современному подходу с использованием eslint.config.mjs, который поддерживает ES-модули и позволяет более наглядно управлять конфигурацией. Ваш файл eslint.config.mjs может выглядеть следующим образом:

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from '@typescript-eslint/eslint-plugin';
import pluginReact from 'eslint-plugin-react';
import next from '@next/eslint-plugin-next';

export default [
  {
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
  },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
  },
  pluginJs.configs.recommended,
  tseslint.configs.recommended,
  pluginReact.configs.recommended,
  next.rules,
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 'off',
      'react/prop-types': 'off',
      'react/react-in-jsx-scope': 'off',
      'no-unused-vars': 'warn',
      'no-undef': 'warn',
    },
  },
  {
    ignores: ['src/tools/'],
  },
];

Шаг 3: Встраивание плагина Next.js

Обратите внимание на то, что вы добавили правила из плагина Next.js в вашу конфигурацию. Это даст возможность ESLint корректно распознать плагин и устранить предупреждение об отсутствии конфигурации. Убедитесь, что next.rules добавлен в массив правил вашей конфигурации.

Шаг 4: Запуск ESLint

После внесения изменений запустите ESLint, чтобы убедиться, что предупреждения исчезли и конфигурация работает корректно:

npx eslint .

Заключение

Следуя вышеописанным шагам, вы сможете правильно настроить ESLint в вашем проекте на Next.js 15 и избавиться от предупреждения о нехватке плагина. Обратите внимание, что поддержка более новых форматов конфигурации ESLint делает вашу настройку более гибкой и оптимизированной. Если у вас все еще возникают проблемы или вопросы, рекомендуется обратиться к официальной документации Next.js или сообществу для получения дополнительной помощи.