Essential Angular VS Code Extensions

When it comes to efficient and effective development experiences, excellent tooling makes all the difference. That's why I love VS Code.

VS Code has a great extensibility model, which makes it easy to create awesome extensions that enhance the development experience. It's no secret that I love shortcuts and I don't love memorizing syntax ... which is why I created my snippets for Angular. It's been quite popular with over 500,000 downloads, but it's certainly not the only extension I use.

I am often asked, "What are you favorite VS Code extensions for Angular?". I decided it was time to share them via an extension pack.

Introducing my Angular Essentials extension pack for VS Code. By installing this extension pack you get a set of great extensions that are helpful with Angular development. You can check out the initial list below.

This is hot off the press as I literally just published this as it has 1 install.

As web tools evolve, the usefulness of extensions come and go. I reserve the right to update the extension pack's contents up to my own discretion. This includes adding or removing extensions.

Here is the list of extensions the pack includes:

Angular v4 Snippets - Angular snippets that follow the official style guide, for TypeScript, templates, and RxJS.

Angular Language Service - This extension provides a rich editing experience for Angular templates, both inline and external templates. This extension is brought to you by members of the Angular team. It is fantastic at helping write solid code in the html templates.

Editor Config - EditorConfig for VS Code. Great for maintaining consistent editor settings.

tslint - Integrates the tslint linter for the TypeScript language into VS Code. Extremely helpful at detecting and helping fix TypeScript issues.

Chrome Debugger - VS Code debugger for Chrome.

Bracket Pair Colorizer - This extension allows matching brackets to be identified with colors. This is super helpful when you have nested functions and objects.

Path Intellisense - Visual Studio Code plugin that autocompletes filenames. Hopefully, VS Code will bake this in at some point. Until then, this is a keeper.

Angular Emmet - Support zen-coding syntax for Angular 2 typescript files. Again, hopefully, VS Code will bake this in at some point. Until then, this is a keeper.
Update: A bug has been reported with this extension that affects TypeScript coding adversely, until it is resolved it will not be included.

Angular Inline - Visual Studio Code language extension for javascript/typescript files that use Angular2.

JSON 2 TS - Convert a JSON from clipboard to TypeScript interfaces.

Angular Material Theme - File and folder icons for that work well with Angular

Tweet Post Share Update RSS

Hi, I'm John Papa. I author this blog, create courses for Pluralsight and am a Google Developer Expert and Microsoft Regional Director. I travel speaking at events and train technology thought leaders

Tags:
vscode angular typescript html javascript rxjs