Visual Studio Code - Angular 2 auto import extension

Question

Just finished setting up visual studio code for learning Angular 2.

I've currently installed the following extension for TypeScript:

1. TSLint

Along with a new theme etc, I'm curious to find out if an extension exists for the following scenario:

Say I'm creating a form within Angular 2, inside this form I would be using a FormControl if I don't manually import FormControl from @angular2/forms then of course it wouldn't work, has an extension been created whereby if I type FormControl it'll alert me and say you need to import X from X ?

Reason I ask this is because it'll help me greatly to learn where things live and so forth.

Update

So spent some time today to carry on my search to find the relevant extensions I need to auto import symbols from other files and modules automatically, I came across this Visual Studio automatic import however the extensions the OP specified don't seem to work for all symbols. In the image the OP uploaded I copied the code, when I wrote Pipe it prompted me to import Pipe from @angular/core however when typing PipeTransform it didn't give me the import option, instead it just said Cannot find name PipeTransform

Or if anyone who uses Visual Studio Code with Angular 2 could outline what extensions they use that would also be beneficial.

Solution 1

Check out Typescript Hero. It does a great job of importing custom parts of your application and helps you easily resolve situations where there is a name conflict.

Solution 2

Also you can take a look at some of the suggestions here: Visual Studio Code Automatic Imports. Specifically Typescript toolbox which can handle some of the built in modules.