Visual Studio 代码自动导入答案

【问题标题】：Visual Studio Code Automatic ImportsVisual Studio 代码自动导入
【发布时间】：2016-11-07 17:08:08
【问题描述】：

我正在从 Webstorm 迁移到 Visual Studio Code。 Webstorm 的表现非常糟糕。

Visual Studio 代码对于查找我需要的依赖项并导入它们并不是很有帮助。到目前为止，我一直在手动执行此操作，但老实说，我宁愿等待 15 秒让 webstorm 找到并添加我必须手动挖掘的导入。

我正在使用来自 @minko-gechev https://github.com/mgechev/angular2-seed 的 angular2 种子

我的 baseDir 中有一个 tsconfig.json，如下所示：

    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "node_modules",
    "dist",
    "typings/index.d.ts",
    "typings/modules",
    "src"
  ],
  "compileOnSave": false
}

我的 src/client 目录中还有一个如下所示：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true
  }
}

我不知道为什么有两个。 angualr 种子项目使用 typescript gulp 构建任务，所以我猜编译是不同的。

我能做些什么让 vscode 更有帮助？？

【问题讨论】：

试一试alm.tools ????
:-) 目前正在经历同样的事情。你找到解决办法了吗？
是的 - 我发现一切都是通过扩展添加的。尝试“自动导入”“打字稿导入帮助”“tsd-recommender”“npm intellisense”
我尝试了“自动导入”扩展，但它有点挂起，同时表明它正在“扫描”。我在 Windows 10 上。有人有同样的问题吗？
@reach4thelasers 嘿，我也处于与您尝试查找扩展等相同的位置，我已经安装了您在上面指定的扩展，然后我复制了您在照片中提到的代码但是我仍然在 PipeTransform 下收到红色错误它没有让我选择自动导入它，而是我收到了您在照片中显示的错误...您设法解决了这个问题吗？

标签： typescript angular visual-studio-code

【解决方案1】：

我通过安装下面的各种插件来完成这项工作。

大多数情况下，只要我输入类名，事情就会自行导入。或者，会出现一个灯泡，您可以单击它。或者你可以按 F1，然后输入“import...”，那里也有各种选项。我有点使用它们。 F1实现接口的实现也很有帮助，但并不总是有效。

插件列表

扩展截图

^{*点击查看完整分辨率}

【讨论】：

您是否需要修改任何配置文件？还是简单的安装和启用？
不，我认为不需要任何配置修改。我的 settings.json 中唯一的内容是 "typescript.tsdk": "node_modules/typescript/lib/" 它强制 vscode 使用 node_modules 中的 typescript 版本，而不是系统上安装的版本。
仅供参考，packages.json 中的 typescript 版本是 "typescript": "2.0.3",
您能否提供插件列表，因为您的附加图像不再可见？
TypeScript Importer 效果很好，也适用于自定义rootDirs 或在tsconfig.json 中使用paths 的映射。它修复了损坏的 VS Code 自动导入。

【解决方案2】：

有一个Visual Studio Code issue，您可以跟踪并为此功能点赞。还有一个User Voice issue，但我相信他们将投票转移到 GitHub 问题上。

他们似乎想要 TypeScript 中的自动导入功能，所以它可以被重用。 TypeScript auto import issue to track and thumbs up here.

【讨论】：

【解决方案3】：

我使用了 steoates 的 Auto Import 插件，非常简单。

为所有可用的导入自动查找、解析并提供代码操作和代码完成。适用于 Typescript 和 TSX。

【讨论】：

