Visual Studio Code 自动导入 [英] Visual Studio Code Automatic Imports

问题描述

我正在从 Webstorm 迁移到 Visual Studio Code.Webstorm 的表现很糟糕.

Visual Studio 代码对于查找我需要的依赖项并导入它们并没有多大帮助.到目前为止，我一直在手动完成，但说实话，我宁愿等待 15 秒让 webstorm 找到并添加我必须手动挖掘的导入.

我正在使用来自@minko-gechev 的 angular2 种子
^{*点击查看完整分辨率}

I'm in the process of making the move from Webstorm to Visual Studio Code. The Performance in Webstorm is abysmal.

Visual studio code isn't being very helpful about finding the dependencies I need and importing them. I've been doing it manually so far, but to be honest I'd rather wait 15 seconds for webstorm to find and add my import that have to dig around manually for it.

I'm using the angular2 seed from @minko-gechev https://github.com/mgechev/angular2-seed

I have a tsconfig.json in my baseDir that looks like this:

    {
  "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
}

and I have another one in my src/client dir that looks like this:

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

I don't know why there are two. The angualr seed project uses typescript gulp build tasks so I guess the compilation is different.

What can I do get vscode to be more helpful??

解决方案

I got this working by installing the various plugins below.

Most of the time things just import by themselves as soon as I type the class name. Alternatively, a lightbulb appears that you can click on. Or you can push F1, and type "import..." and there are various options there too. I kinda use all of them. Also F1 Implement for implementing an interface is helpful, but doesn't always work.

List of Plugins

• npm Intellisense
• ngrx for Angular 2 Snippets
• TypeScript Toolbox
• npm
• TsTools
• Angular Snippets (Version 9)
• Types auto installer
• Debugger for Chrome
• TypeScript Importer
• TypeScript Hero
• vscode-icons
• Add Angular Files

Screenshot of Extensions

^{*click for full resolution}

这篇关于Visual Studio Code 自动导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！