ESLint Flat Config（.eslint.config.js）报错：Parsing error: The keyword 'import' is reserved

问题根源 #

该错误核心是ESLint未正确识别文件为ES模块（sourceType未设置为module），或是配置导入方式、加载顺序错误导致配置冲突，即使移除React/TypeScript插件仍存在，说明问题出在基础配置层面。

解决方案 #

1. 修正推荐配置的导入路径 #

官方Flat Config有专门的合规导出路径，替换原错误的导入方式：

• ESLint基础推荐规则：从eslint/configs/recommended导入，而非旧版的eslint/conf/eslint-recommended
• TypeScript ESLint推荐规则：使用插件内置的typescriptEslint.configs.recommended，不要直接导入dist目录下的文件
• React推荐规则：使用eslint-plugin-react提供的Flat Config兼容导出react.configs.flat.recommended（v7.32+版本支持）

2. 调整配置加载顺序 #

将基础规则放在最前，再依次加载插件推荐规则，最后添加自定义配置，避免自定义配置的核心参数被覆盖。推荐顺序：ESLint基础规则 → TypeScript规则 → React规则 → 自定义规则。

3. 修改后的完整配置文件 #

替换.eslint.config.js为以下内容：

import react from "eslint-plugin-react";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import typescriptParser from "@typescript-eslint/parser";
import globals from "globals";
import eslintRecommended from "eslint/configs/recommended";
import reactRecommended from "eslint-plugin-react/configs/flat/recommended";

export default [
  // 基础ESLint推荐规则
  eslintRecommended,
  // TypeScript ESLint推荐规则（展开数组形式的配置）
  ...typescriptEslint.configs.recommended,
  // React推荐规则
  reactRecommended,
  // 自定义配置
  {
    files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      parser: typescriptParser,
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
        // 可选：启用TypeScript类型检查规则时需添加，路径对应项目的tsconfig.json
        project: "./tsconfig.json",
      },
      globals: {
        ...globals.browser,
      },
    },
    plugins: {
      react: react,
      "@typescript-eslint": typescriptEslint,
    },
    rules: {
      // 自定义规则写在这里
    },
  },
];

4. 验证VSCode ESLint扩展设置 #

确保VSCode的ESLint扩展正确识别Flat Config：

• 打开VSCode设置（快捷键Ctrl+,）
• 搜索eslint.useFlatConfig，设置为true（v2.4.0+版本默认自动识别，但手动开启更稳妥）

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