在 Visual Studio Code 中自动导入 React 组件

Question

我正在使用 JavaScript（不是 TypeScript）并使用最新的 Visual Studio Code。

我无法使组件的自动导入工作。我一直在使用steoates的Auto Import 插件，但它似乎不起作用。我最近没有看到任何关于此的说明。

是否有其他我没有发现的插件有助于自动导入 React 组件？

Answer 1

2018 年更新

VS Code 现在通过 ajsconfig.json和JavaScript Language Service本地处理这个。

jsconfig.json在您的项目根目录创建文件并确保设置checkJs为true：

创建 JS 配置文件，允许 Visual Studio 将文件夹视为显式项目。没有它，在 VS Code 中打开的 JS 文件被视为独立的单元，任何两个文件之间都没有共同的项目上下文。

{
  "compilerOptions": {
    "baseUrl": "./src",
    "checkJs": true,
    "jsx": "react"
  }
}

缺少的模块将显示一个代码操作（又名“快速修复”），并带有一个导入选项。您可以单击灯泡或使用Ctrl+.

自动导入将在您键入时显示可用组件并在选择时导入它们

我的打字稿组件没有自动导入。从你的例子中我注意到 *baseUrl* 不存在于我的 tsconfig 中。添加后开始使用我的本地模块填充自动导入建议。谢谢！ (3认同)
请更新 2021 年的答案。 (2认同)
@KyleMit - "jsx": "react" 在 2021 年不起作用。我必须将其转换为： "jsx": "react-jsx" (2认同)

Answer 2

通过导航到“扩展”> 搜索“自动导入”来仔细检查该扩展是否已启用。您应该看到以下内容：