CRA项目.eslintrc.js配置迁移至Vite+React19项目eslint.config.js的方案及无报错/警告问题排查

我帮你梳理下从CRA的.eslintrc.js迁移到Vite+React19的eslint.config.js的正确方案，同时排查你当前配置里导致无报错/警告的核心问题：

一、当前配置的核心问题（导致规则不生效） #

你现在的配置里有几个关键错误，直接让ESLint无法正确加载规则：

1. 未定义变量引用：规则里写了...js.configs.recommended.rules，但js这个变量从来没定义过，这会导致规则对象解析失败，ESLint大概率静默跳过规则加载，自然不会有任何提示
2. 重复依赖导入：同时导入了pluginReact和react两个相同的eslint-plugin-react包，属于冗余且容易混淆
3. 语言选项冲突：languageOptions里同时设置了ecmaVersion: 2020和parserOptions.ecmaVersion: "latest"，存在版本冲突
4. 规则合并逻辑问题：直接展开第三方插件的规则时，没有确保插件配置正确加载

二、修正后的完整可运行配置 #

先安装所有必要依赖（如果还没装）：

npm install eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-prettier eslint-plugin-import eslint-plugin-jsx-a11y globals --save-dev

然后替换你的eslint.config.js为以下内容：

import globals from "globals";
import pluginReact from "eslint-plugin-react";
import { defineConfig } from "eslint/config";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import prettier from "eslint-plugin-prettier";
import importPlugin from "eslint-plugin-import";
import jsxA11y from "eslint-plugin-jsx-a11y";
// 导入ESLint官方推荐规则
import eslint from "eslint";

export default defineConfig([
  // 忽略文件配置
  { ignores: ["dist"] },
  // 核心配置块
  {
    files: ["**/*.{js,mjs,cjs,jsx}"],
    languageOptions: {
      globals: {
        ...globals.browser,
        process: "readonly", // 直接声明全局变量，替代冗余的no-undef规则配置
      },
      parserOptions: {
        ecmaVersion: "latest",
        ecmaFeatures: { jsx: true },
        sourceType: "module",
      },
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
      prettier,
      import: importPlugin,
      react: pluginReact,
      "jsx-a11y": jsxA11y,
    },
    rules: {
      // 加载ESLint官方推荐规则
      ...eslint.configs.recommended.rules,
      // 加载React Hooks推荐规则
      ...reactHooks.configs.recommended.rules,
      // 加载React官方推荐规则
      ...pluginReact.configs.recommended.rules,
      // Vite React 专属规则
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
      // 你的自定义规则（从旧配置迁移过来的）
      "prettier/prettier": "off",
      "no-nested-ternary": "off",
      "no-underscore-dangle": "off",
      "default-param-last": "off",
      "react/require-default-props": "off",
      "prefer-arrow-callback": "error",
      camelcase: ["error", { properties: "never", ignoreDestructuring: true }],
      "no-else-return": ["error", { allowElseIf: true }],
      "no-param-reassign": ["error", { props: false }],
      // Import 相关规则
      "import/no-extraneous-dependencies": [
        "error",
        { devDependencies: false, optionalDependencies: false, peerDependencies: false },
      ],
      "import/order": [
        "error",
        {
          pathGroups: [
            { pattern: "react", group: "external", position: "before" },
          ],
          pathGroupsExcludedImportTypes: ["builtin"],
        },
      ],
      "import/no-unused-modules": ["error", { unusedExports: true }],
      // JSX 无障碍规则
      ...jsxA11y.configs.recommended.rules,
      // 最佳实践规则
      eqeqeq: "error",
      "no-invalid-this": "error",
      "no-return-assign": "error",
      "no-unused-expressions": ["error", { allowTernary: true }],
      "no-useless-concat": "error",
      "no-useless-return": "error",
      "no-use-before-define": "error",
      "no-duplicate-imports": "error",
      "no-plusplus": ["error", { allowForLoopAfterthoughts: true }],
      // 变量规则
      "no-unused-vars": [
        "error",
        {
          vars: "all",
          args: "after-used",
          ignoreRestSiblings: true,
          varsIgnorePattern: "^[A-Z_]",
        },
      ],
    },
    settings: {
      react: { version: "detect" },
      "import/resolver": {
        // 适配Vite路径别名（可选，用了@/之类的别名就需要）
        node: { extensions: [".js", ".jsx"] },
      },
    },
  },
]);

三、关键调整说明&迁移注意事项 #

1. 规则引用修复：用eslint.configs.recommended.rules替代原来未定义的js.configs.recommended.rules，确保官方推荐规则正常加载
2. 规则整合优化：把React、React Hooks、JSX-A11y的推荐规则直接展开到规则集，逻辑更清晰，避免配置分散
3. 全局变量声明：把需要的全局变量直接写在languageOptions.globals里，比通过no-undef规则配置更符合Flat Config规范
4. 编辑器适配：确保你的编辑器ESLint插件更新到v2.4.0+，旧版本不支持Flat Config格式
5. 配置验证：终端运行npx eslint .手动触发检查，能快速定位配置语法错误，比编辑器提示更直接
6. 路径别名适配：如果用了Vite的路径别名（如@/），需要安装eslint-import-resolver-alias并在import/resolver里添加对应配置

内容来源于stack exchange