Visual Studio Code 自动导入

Question

我正在从Webstorm迁移到Visual Studio Code。Webstorm的性能很差。

Visual Studio Code在查找和导入依赖项方面并不是很有帮助。到目前为止，我一直在手动完成这些操作，但说实话，我宁愿等待15秒钟让Webstorm自动查找和添加我的import，也不愿意手动寻找。

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

我在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
  }
}

我不知道为什么会有两个。Angular Seed项目使用TypeScript Gulp构建任务，所以我猜编译是不同的。

我该怎么做才能让VSCode更有帮助呢？

- reach4thelasers

---

试用一下 http://alm.tools/ - basarat

你现在也遇到了同样的问题吗？你找到解决方案了吗？ - Rico Leuthold

是的 - 我发现所有的东西都是通过扩展添加的。尝试使用“自动导入”、“TypeScript 导入辅助”、“tsd-recommender”、“npm 智能感知”。 - reach4thelasers

@reach4thelasers 嘿，我和你一样也在尝试寻找扩展等方面的解决方法。我已经安装了你上面提到的扩展，并复制了你在照片中提到的代码，但是在 PipeTransform 下仍然出现了红色错误，它没有给我自动导入的选项，而是显示了你照片中显示的错误... 你最终解决了这个问题吗？ - Code Ratchet

嘿 @CodeRatchet，我发布了一个包含我的扩展列表和更多信息的答案。 - reach4thelasers

Answer 1

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

有两种类型的自动导入：添加缺失导入快速修复，它会在错误时显示为灯泡：

还有自动导入建议。当您输入时，它们会显示建议项。或者您可以选择文本并按Ctrl+Space来弹出建议列表。接受自动导入建议会自动将导入添加到文件顶部。

这两个功能应该都可以与 JavaScript 和 TypeScript 直接使用。如果自动导入对您仍然无效，请提交问题

- Matt Bierner

---

是的，在 Mac 上，自动导入功能非常好用，无论您的项目版本的 TypeScript 是否与 VScode 一起发布的版本匹配。但在其他操作系统上，特别是 Linux 上，情况并非如此，您必须像我在答案中解释的那样指向工作区的 TypeScript 版本。 - inorganik

不正确。如果我上面描述的方法不起作用，那就是个bug，你应该提供一个bug报告。我是VS Code JS/TS支持的维护人员，并且实现了这些功能。 - Matt Bierner

有没有快捷键可以完成这个操作？我不想每次想要导入东西时都要点击灯泡。在Mac上是cmd+.。 - buncis

@Tonio cmd+. on Mac - buncis

@Matt Bierner。感谢您在VS Code上的工作。在VS Code 1.56.1中，似乎checkjs不是允许的属性，但是"checkJs": true可以正常工作。 - Derek Hill

Answer 2

我通过安装以下各种插件使之正常工作。

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

插件列表

• npm 智能提示
• 针对 Angular 2 的 ngrx 代码片段
• TypeScript 工具箱
• npm
• TsTools
• Angular 代码片段 (版本 9)
• 类型自动安装程序
• Chrome 调试器
• TypeScript 导入工具

TypeScript Hero

vscode-icons

Add Angular Files

扩展插件截图

^{* 点击查看高清版本}

- reach4thelasers

---

不，我认为不需要进行任何配置修改。我的 settings.json 中唯一的设置是 "typescript.tsdk": "node_modules/typescript/lib/"，这会强制 vscode 使用 node_modules 中的 typescript 版本，而不是系统中安装的版本。 - reach4thelasers

我的 typescript 版本从 packages.json 中获取，为 "typescript": "2.0.3"。 - reach4thelasers

请您提供插件列表，因为您附加的图片已无法查看。 - watery

TypeScript Importer 可以很好地工作，即使使用了自定义的 rootDirs 或者通过 tsconfig.json 中的 paths 进行了映射。它修复了 VS Code 的自动导入功能中的问题。 - Lion

@Lion 你能否让Typescript Importer在创建新文件时使用tsconfig.json中的“paths”？对我而言，tsconfig.json中的“paths”只有在将文件导入项目后才有效。 - Jonathan002

Answer 3

我使用了由steoates制作的Auto Import插件，它非常容易使用。

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

