自动导入

我正在从 Webstorm 转向 Visual Studio Code。Webstorm 的表现糟糕透顶。

可视化工作室的代码对于找到我需要的依赖项并导入它们没有太大帮助。到目前为止，我一直在手动操作，但是说实话，我宁愿等15秒钟，等待 webstorm 找到并添加我的导入，而这些导入必须手动挖掘。

Screenshot: cannot find import

我用的是@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
}
}

我不知道为什么有两个。安哥拉语种子项目使用打字稿吞建任务，所以我猜编译是不同的。

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

303391 次浏览
小开
最佳答案

我通过安装下面的各种插件来实现这个功能。

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

插件列表

扩展的屏幕截图

screenshot of extensions
* < em > 点击查看完整解析度

小开

有一个 VisualStudio 代码问题，你可以跟踪和拇指为这个功能。也有一个 用户声音问题，但我相信他们转移到 GitHub 的问题投票。

似乎他们想要 TypeScript 中的自动导入功能，所以它可以被重用。

小开

我使用了 汽车进口的插件，这是相当容易的脂肪酸盐。

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

小开

如果最近有人碰到这个问题，我发现我必须添加一个设置来使用我的工作区版本的自动导入工作。为此，在 工作空间设置中添加以下代码行:

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

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

现在，自动进口应该会起作用。

小开

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

有两种类型的自动导入: 添加缺失的导入 快速解决，它在错误时显示为一个灯泡:

enter image description here

还有 汽车进口建议。当您键入时，它们会显示一个建议项。或者您可以选择文本，然后按 Ctrl + Space 以显示建议列表。接受自动导入建议会自动将导入添加到文件的顶部

enter image description here

JavaScript 和 TypeScript 应该可以开箱即用。如果汽车进口仍然不为您工作，请 打开一个问题

小开

如果您使用的是角度，请检查 tsconfig.json不包含错误。(在问题终端)

出于某种原因，我把这些线翻了一倍，但对我没用

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

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

智能感知是我们能够拥有的最好的东西，但是对我来说，自动导入功能似乎也不起作用。我试过安装一个扩展，即使自动导入不起作用。我重新检查了所有与分机相关的设置。最后，当我清除缓存时，自动导入特性开始工作

C: 用户用户名 AppData 漫游代码缓存

重新载入 VSCode

注意: AppData 只能在用户名中可见，如果您从(视图)菜单中选择“显示(隐藏项)”。

在某些情况下，我们可能最终会认为存在与导入相关的错误，而实际上，我们可能在不知不觉中使用不推荐的特性或 API 进行编码。

例如: 如果您正在尝试编写这样的代码

构造函数(Http://Http){

//...}

在新版本中，Http 已经不被推荐使用并被 HttpClient 替换，因此我们可能最终会认为与此相关的错误可能与自动导入错误有关。有关详细信息，请参阅 已废弃的 API 和特性

小开

VS Code 现在开箱即用地支持这个特性，但是这个特性有时可以工作，有时似乎不能。据我所知，VS Code 必须加载自动导入所需的数据，这种情况大致如下:

  • 从本地文件加载所有导出的数据
  • 从 node _ module/@type 加载所有导出的数据
  • 仅当您的任何本地文件正在导入数据时，才从 node _ module/{ packageName }加载所有导出的数据

这在下面的评论中有更好的描述: https://github.com/microsoft/TypeScript/issues/31763#issuecomment-537226190。

由于 VS Code 或特定包类型声明中的 bug，最后两点并不总是有效。这就是我的情况，我不能看到反应引导自动导入在一个普通的创建反应应用程序。最终修复它的方法是手动将包文件夹从 node _ module 复制到 node _ module/@type，只保留类型声明文件，例如 Button.d.ts。这不是很好，因为如果您删除 node _ module 文件夹，它将再次停止工作。但是我更喜欢这样做，因为总是需要手动输入导入。 这是我在尝试这些方法失败后的最后一招:

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

我使用’进口 JS’插件由德文雅培的自动导入，你可以 使用下面的代码安装

npm install --global import-js

小开

在 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 like:

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

这招对我很管用 It worked for me

小开

类型脚本导入器确实为我做这项工作

Https://marketplace.visualstudio.com/items?itemname=pmneo.tsimporter

它会自动在您的工作区中搜索类型脚本定义，当您按回车键时，它会导入它。

小开

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

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

对我很有效。

如果需要，你也可以添加另一个类型脚本文件扩展名，比如:

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

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

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

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

小开

VScode 1.57(2021年5月)提醒我们(现在) 本地人自动导入功能，并... 改进它:

导入语句的完成

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

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

Auto imports in an import statement -- https://media.githubusercontent.com/media/microsoft/vscode-docs/3e7e9293475f03a5263084d659f9dea6bf06dcc4/release-notes/images/1_57/ts-import.gif

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

小开

对于 Javascript 项目:

  • 设置 Check JS设置标志为我工作。
  • 不需要在项目中创建 jsconfig.json

enter image description here

enter image description here

小开

在 ReactJs 或 React- 本机等 JavaScript 项目中，只需按照以下步骤操作即可。

  1. 首先删除所有的自动导入插件，因为 vc 代码会自动包含这个特性。

  2. 在项目的根目录中添加一个名为 jsconfig.json 的新文件

  3. 现在添加以下代码:

    {
"exclude": ["node_modules"]
}
小开

我也有同样的问题: Visual Studio Code (v. 1.45.1)没有为我的一个打印脚本项目自动添加导入。在我的案例中，问题是特定于项目的，不需要向 VS Code 添加任何扩展。

解决方案:

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

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,
...
},

提交答案