我最近将项目迁移到了 Next.js 15，但 ESLint 无法正常运行。到目前为止，我已安装了以下软件包：

"eslint": "9.13.0",
"eslint-config-next": "15.0.1",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"next": "15.0.1"

.prettierrc.json：

{
    "printWidth": 110,
    "bracketSpacing": true,
    "tabWidth": 4,
    "endOfLine": "auto",
    "trailingComma": "es5",
    "semi": true,
    "singleQuote": true
}

settings.json在 VS Code 中：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],  
  
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll": "explicit"
  },  
  "prettier.printWidth": 80,
}

eslint.config.mjs：

import pluginNext from '@next/eslint-plugin-next';

export default defineConfig([
    {
        plugins: {
            '@next/next': pluginNext,
        },
    },
    {
        files: ['**/*.ts', '**/*.tsx'],
        rules: {
            ...pluginNext.configs.recommended.rules,
        },
    },
]);

如果我添加 eslintrc.json，它在运行时将会起作用yarn lint，但在 VS Code 中无法实时起作用。

尽管已安装，ESLint 似乎并未对我的文件进行 lint 或在 VS Code 中显示任何错误。如能提供关于为 Next.js 15 配置 ESLint 的任何指导，我将不胜感激。ESLint 是否需要任何特定设置或依赖项才能与 Next.js 15 无缝协作？

3

  • “如果我添加 eslintrc.json”是什么意思？请确保您的 VSCode 配置eslint.useFlatConfig为true


    – 

  • 抱歉，刚刚添加了这个，我还应该做什么？你能详细说明一下吗？@Arkellys


    – 

  • 您谈论的是eslintrc.json文件，但您共享的是eslint.config.mjs


    – 



最佳答案
2

对我来说一切都很好。尝试重新启动 eslint 服务器 ( ctrl++ shift– p> restart eslint server)、重新加载 VSCode ( ctrl++ shift– p> reload window) 并确保您使用的是最新版本的 ESLint 扩展（也许尝试切换到预发布版本并重复前面的步骤）。

2

  • 当我使用 eslint 9 的新结构时仍然不起作用:(


    – 

  • 我也有这样的配置规则settings.json： "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "[typescriptreact]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },


    – 


使用兼容模式

原来的：

{
  "extends": [
    "next/core-web-vitals",
    "plugin:@tanstack/eslint-plugin-query/recommended",
    "prettier"
  ],
  "plugins": ["@tanstack/query"]
}

平坦的：

import { FlatCompat } from "@eslint/eslintrc"
import path from "path"
import { fileURLToPath } from "url"

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const compat = new FlatCompat({
  baseDirectory: __dirname,
})

/** @type {import('eslint').Linter.Config[]} */
const configs = [
  ...compat.extends("next/core-web-vitals"),
  ...compat.extends("next/typescript"),
  ...compat.extends("plugin:@tanstack/eslint-plugin-query/recommended"),
  ...compat.extends("prettier"),
  ...compat.plugins("@tanstack/query"),
]

export default configs