为何ESLint持续报错React组件Icon prop未使用？代码实际正常运行

问题原因 #

ESLint核心规则里的no-unused-vars只能识别JavaScript逻辑中的变量引用，没办法解析JSX语法里作为组件使用的大写变量（比如你代码里的<Icon />调用）。你当前的ESLint配置只启用了核心JS规则和React Hooks规则，缺少专门处理JSX变量检查的React插件规则，导致ESLint无法识别你在JSX中使用的Icon变量。

解决办法 #

方法一：安装并配置eslint-plugin-react插件（推荐） #

这个插件提供了针对React/JSX的专属检查规则，能正确识别JSX中的组件使用场景。

1. 安装依赖：

npm install eslint-plugin-react --save-dev
# 或使用yarn
yarn add eslint-plugin-react --dev

2. 修改ESLint配置文件，添加插件并启用相关规则：

import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'

export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
      'react/jsx-uses-vars': 'error',
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
    settings: {
      react: {
        version: 'detect'
      }
    }
  },
]

方法二：临时禁用单行ESLint检查（不推荐） #

如果不想安装插件，可在解构处添加注释临时屏蔽错误，但这只能解决单个问题，无法覆盖全局类似场景：

const PageLink = ({ icon: /* eslint-disable-next-line no-unused-vars */ Icon, title, ...props }) => (
  <Link
    {...props}
    className={cn(
      "p-2 rounded-xl bg-neutral-100 dark:bg-neutral-800 text-center",
      "flex gap-2 justify-center items-center"
    )}
  >
    <Icon className="size-4" />
    {title}
  </Link>
);

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