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

Question

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

问题 1

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

当我键入名称并点击 Ctrl + Space 时，它不会自动导入 class。

我也试过Alt + Enter，它在列表中没有导入建议。

问题 2

然后我手动导入了 class，现在 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

您正在使用 named export syntax (export function alertMessage()), but importing it as default, aliasing it to Utility; the IDE can't know what Utility is, thus no completion/autoimport is provided. Either change your export to default, or import your function using named import 语法导出函数

Answer 2

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

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

• 展开JavaScript->库

• 使用react时，建议添加：react; react-dom; react-native（用于移动应用开发）

• 完成后单击 Apply

Answer 3

只需安装 @types/react-native 以获得建议、类型提示和自动导入。

Npm

npm install @types/react-native

纱线

yarn add @types/react-native

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