typescript - Visual Studio Code Automatic Imports

Question

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??

Answer 1

2018 now. You don't need any extensions for auto-imports in Javascript (as long as you have checkjs: true in your jsconfig.json file) and TypeScript.

There are two types of auto imports: the add missing import quick fix which shows up as a lightbulb on errors:

And the auto import suggestions. These show up a suggestion items as you type. Accepting an auto import suggestion automatically adds the import at the top of the file

Both should work out of the box with JavaScript and TypeScript. If auto imports still do not work for you, please open an issue