Top 10 Angular VS Code Extensions
I’ve been using Visual Studio Code now for over a year and absolutely love the productivity it’s given me. Previously, my go to editor was Visual Studio 2015, mostly due to working with ASP.NET Web Forms. Now that I’m focusing more on front end development and Angular, I don’t think I’d start a new project without VS Code by my side.
#10 Bracket Pair Colorizer
Keep your sanity when working with brackets and braces. Extremely useful while navigating code with mulitple arrow functions.
#9 HTML CSS Class Completion
Perfect for quickly decorating HTML with the project’s available class names. Unfortunately, the class names are not scoped to the component’s folder.
#8 Angular 2 TypeScript Emmet
If you haven’t learned Emmet yet it’s definitely something to put under your belt. This plugin allows you to use the syntax directly in component templates.
Provides syntax highlighting for CSS and HTML within inline templates.
Quickly switch between component, template, and styles with three simple key bindings.
Also supports Go to Definition of template variables by simply pressing F12 while cursor is on variable.
The best Icon Pack out there! Features Angular specific icons for pipes, directives, components, modules, routing, and services. Beautify the file explorer! :)
#3 Angular 2+ Snippets
This is the most comprehensive snippet pack I’ve seen. It features 67 different snippets.
#2 TypeScript Hero
This plugin manages import statements and can automatically import missing dependencies. Can organize and sort imports.
#1 Path Intellisense
If there’s one plugin you add make sure it’s this one. This plugin enables autocompletion to file paths, which provides a huge boost when dealing with import statements.
Well thats the end of the list. Hopefully, you found one or two extensions you didn’t know about.
Feel free to add in the comments below any extensions I missed. Also checkout my post on adding Project Recommend VS Code Extensions to help share these extensions with the team.