如何解决ESLint的react/react-in-jsx-scope与TS未使用React警告冲突？

这个冲突的核心原因是React 17及以上版本支持自动JSX转换，不需要手动在文件顶部导入React，但你的ESLint配置还在启用旧规则react/react-in-jsx-scope，强制要求导入React；而导入后TypeScript又会检测到变量未被使用，抛出'React' is declared but its value is never read的提示。

下面是两种针对性的解决办法：

方法一：禁用ESLint的强制React导入规则（推荐） #

直接在ESLint配置文件中关闭react/react-in-jsx-scope规则，适配React 17+的自动JSX转换特性：

1. 打开你的ESLint配置文件（常见的是.eslintrc.js、.eslintrc.json或.eslintrc）
2. 在rules字段中添加：

"react/react-in-jsx-scope": "off"

如果你的配置继承了plugin:react/recommended这类预设规则，需要确保这个覆盖规则在预设之后，保证生效。

方法二：兼容旧版React时的折中方案 #

如果你的项目还需要兼容React 16及以下版本，必须导入React，可以通过以下方式让TypeScript忽略未使用的警告：

• 类型导入（推荐，TypeScript 3.8+支持）：将导入语句改为类型导入，TypeScript会识别这是类型引用，不会检测未使用：

import type React from 'react';

• 临时忽略单文件警告：在导入语句上方添加注释：

// @ts-ignore
import React from 'react';

• 全局关闭未使用变量检测（不推荐）：在tsconfig.json中设置"noUnusedLocals": false，但这会关闭所有文件的未使用变量检测，不利于代码质量。

另外，如果是用Create React App创建的项目，React 17+版本已经默认配置好了相关规则，出现这个问题大概率是你自定义修改了ESLint或TypeScript配置，恢复默认配置即可解决。

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