我可以确认这个插件运行良好。它甚至忽略了我的index.ts。默认情况下，VS Code 想要从我的 index.ts 文件中导入。很好的答案！
不幸的是没有帮助我，仍然无法从node_modules中的模块自动导入:(
添加这个扩展对我有用。它正确地从@angular/core 自动导入了EventEmitter（因为它是快速修复的红线）。如果没有那个扩展，它会从protractor 导入EventEmitter（这不是我想要的）。我对 MS VSCode 维护者@MattBierner 有一个关于不同导入源的问题。
自动导入 TypeScript 支持！
我刚刚安装了它，对我来说工作正常。

【解决方案4】：

如果最近有人遇到过这个问题，我发现我必须添加一个设置才能使用我工作区的打字稿版本，以便自动导入工作。为此，请将此行添加到您的 workspace 设置中：

{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

然后，在 vscode 中打开一个 typescript 文件，点击右下角的 typescript 版本号。当顶部的选项出现时，选择“使用工作区版本”，然后重新加载 vscode。

现在自动导入应该可以工作了。

【讨论】：

这不是必须的。使用 VS Code 的 typescript 捆绑版本进行自动导入
@MattBierner 就我而言，这是必要的，因为我在 linux (CentOS) 上使用 VScode。直到我指出 Typescript 的工作区安装，自动导入才起作用，它比 VScode 附带的要旧得多
这在几乎所有情况下都不是好的建议。如果您没有看到自动导入与 typescript 的捆绑版本一起使用，请提交错误报告：github.com/Microsoft/vscode/issues/new?template=bug_report.md
@MattBierner 在问答网站的上下文中，这是一个很好的建议。当自动导入不起作用时，知道这是一个错误并不能解决他们的问题。我们不想等待这个边缘案例的错误修复，我不会在有数万个问题的回购中提交另一个错误。最后我想指出this is the advice that is prescribed on the VScode website
所以当自动导入不起作用，并且我使用了一堆扩展时，我怎么知道使用 VS Code 而不是其中一个扩展来提交错误报告？

【解决方案5】：

现在是 2018 年。在 Javascript（只要您的 jsconfig.json 文件中有 checkjs: true）和 TypeScript 中的自动导入，您不需要任何扩展。

有两种类型的自动导入：添加缺失导入quick fix，它在错误时显示为灯泡：

还有auto import suggestions。这些会在您键入时显示建议项目。或者，您可以选择文本并按 Ctrl + Space 以显示建议列表。接受自动导入建议会自动在文件顶部添加导入

两者都应该使用 JavaScript 和 TypeScript 开箱即用。如果自动导入仍然不适合您，请open an issue

【讨论】：

是的，自动导入在 Mac 上开箱即用，无论您的项目的打字稿版本是否与 VScode 随附的版本匹配，但在其他操作系统（即 linux）中，情况并非如此，并且您必须指向工作区的 TS 版本，正如我在回答中所解释的那样。
这是不正确的。如果我上面描述的内容不起作用，那是一个错误，您应该提交一个错误报告。我是 VS Code 的 JS/TS 支持的维护者并实现了这些功能
这个有热键吗？我不想每次想在 Mac 上导入 cmd+. 的东西时都点击灯泡
@Tonio cmd+. 在 Mac 上
@MattBierner 这也应该自动导入 Angular 组件吗？从截图来看，似乎是OP的意思。

【解决方案6】：

如果您使用 Angular，请检查 tsconfig.json 是否包含错误。（在问题终端中）

出于某种原因，我将这些行加倍，但它对我不起作用

{
  "module": "esnext",
  "moduleResolution": "node",
}

【讨论】：

【解决方案7】：

我在 Typescript 版本 3.8.3 上遇到过这个问题。

Intellisense 是我们可以拥有的最好的东西，但对我来说，自动导入功能似乎也不起作用。即使自动导入不起作用，我也尝试安装扩展程序。我已经重新检查了与扩展相关的所有设置。最后，当我从

清除缓存时，自动导入功能开始工作

C:\Users\用户名\AppData\Roaming\Code\Cache

& 重新加载 VSCode

注意：AppData 只能在用户名中可见，如果您选择从（查看）菜单中显示（隐藏项）。

在某些情况下，我们最终可能会认为存在与导入相关的错误，而实际上，我们可能在不知不觉中使用了已弃用的功能或 Angular 中的 API。

例如：如果您尝试编写类似这样的代码

构造函数（http:Http）{

//...}

在新版本中 Http 已被弃用并替换为 HttpClient 的地方，因此我们最终可能会认为与此相关的错误可能与自动导入错误有关。更多信息可以参考Deprecated APIs and Features

【讨论】：

【解决方案8】：

VS Code 现在开箱即用地支持此功能，但似乎该功能有时有效，有时无效。据我所知，VS Code 必须加载自动导入所需的数据，这或多或少是这样的：

从本地文件中加载所有导出的数据
从 node_modules/@types 加载所有导出的数据
仅当您的任何本地文件正在导入它们时，才从 node_modules/{packageName} 加载所有导出的数据

在此评论中对此进行了更好的描述：https://github.com/microsoft/TypeScript/issues/31763#issuecomment-537226190。

由于 VS Code 或特定包的类型声明中的错误，最后两点并不总是有效。这就是我的情况，我在普通的 Create-React-App 中看不到 react-bootstrap 自动导入。最终修复它的是手动将包文件夹从 node_modules 复制到 node_modules/@types 并只留下类型声明文件，例如按钮.d.ts。这不是很好，因为如果您删除 node_modules 文件夹，它将再次停止工作。但我更喜欢这个，因为我总是不得不手动输入导入。这是我尝试这些方法但失败后的最后手段：

更新 VS 代码 (v. 1.45.1)
为您的包安装类型，例如npm install --save @types/react-bootstrap
添加 jsconfig.json 文件并按照其他人的建议使用设置
试用所有自动导入插件

【讨论】：

【解决方案9】：

我正在使用 Devin Abbott 的“ImportJS”插件进行自动导入，您可以使用下面的代码安装它

npm install --global import-js

【讨论】：

【解决方案10】：

在 tsconfig.app.json 中，标准的 Angular 10 应用具有：

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

一旦我将包含更改为：

  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts"
  ]

它对我有用

【讨论】：

非常感谢，您的解决方案确实有效。问题出在 tsconfig 首选项中，事实证明，但不在 IDE 中。
我最好在tsconfig.editor.json 中添加您的解决方案））在我对tsconfig.app.json 进行更改后，应用程序构建被破坏）

【解决方案11】：

Typescript Importer 确实为我完成了这项工作

https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter

它会自动在你的工作空间内搜索打字稿定义，当你按下回车键时它会导入它。

【讨论】：

【解决方案12】：

在tsconfig.editor.json中的JSON对象的第一级中填写include属性，如下所示：

"include": [
  "src/**/*.ts"
]

它对我很有效。

如果需要，您还可以添加另一个 Typescript 文件扩展名，如下所示：

"include": [
  "src/**/*.ts",
  "src/**/*.spec.ts",
  "src/**/*.d.ts"
]

【讨论】：

【解决方案13】：

在 tsconfig.json 中添加“typeRoots”属性：

"typeRoots": [
      "node_modules/@types",
      "node_modules/@angular",
      "node_modules/@angular/common/http"
    ]

您可以添加任何其他必要的路径。

【讨论】：

【解决方案14】：

VScode 1.57（2021 年 5 月）提醒我们（现在）native 自动导入功能，并且...对其进行了改进：

导入语句中的补全

JavaScript 和 TypeScript 中的自动导入会在您接受建议时自动添加导入。

使用 VS Code 1.57，它们现在在编写导入语句本身时也可以工作：

如果您需要手动添加导入，这可以节省时间。

【讨论】：

【解决方案15】：

对于 Javascript 项目：

设置 Check JS 设置标志对我有用。
无需在项目中创建jsconfig.json

【讨论】：

【解决方案16】：

在 ReactJs 或 React-Native 等 JavaScript 项目中，只需按照这些步骤操作即可。

首先删除所有自动导入插件，因为vc代码自动包含此功能。
在项目的根目录中添加一个名为 jsconfig.json 的新文件
现在添加这段代码：
```
{
   "exclude": ["node_modules"]
}
```

【讨论】：