2018 Top Angular Visual Studio Code Extensions
An up-to-date list of the best Angular visual studio code extensions found currently.
I have been using Angular since it was in beta and my go-to editor has been VS Code since then.
I strongly recommend you to give it a try if you have not used it before especially if you are working on frontend projects and Typescript.
Reasons to try it out:
- It offers native support Typescript.
- Its lightweight (even though it has Visual Studio in its name).
- The developer experience of VS Code is just superb.
One of the crucial factors that helps us developers decide on an editor is the tooling support and the community around it and VS Code has both of these with an awesome community around it.
In this post I will be listing out all my favorite Angular VS Code extensions that have boosted my productivity while working on Vue applications.
I am aiming to keep this up to date as much as possible, so here is the list for 2018:
You can skip to the end of the page to find the full list with links.
Must Haves
These extensions are the must haves for any Vue developer in my opinion and all of them have been very popular recently.
TSlint
Integrates TSLint into VS Code. If you are not linting your code you should start doing it from today!
Bonus: Here is my own ts-linter config file which I try to keep up to date with the latest recommendations.
Auto Import
Automatically finds, parses and provides code actions and code completion for all available imports.
Angular v5 Snippets
Adds code snippets for Angular for TypeScript and HTML.
Angular TypeScript/HTML Snippets
Another Angular code snippets for TypeScript and HTML. Quite similar to John Papa’s Angular v5 Snippets but has some minor differences. My recommendation is to try both and see which one you like more.
Debugger for Chrome
Makes life a lot easier when working with any VS Code JavaScript.
Language Service
Adds intellisense for Angular templates.
Prettier
Package to format your JavaScript / TypeScript / CSS using Prettier.
Personal Favorites
These extensions are my personal favorites which I find very helpful anytime I write angular code.
angular2-inline
I like to write my templates inline as much as I can and if you do too then this extension and the next one are essential for you.
angular2-inline offers syntax highlighting of inline html and css as well as code completion, highlighting, and hover information for inline html.
Inline Template Emmet
Emmet is one of these things that boosted my productivity tremendously, this extension adds it for angular inline templates.
Angular Material 2 Snippets
I have been using angular material in couple of projects by now and I found this extension quite helpful.
json2ts
How many times you had to copy the API's json response and make interfaces out of it? This small extension will make this process smoother, you are welcome!
SimonTest
I stumbled upon this extension recently and I absolutely love it! It makes writing unit tests for your Angular code a lot easier where it generates all the boilerplate code for you and you just have to write the specific tests you need. It has a couple of hiccups but its constantly under development.
Angular Follow Selector
This one makes navigating between the component’s files a breath.
Generic extensions
These extensions are more generic but I strongly recommend checking them out.
Bracket Pair Colorizer
Allows matching brackets to be identified with colors.
npm
Supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.
EditorConfig
Awesome for maintaining consistent configurations for VS Code.
That is it folks, happy productive coding!
You can find a similar 2019 list for Vue here.
Shortlist:
