WebStorm 自动完成和自动导入不起作用

Question

我在 WebStorm 中从事 React-Native 工作。

问题1

我有一些课程，我想使用WebStorm的自动导入功能，它适用于某些课程，但不适用于所有课程。

当我输入名称并点击

Ctrl + Space

时，它不会自动导入类。

我也尝试了

Alt + Enter

，列表中没有导入建议。

问题2

然后我手动导入了该类，现在WebStorm无法显示自动完成的方法建议，当我按

Ctrl + Space

时，我的方法没有列出在那里。

Utility.js

export function alertMessage(alertMessage) {
  Alert.alert(
    "Alert",
    alertMessage,
    [{ text: "OK", onPress: () => console.log("OK Pressed") }],
    { cancelable: false }
  );
}

我是否缺少 WebStorm 的某些设置？我想提高我的生产力。

Answer 1

在开发任何（不仅仅是 React）应用程序时实现正确代码完成的最简单方法是通过 IDE 本身添加对所需类型脚本库的支持。假设您使用

Web Storm

IDE 进行开发：

• 前往

  Settings (Ctrl + Alt + S) -> Languages & Frameworks

• 展开JavaScript->库

• 使用react时，我建议添加：

  react; react-dom; react-native

  （用于移动应用开发）

• 完成后点击

  Apply

Answer 2

您正在使用 named export 语法 (

export function alertMessage()

) 导出函数，但将其作为默认值导入，并将其别名为

Utility

； IDE 无法知道

Utility

是什么，因此不提供完成/自动导入。将导出更改为默认值，或使用 named import 语法

导入函数

Answer 3

只需安装

@types/react-native

即可获取建议、键入提示和自动导入。

Npm

npm install @types/react-native

纱线

yarn add @types/react-native

在 Webstorm 中对我来说就像魅力 :) 在它不是之前。

Answer 4

我对 @tanstack/react-table 也有同样的问题。为了解决这个问题，我从node_modules添加了@tanstack文件夹。

语言和框架 > JavaScript > 库，然后单击添加

这个方法解决了问题。