ESLint报React未使用、no-var-requires错误及--fix不生效如何解决

修正后的完整配置 #

替换项目根目录下.eslintrc.js内容为以下配置：

module.exports = {
  // 原有配置遗漏TS解析器指定，是多数异常的核心诱因
  parser: '@typescript-eslint/parser',
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended',
    // JSX运行时规则放在TS扩展之后，保证优先级更高
    'plugin:react/jsx-runtime',
    // 新增：统一ESLint与Prettier规则，避免冲突阻断自动修复
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'warn',
    // 配置未使用变量校验规则，兼容React导入场景
    '@typescript-eslint/no-unused-vars': [
      'warn',
      {
        varsIgnorePattern: '^React$',
        argsIgnorePattern: '^_',
        ignoreRestSiblings: true
      }
    ],
    // 显式关闭JSX需导入React的规则，适配React17+新JSX转换
    'react/react-in-jsx-scope': 'off'
  },
  // 用overrides区分浏览器端和Node端代码规则
  overrides: [
    {
      files: [
        '*.{js,cjs,ts}',
        'scripts/**/*.{js,ts}',
        'config/**/*.{js,ts}',
        '*config.{js,ts,cjs}'
      ],
      env: {
        node: true
      },
      rules: {
        // 关闭Node环境下require语句的校验
        '@typescript-eslint/no-var-requires': 'off',
        '@typescript-eslint/no-require-imports': 'off'
      }
    }
  ],
  settings: {
    'import/resolver': {
      typescript: {},
    },
    react: {
      createClass: 'createReactClass',
      pragma: 'React',
      fragment: 'Fragment',
      version: 'detect',
    },
    propWrapperFunctions: [
      'forbidExtraProps',
      {property: 'freeze', object: 'Object'},
      {property: 'myFavoriteWrapper'},
      {property: 'forbidExtraProps', exact: true}
    ],
    componentWrapperFunctions: [
      'observer',
      {property: 'styled'},
      {property: 'observer', object: 'Mobx'},
      {property: 'observer', object: '<pragma>'}
    ],
    formComponents: [
      'CustomForm',
      {name: 'Form', formAttribute: 'endpoint'}
    ],
    linkComponents: [
      'Hyperlink',
      {name: 'Link', linkAttribute: 'to'}
    ]
  }
}

package.json 脚本修正 #

将lint:fix脚本替换为以下内容，解决跨平台glob匹配失效问题：

"lint:fix": "eslint --fix \"src/**/*.{ts,tsx,js,jsx,json}\" \"./*.{js,cjs,ts}\""

问题对应修复说明 #

• 针对'React' is defined but never used报错无法自动修复问题：原有配置未指定TS解析器，且extends顺序错误导致React JSX运行时规则优先级低于TS校验规则。修正后ESLint可正确识别React17+新JSX转换无需手动导入React的特性，执行--fix时会自动删除文件中多余的React导入，同时规则中添加了React变量的忽略校验逻辑，避免误报。
• 针对lint:fix无法修复所有可修复问题：原有脚本使用单引号包裹glob路径，Windows环境下shell无法正确解析导致匹配文件不全；同时未引入Prettier推荐配置，ESLint与Prettier规则冲突会中断自动修复流程。修正脚本写法、调整extends加载顺序后可解决该问题。
• 针对Node.js代码报no-var-requires错误：通过overrides配置块单独匹配Node环境相关文件（构建配置、脚本文件等），为其开启node运行时并关闭require相关校验规则，不会影响src目录下前端浏览器代码的校验逻辑，实现前后端代码规则兼容。

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