ESLint最新版本no-unused-vars规则对React组件误报求助

核心原因 #

ESLint默认的no-unused-vars规则无法自动识别JSX中使用的React组件，需要借助eslint-plugin-react的专属规则补充检测逻辑。你之前依赖的旧版pluginReact.configs.flat.recommended其实已经包含了这个补充规则，但升级ESLint后要确保配置方式正确匹配新版本要求。

解决步骤 #

1. 安装最新版eslint-plugin-react
   先确保依赖为最新兼容版本：

   npm install eslint-plugin-react --save-dev
   

2. 调整eslint.config.mjs配置
   不需要引入@stylistic/eslint-plugin-jsx（它仅负责JSX格式规范，和变量使用检测无关），正确配置示例如下：

   import pluginJs from '@eslint/js';
   import pluginReact from 'eslint-plugin-react';
   
   export default [
     // 保留原有的JS推荐规则
     pluginJs.configs.recommended,
     // 启用React的扁平推荐配置（关键：内置识别JSX变量的规则）
     pluginReact.configs.flat.recommended,
     {
       // 限定规则作用于React文件
       files: ['**/*.jsx', '**/*.tsx'],
       languageOptions: {
         globals: {
           React: 'readonly'
         }
       },
       // 可根据需求自定义规则，优先保留React插件的检测逻辑
       rules: {
         // 强制开启JSX变量检测规则，解决误报核心
         'react/jsx-uses-vars': 'error',
         // 自定义no-unused-vars规则（如果需要）
         'no-unused-vars': ['error', {
           vars: 'all',
           args: 'after-used',
           ignoreRestSiblings: true
         }]
       }
     }
   ];
   

关键说明 #

• react/jsx-uses-vars是解决误报的核心规则，它会告知ESLint：JSX中使用的组件/变量属于已使用状态，不会触发no-unused-vars报错。
• 必须确保配置中正确导入并启用了eslint-plugin-react的扁平推荐配置，或者手动开启react/jsx-uses-vars规则，二者选其一即可（推荐直接用官方推荐配置，避免遗漏其他React相关规则）。

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