7 must-have Visual Studio Code extensions for Angular

VS Code is awesome: it’s a really fast beast, it works splendidly with TypeScript and on top of that it is free. Crazy!

Still… it can do better. The main idea here is that the editor itself is pretty limited in functionality so we can customise it to our needs with the use of rich gallery of extensions, depending on what technology — languages, frameworks — we’re using it for.

Here is the selection of extensions that I found most helpful when working on Angular apps:

Working with TypeScript in general

1. TSLint

ext install tslint

If you aren not linting your code yet, start now.
If you already are, seeing linter those errors alongside the code is far more convenient than having to look for them in your terminal. That’s what TSLint extension enables.

It will draw squiggly lines under the code where you have a problem and display a list of warnings & errors on hovering it. You can also see the list of all detected problems in… well, the Problems panel.

Hint: you can open this panel by running “Show Problems” command or ⌘⇧M on OSX or Ctrl+Shift+M on Windows

2. Auto Import

ext install autoimport

We’re not living in the global world anymore… well, I mean as far as our scripts are concerned. Nowadays everything has to be imported. When working with Angular you’ll often be writing several of those import { Something } from './somewhere'. This guy will do it automatically for you.

If you pick the class/interface from suggestion dropdown, the import statement will be added automatically. Otherwise you need to trigger suggestions (Ctrl+Space).

Angular Code Generation

3. Angular 2 TypeScript Snippets

ext install Angular2

How many times have you written the code for a component or, say, even things like a code for getting data from url and mapping the response to JSON object?

return this.http.get('http://someurl')
    .map((response: Response) => response.json());

If you feel like there are more fun things to do with your time, you’re right. That is why it’s good to have some Angular code snippets at hand. Angular 2 TypeScript Snippets has several code pieces that cover the typical scenarios:

• In the TypeScript land you’ll be able to choose from 10 things to generate, such as component, service or subscription.
• In HTML there are additional 7, like ngFor or ngModel.

It is actually the most popular Angular-related VS Code extension by far and it probably didn’t hurt that it is written by the John Papa.

Just type ng2 in your code and you will see a bunch of useful snippets suggestions.

4. Angular 2 TypeScript/HTML Snippets

ext install angular2-snippets

The similar story to the previous tool. This one is created by Dan Wahlin, another well known name in Angular community, and has a bit more snippets (14 in TypeScript and 12 in HTML). I have both of these extensions installed and haven’t yet decided which one I’ll stick with.

For these bunch of suggestions you need to type a2

5. Angular2 Files

ext install vscode-angular2-files

This little helper is basically like Angular-CLI’s ng generate … command. When creating a new file you can choose a component, directive, pipe, etc (even a route!) and the newly created file will already have the boilerplate code.
Edit: and it now uses the configuration you have in angular-cli.json so e.g. no need to configure stylesheets files’ extensions separately :)

Just right click on the directory you want to generate a file(s) in, pick what you want it to be from a dropdown list — and voila!

Other

6. angular2-inline

With this extension the code put in the backticks will looks a lot nicer

If you write some HTML in the template parameter of your component or CSS in its styles part, Visual Studio Code won’t understand it in any other way than a string. You won’t have any special code coloring or autocompletion.

This extension makes VS Code understand these inline code blocks.

7. angular2-switcher

ext install angular2-switcher

The switcher allows you to quickly jump between each files of given component. Say you are in the accordion.ts file: with a simple shortcut you can now switch to accordion.css or accordion.html. Pretty nifly!

Bonus!

8. NgBootstrap Snippets

ext install ng-bootstrap-snippets

Writing your app with Bootstrap? You’re likely using ng-bootstrap then. If so, this NgBootstrap Snippets with its over 20 snippets can be quite a timesaver. Just install it and type ngb and see what happens :)

What about your setup? Do you have anything that you could add to this list?

If you liked this list, click the 💚 below so other people will see it here on Medium.