Best VS Code Extensions for Angular v2+ Development

Visual Studio Code is a brilliant editor that makes coding life much easier, especially for JavaScript developers.

What makes VS Code an even better editor is the amount of extensions in the marketplace.

Going through some Angular development, I've found a few packages that have made coding easier for Angular v2+ projects. We'll go over them here. There's an easy way to get many of these packages using an extension pack: Angular Essentials Extension Pack by John Papa.

The extension pack has many of these, but I'd like to go into a little more detail for some of the packages and also introduce some packages that aren't necessarily Angular specific, although they do help with JS development.

Angular Specific Packages ---

Here are the packages specific to Angular. All of these will help make Angular development faster and more convenient.

Angular 2 TypeScript Emmet

VS Code Package

This package will allow you to use Emmet abbreviations inside Angular inline templates.

Essential Reading: Learn React from Scratch! (2020 Edition)

Here's what it looks like without the Angular 2 TypeScript Emmet package:

And with the package, we have the glory of Emmet!

Angular Language Service

VS Code Package

This is an extremely helpful extension. It gives us intellisense when writing out our HTML templates for an Angular component.

Angular v4 TypeScript Snippets

VS Code Package

This is a great package by John Papa. While the Angular CLI can do a lot of these generations for us, it's always helpful to know we have snippets at our fingertips.

Just type a- and see VS Code show you all the snippets available with this package:

Here's an example of a snippet to generate an HTTP Interceptor:

Angular2 Inline

VS Code Package

This is a simple one but a favorite. Get syntax highlighting for your inline templates. Here's a comparison with and without:

Angular2 Switcher

VS Code Package

This is also a simple package that not everyone will find useful. When coding, I do my best to keep my hands on the keyboard. It saves time to stay away from the mouse. This is why I invest time into learning the VS Code keyboard shortcuts and Vim.

This package allows you to quickly switch to a component's matching .css|.html|.ts files.

Type alt + o (Windows) or shift + alt + o (Mac) to:

• Go from .ts -> .html
• Go from .css -> .html
• Go from .html -> previous file (.ts or .css)

Type alt + i (Windows) or shift + alt + i (Mac) to:

• Go from .ts -> .css
• Go from .html -> .css
• Go from .css -> previous file (.ts or .html)

Type alt + u (Windows) or shift + alt + u (Mac) to:

• Go from .css -> .ts
• Go from .html -> .ts
• Go from .ts -> previous file (.css or .html)

Packages for All JavaScript Languages ---

Debugger for Chrome

VS Code Package

An essential when working with any VS Code JavaScript.

Auto Import

VS Code Package

Very useful package that will automatically add the import { } from '' line to your code.

Bracket Pair Colorizer

VS Code Package

This may not be up everyone's alley, but it can be helpful to see which bracket closes where. This extension makes matching brackets the same color.

JavaScript (ES6) Code Snippets

VS Code Package

A simple package to add common ES6 snippets. The one I use the most is idm which is a snippet that expands to:

import { } from 'module';

Some other useful snippets:

• clg: console.log(object)
• fof: for(const item of object) {}
• sto: setTimeout(() => {});

npm

VS Code Package

A small package that can tell you when one of your packages are out of date. Here's an example showing one of our Angular packages behind a version.

TSLint

VS Code Package

Integrates TSLint into VS Code so we can get smart hinting and error finding for our TypeScript code.

Align

VS Code Package

A personal favorite. This is a minor package that I find myself using all the time. Purely cosmetic, it will help you align your code.

Here's some unaligned code.

Hit the keyboard shortcut ctrl + alt + a and you get:

Conclusion

These are the packages that I've found to help most with Angular v2+ development. The amount of time these extensions can save us add up over time and let us focus more on the actual code.

Do you have any favorite extensions for Angular development? Would you be interested if I put together a VS Code extension pack so that you can install all these extensions with the click of a button?

Happy coding!

Like this article? Follow @chrisoncode on Twitter