- Alireza Fattahi

---

我可以确认这个插件运行良好。它甚至忽略了我的 index.ts 文件。默认情况下，VS Code 希望从我的 index.ts 文件中进行导入。好的答案！ - erikvimz

很遗憾没有帮到我，仍然无法从node_modules中自动导入模块 :( - Pavel

添加这个扩展程序对我很有用。它可以正确地自动导入 @angular/core 中的 EventEmitter（因为它在快速修复中被标记为红线）。如果没有这个扩展程序，它会从 protractor 导入 EventEmitter（这不是我想要的）。我在这里向 MS VSCode 维护者 @MattBierner 提出了一个关于不同导入源的问题。 - Chris22

自动导入TypeScript支持非常棒！ - Konrad G

我刚刚安装了它，对我来说运行良好。 - Arefe

Answer 4

在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 代码更改为：

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

它对我起作用了

- Vương Hữu Thiện

---

非常感谢，您的解决方案确实有效。事实证明，问题出在 tsconfig 首选项上，而不是 IDE 上。 - ame

最好将您的解决方案添加到 tsconfig.editor.json 中。在我对 tsconfig.app.json 进行更改后，应用程序构建出现了问题。 - ame

这就是我需要修复在使用tsconfig路径配置时，引用另一个目录中的节点模块时缺少导入的问题。谢谢。 - Nathan Buesgens

Answer 5

对于JavaScript项目：

• 设置Check JS选项即可生效。
• 无需在项目中创建jsconfig.json文件。

- Exodus 4D

---

非常感谢您提供的答案！现在一切都按照预期正常运行了！ - skiabox

Answer 6

如果有人最近遇到这个问题，我发现我必须添加一个设置来使用工作区版本的typescript才能使自动导入正常工作。要做到这一点，请将此行添加到您的工作区设置中：

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

然后，在 VS Code 中打开一个 TypeScript 文件，点击右下角的TypeScript 版本号。当顶部出现选项时，请选择"use workspace version"，然后重新加载 VS Code。

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

- inorganik

---

这并不是必需的。自动导入使用VS Code捆绑的TypeScript版本即可工作。 - Matt Bierner

在我的情况下，这是必要的，因为我在Linux（CentOS）上使用VScode。自动导入在我指向工作区安装的Typescript时才能正常工作，而这个版本比随VScode附带的要旧得多。 - inorganik

在几乎所有情况下，这都不是好建议。如果您发现自动导入与 TypeScript 捆绑版本不起作用，请提交错误报告：https://github.com/Microsoft/vscode/issues/new?template=bug_report.md - Matt Bierner

在问答网站的背景下，这是很好的建议。当自动导入无法工作时，知道这是一个错误并不能解决他们的问题。我们不想等待修复这个边缘情况的错误，并且我也不会在有成千上万个问题的存储库中再次提交错误报告。最后，我只想指出，这是VScode网站上推荐的建议。 - inorganik

当自动导入无法正常工作，而我正在使用大量扩展时，如何知道应该向VS Code提交错误报告，而不是其中一个扩展？ - Andrew Koster

Answer 7

我也遇到了同样的问题：Visual Studio Code（v.1.45.1）不会自动为我的某个typescript项目添加导入。在我的情况下，这个问题是特定于项目的，没有必要向VS Code添加扩展。

解决方法：

1. 将"importHelpers": true添加到tsconfig.json文件的compileOptions部分。
2. 重新启动VS Code。

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
...
  },

- Peter Tarlos

Answer 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，并仅留下类型声明文件，例如Button.d.ts。这不是很好的解决方案，因为如果你删除了node_modules文件夹，它又会停止工作。但我更喜欢这种方法而不是总是手动输入导入语句。 在经过以下尝试失败后，这是我的最后一招：

• 更新VS Code（v.1.45.1）
• 为软件包安装类型，例如npm install --save @types/react-bootstrap
• 添加jsconfig.json文件并按其他人建议的设置进行调整
• 尝试所有自动导入插件

- Michal Ciesielski

Answer 9

在tsconfig.json文件中添加"typeRoots"属性：

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

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

- vizzer

Answer 10

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

由于某些原因，我重复了这些行，但对我来说并没有起作用。

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

- ztvmark