reactjs - 如何正确导出模块以便 vscode 可以在建议中显示我的模块 [ctrl+space]？

Question

我有一个设置样式文件，例如:

GlobalStyles.js

export const GlobalStyles={
  ViewContainer:{flex:1, justifyContent:'center', alignItems:'center'},
  Center:{justifyContent:'center', alignItems:'center'},
  FontNormal:15,
  FontMedium:18,
  FontLarge:28,
  FontHeader:38
}

module.export={GlobalStyles}

当我在另一个 JS 文件中使用它时，比如说 Home.js。我想让 vscode 知道我定义的每个 Key:Value，

在 GlobalStyles.js 中导出的 vscode 建议这样的导入样式:

import { GlobalStyles } from '../Component/GlobalStyles';

我的预期结果是这样的:

import { ViewContainer, Center, FontMedium, [and so on]} from '../Component/GlobalStyles';

当我输入foo时，如何让vscode建议我从path/to/GlobalStyles自动导入foo？其中 foo 类似于 ViewContainer、Center、FontMedium、[等等]。

Answer 1

您正在谈论的功能称为 Auto Imports 。为了回答您的问题，此功能在 VSCode 中默认存在且有效。

这是我在 React 项目中如何使用它的示例。这里我在同名文件夹中有一个组件。该文件夹之外有一个我称为 ModuleExports.js 的文件，它当前具有以下代码。

import Navbar from "./Navbar/Navbar";

export { Navbar };

作为引用，export 是 module.export 的别名，因此请随意互换使用它们。这是一个组件，因此当我尝试使用它时，您可以从屏幕截图中看到我建议导入使用。

无需成为组件也可以完成相同的操作。我将在同一文件 ModuleExports.js 中声明一个 testObject 并将其导出。

然后让我们看看智能感知是否会识别它。

就在那里。我希望这对您有所帮助，并询问您是否需要更多说明或遇到问题。