Webstorm 中的 ESLint 无法识别 React 类型

Posted 2023-02-21

【中文标题】Webstorm 中的 ESLint 无法识别 React 类型

【英文标题】：React Types not being recognized by ESLint in Webstorm

【发布时间】：2021-02-01 13:57:03

【问题描述】：

我已经启动了一个新的 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中的相关设置是一致的。

有人有什么见解吗？

【问题讨论】：

你在使用 create-react-app 吗？

这能回答你的问题吗？ ESLint with React gives `no-unused-vars` errors

是的，我正在使用 create-react-app。感谢您的建议。不幸的是，他们没有解决问题。

【参考方案1】：

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