ESLint 9与Next.js 15兼容异常，寻求配置解决方案

问题根源 #

Next.js 15 适配 ESLint 9+ 的扁平配置（eslint.config.mjs），你的现有配置存在以下问题：

• 未完整引入 Next.js 官方扁平配置
• 未集成 Prettier 相关规则
• 同时存在旧格式 .eslintrc.json 导致配置冲突
• VS Code ESLint 插件可能未适配扁平配置

修复步骤 #

1. 移除旧配置文件 #

删除项目根目录下的 .eslintrc.json，ESLint 9 优先识别扁平配置，同时存在两种格式会导致识别混乱。

2. 修正 eslint.config.mjs #

替换现有配置为完整的扁平配置，集成 TypeScript、Next.js 和 Prettier：

import eslint from '@eslint/js';
import pluginNext from '@next/eslint-plugin-next';
import prettierConfig from 'eslint-config-prettier';
import pluginPrettier from 'eslint-plugin-prettier';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  // 基础ESLint推荐规则
  eslint.configs.recommended,
  // TypeScript ESLint推荐规则
  ...tseslint.configs.recommended,
  // Next.js官方扁平推荐配置
  pluginNext.configs['flat/recommended'],
  // 禁用与Prettier冲突的ESLint规则
  prettierConfig,
  // 启用Prettier插件规则
  {
    plugins: {
      prettier: pluginPrettier,
    },
    rules: {
      'prettier/prettier': 'error',
      // 可在此添加自定义规则
    },
  },
  // 指定作用文件范围
  {
    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
  }
);

3. 更新 VS Code ESLint 插件 #

确保安装的 ESLint 插件版本为 v2.4.0+，该版本完全支持 ESLint 9 扁平配置。在扩展商店搜索「ESLint」，检查并更新到最新版本。

4. 调整 VS Code settings.json #

修改配置以适配扁平配置，移除冲突项：

{
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  // 强制启用扁平配置支持（确保插件正确识别）
  "eslint.experimental.useFlatConfig": true
}

注意：移除了 VS Code 内的 prettier.printWidth，统一使用项目根目录 .prettierrc.json 的配置，避免规则不一致。

5. 重启并清除缓存 #

• 按 Ctrl+Shift+P（Windows）/ Cmd+Shift+P（Mac），执行 ESLint: Restart ESLint Server
• 再次打开命令面板，执行 ESLint: Clear ESLint Cache

6. 验证效果 #

• 运行 yarn lint 确认命令行正常工作
• 在 VS Code 中打开一个 .tsx 文件，故意编写不符合规则的代码（如未使用变量、双引号替代单引号），检查是否能实时显示错误提示。

内容的提问来源于stack exchange，提问作者Dayán Ruiz