如何正确导出模块，以便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, [and so on]。

Answer 1

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

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

import Navbar from "./Navbar/Navbar";

export { Navbar };

作为参考，导出是module.export的别名，因此可以互换使用它们。这是一个组件，因此当我尝试使用它时，可以从屏幕快照中看到我建议使用的导入。

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

然后让我们看一下intellisense是否会捡起它。

有。我希望这会有所帮助，并请问您是否需要进一步说明或遇到问题。

Answer 2

在这种情况下，错误似乎是使用动态导出。那是旧的CommonJs样式。 VSCode使用打字稿工具进行静态分析。要利用这一点，您必须使用ES6 export。

常见问题：module.export={GlobalStyles}

ES6-modules：export GlobalStyles

两者之间的显着区别是CommonJs变量只是在运行时定义的变量。就是不执行代码就无法知道要导出的内容。 ES6 export是保留字。它的构造在定义后不能更改，这也意味着它的类型定义可以在不实际执行代码的情况下找到。

Typescript，Babel等提供了两个模块系统之间的互操作性，但按规范它们是两个截然不同的东西。