Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Visual Studio Code - Angular 2 auto import extension

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.

like image 429
Code Ratchet Avatar asked Oct 05 '16 10:10

Code Ratchet


People also ask

How do I open the Angular 2 project in Visual Studio Code?

Visual Studio Code uses launch. json and tasks. json file to launch your Angular2 Application. First, press F1 or CTRL+SHIFT+P in Visual Studio code and type launch in the address bar on the top of the editor, select node.

How do you import extensions into VS Code?

You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (Ctrl+Shift+X).

How do I turn off auto import in VS Code?

To disable the auto-import feature, set the php. format. autoimport setting to "none" .


2 Answers

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.

like image 160
Nate May Avatar answered Sep 28 '22 09:09

Nate May


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.

like image 27
bob Avatar answered Sep 28 '22 07:09

bob