Webstorm 中的 ESLint 无法识别 React 类型

Question

我已经启动了一个新的 create-react-app (CRA) 项目来替换未使用 CRA 的现有 React 项目。该项目使用 TypeScript，我的 IDE 是 WebStorm。

我的 package.json 文件在 devDependencies 中包含以下模块：

"@types/react": "~16.9.50",
"@typescript-eslint/eslint-plugin": "~4.3.0",
"eslint": "6.6.0",
"eslint-config-airbnb-typescript": "~11.0.0",
"eslint-plugin-import": "~2.22.1",
"eslint-plugin-jsx-a11y": "~6.3.1",
"eslint-plugin-react": "~7.21.3",
"eslint-plugin-react-hooks": "~4.1.2",
"typescript": "~4.0.3"

一个组件的示例如下：

import React, { FunctionComponent } from 'react';
const Content: FunctionComponent = () => (
  <div>Hello</div>
);
export { Content };

ESLint / WebStorm 报错如下：

ESLint: 'FunctionComponent' is defined but never used.(@typescript-eslint/no-unused-vars)

我的代码仍然可以编译，没有任何错误或警告，我的网站也可以正常运行。我之前的项目在识别 TypeScript 类型时没有任何问题。我安装了@types 模块。我认为.eslintrc、tsconfig.json的相关部分和WebStorm中的相关设置是一致的。

有人有什么见解吗？

Answer 1

我通过升级到 react-scripts 4.0 解决了这个问题