在 Visual Studio Code 中自动导入 React 组件 [关闭]

Posted 2023-03-13

【中文标题】在 Visual Studio Code 中自动导入 React 组件 [关闭]

【英文标题】：Auto Import of React Components in Visual Studio Code [closed]

【发布时间】：2020-06-23 12:39:29

【问题描述】：

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

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

还有没有其他插件可以帮助自动导入 React 组件？

【问题讨论】：

2022：这个扩展似乎也适用于 JS：marketplace.visualstudio.com/…

【参考方案1】：

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

【讨论】：

这就是我的页面的样子，并在它旁边写着“此扩展已全局启用”，所以我认为它已启用。我希望看到在这里导入的建议：dropbox.com/s/mwlhijfg1lecox9/autoimport.png?dl=0

问题明确指出他们没有使用 TS，但是这个扩展完全是为自动导入 TS 和 TSX 文件而设计的。不过还是谢谢你的推荐。它引导我走向另一个扩展：marketplace.visualstudio.com/…，它运行良好（也适用于 JS）。

【参考方案2】：

2018 年更新

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

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

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

示例：

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

代码操作/快速修复

缺少的模块将显示为 Code Action（又名“快速修复”），并带有导入选项。你可以点击灯泡?或使用Ctrl + .

自动导入/智能感知

Auto Imports 将在您键入时显示可用组件，并在选择时导入它们

进一步阅读

Visual Studio Code Automatic Imports How to add jsconfig.json to existing vscode project w/o breaking it

【讨论】：

我的打字稿组件没有自动导入。从您的示例中，我注意到我的 tsconfig 中不存在 baseUrl 。添加它开始使用我的本地模块填充自动导入建议。谢谢！

要检查一个 JavaScript 文件是否是 JavaScript 项目的一部分，只需在 VS Code 中打开该文件并运行 JavaScript: Go to Project Configuration 命令。此命令打开引用 JavaScript 文件的 jsconfig.json。 -- JavaScript in Visual Studio Code

请更新2021年的答案。

@Tanvirgeek - 自 2021 年起是否有需要纳入的新建议？

@KyleMit - “jsx”：“react”在 2021 年不起作用。我不得不将其转换为：“jsx”：“react-jsx”

【参考方案3】：

我通过在 vscode 中打开单个项目文件夹 /project/my-project 解决了这个问题.... 似乎所有 .js 配置都是以这种方式自动配置的。

在此之前，我打开了 /projects 文件夹，里面有多个项目，导入建议和其他东西根本不起作用。

【讨论】：

谢谢，我的正面和背面同时打开了，你找到如何处理这两个项目了吗？

我没有尝试。我的猜测是您可以使用两个单独的 vs 窗口，然后分别打开每个项目的文件夹。如果 vscode “理解”你的项目的语言（在这种情况下反应），它应该自动导入所需的类。或者至少建议。