切换ESLint Flat Config后VSCode不显示错误及Next.js规则迁移问题

问题1：迁移extends: ['next/core-web-vitals']到Flat Config #

Flat Config不支持extends语法，需要直接导入Next.js ESLint插件提供的Flat预设配置，步骤如下：

1. 确保已安装@next/eslint-plugin-next（旧配置模式下一般已安装，未安装则执行npm install @next/eslint-plugin-next --save-dev）
2. 在eslint.config.js中导入插件并使用预设：

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

export default [
  // 加载TypeScript ESLint推荐配置（项目用TS时必须）
  ...tseslint.configs.recommended,
  // 加载Next.js的core-web-vitals预设
  pluginNext.configs['flat/core-web-vitals'],
  // 自定义规则或覆盖预设规则（可选）
  {
    rules: {
      // 示例：关闭禁止img标签的规则
      '@next/next/no-img-element': 'off'
    }
  }
];

如果需要Next.js基础推荐规则，可以替换为pluginNext.configs['flat/recommended']，或同时加载多个预设。

问题2：VSCode中Flat Config不生效的解决办法 #

终端正常但VSCode无错误提示，按以下步骤排查：

• 升级ESLint插件：打开VSCode扩展面板，搜索ESLint，确保版本≥v2.4.0（低版本不支持Flat Config）
• 检查工作区设置：打开.vscode/settings.json，确认配置正确：

{
  "eslint.experimental.useFlatConfig": true,
  // 若配置文件不在根目录，需手动指定路径
  // "eslint.options": { "overrideConfigFile": "./config/eslint.config.js" }
}

• 重启ESLint服务：打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），执行ESLint: Restart ESLint Server
• 清除ESLint缓存：终端执行npx eslint --clear-cache，再重启VSCode
• 查看插件日志：打开VSCode「视图→输出」，选择ESLint，检查是否有加载eslint.config.js的日志或报错，根据提示修复配置
• 确认文件范围：检查eslint.config.js中是否有排除pages目录的配置，确保目标文件在检查范围内

内容的提问来源于stack exchange，提问作者Ryan