Question

我正在从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更有帮助？

Answer 1

我通过安装各种插件来实现这一点。这是我的扩展程序列表的屏幕截图。大部分时间，只要我输入类名，就会自行导入。或者，出现一个灯泡，您可以单击。或者你可以推F1，输入＆＃34; import ...＆＃34;那里也有各种各样的选择。我有点使用它们。此外，F1实现界面的实现很有帮助，但并不总是有效。

Answer 2

在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"
  ]

对我有用

Answer 3

现在2018。您不需要任何扩展即可在Javascript和TypeScript中自动导入。

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

还有auto import suggestions。这些内容会在您键入时显示一个建议项。接受自动导入建议会自动将导入添加到文件顶部

两者都应与JavaScript和TypeScript一起使用。如果自动导入仍然不适合您，请open an issue

Answer 4

我使用Auto Import插件很容易。

自动查找，解析并提供代码操作和代码完成所有可用的进口。适用于Typescript和TSX。

您可以在https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

查看其工作原理

Answer 5

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

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

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

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

Answer 6

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自动导入。最终解决的是手动将package文件夹从node_modules复制到node_modules / @ types，仅保留类型声明文件，例如按钮这不是很好，因为如果您删除了node_modules文件夹，它将再次停止工作。但是我更喜欢这种方式，因为它不必总是手动键入导入。在尝试并失败了这些方法之后，这是我的最后选择：

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

我希望这对某人有帮助！

Answer 7

在像 ReactJs 或 React-Native 这样的 JavaScript 项目中，只需遵循这些步骤即可。

1 = 首先删除所有自动导入插件，因为 vc 代码自动包含此功能。

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

3 = 现在添加此代码

{
   "exclude": ["node_modules"]
}

快乐编码 (:

Answer 8

对于 Javascript 项目：

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

Answer 9

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

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

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

Answer 10

像下面这样，在include中的JSON对象的第一级中填充tsconfig.editor.json属性：

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

对我来说很好。

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

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

Answer 11

Typescript Importer会帮我做这件事

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

它会自动在工作区中搜索打字稿定义，然后按Enter键将其导入。

Answer 12

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

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

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

C：\ Users \ username \ AppData \ Roaming \ Code \ Cache

＆重新加载VSCode

注意：仅当您从（查看）菜单中选择显示（隐藏的项目）时，AppData才能在用户名中可见。

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

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

构造函数（http：Http）{

// ...}

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

Answer 13

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

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

“模块”：“ esnext”， “ moduleResolution”：“节点”，

Answer 14

首先看看MUST HAVE EXTENSIONS，然后安装您可能需要的扩展。然后，以下对我有用。

{
    "compilerOptions": {
        "target": "es5",
        "allowSyntheticDefaultImports": true
    }
}

Answer 15

您可以跟踪和竖起此Visual Studio Code issue此功能。还有一个User Voice issue，但我相信他们会投票给GitHub问题。

他们似乎想在TypeScript中使用自动导入功能，因此可以重复使用。 TypeScript auto import issue to track and thumbs up here

Answer 16

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

npm install --global import-js

Answer 17

VScode 1.57（2021 年 5 月）让我们想起了（现在）本机自动导入功能，并且……对其进行了改进：

<块引用>

导入语句中的完成

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

在 VS Code 1.57 中，它们现在也可以在编写 import 语句本身时使用：

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

Visual Studio代码自动导入

17 个答案:

对于 Javascript 项目：

导入语句中的完成