Visual Studio代码自动导入

我正在从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 Seed项目使用Typescript gulp构建任务，因此我猜编译是不同的。

我该如何使vscode变得更有帮助？

我通过安装下面的各种插件使它起作用。

在大多数情况下，只要我键入类名，事情就会自己导入。或者，出现一个灯泡，您可以单击。或者，您可以按F1，然后输入“ import ...”，那里也有各种选项。我有点用了。另外，F1用于实现接口的工具也很有用，但并不总是有效。

插件清单

• npm Intellisense
• Angular 2代码段的ngrx
• TypeScript工具箱
• npm
• Ts工具
• 角度片段（版本9）
• 类型自动安装程序
• Chrome调试器
• TypeScript导入器
• TypeScript英雄
• vscode图标
• 添加角度文件

扩展屏幕截图

^{*单击以获取完整分辨率}

现在2018。你并不需要自动进口Javascript中的任何分机（只要你有checkjs: true你的jsconfig.json文件）和打字稿。

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

以及自动导入建议。这些将在您键入时显示一个建议项。接受自动导入建议会自动将导入添加到文件顶部

两者都可以与JavaScript和TypeScript一起使用。如果自动导入仍然不适合您，请打开一个问题

我使用了steoates的Auto Import插件，这很容易。

自动查找，解析并提供所有可用导入的代码操作和代码完成。与Typescript和TSX一起使用。

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

对我有用

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

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

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

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

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，仅保留类型声明文件，例如Button.d.ts。这不是很好，因为如果您删除了node_modules文件夹，它将再次停止工作。但是我更喜欢这种方式，因为它不必总是手动键入导入。在尝试并失败了这些方法之后，这是我的最后一招：

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

我希望这可以帮助别人！

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

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

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

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

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

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

并重新加载VSCode

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

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

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

构造函数（http：Http）{

// ...}

不推荐使用Http并在较新版本中将其替换为HttpClient的地方，因此我们最终可能会认为与此相关的错误可能与自动导入错误有关。有关更多信息，您可以参考不推荐使用的API和功能

Typescript Importer确实为我完成了工作

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

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

include在tsconfig.editor.json此处将属性填充到JSON对象的第一级中：

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

它对我很好。

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

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

您可以跟踪并赞赏此功能的Visual Studio Code问题。还有一个User Voice问题，但我相信他们将投票移至GitHub问题。

看来他们想要TypeScript中的自动导入功能，以便可以重复使用。要跟踪TypeScript自动导入问题，请点击此处。

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

npm install --global import-js