在 Webstorm 中，ESLint 无法识别 React 类型

Question

I have started a new create-react-app (CRA) project to replace an existing React project that did not use CRA. The project is using TypeScript and my IDE is WebStorm.

My package.json file contains the following modules in 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"

An example of one component is as follows:

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

ESLint / WebStorm complains with the following error:

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

My code still compiles without any errors or warnings and my website works without any issues. My previous project did not have any issues recognizing TypeScript types. I have the @types modules installed. I think the relevant parts of .eslintrc, tsconfig.json and the relevant settings in WebStorm are identical.

Does anyone have any insight?

Answer 1

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