Must Need VSCode extensions for Angular Development.

Author: | Posted in Angular, Frontend, JavaScript 1 Comment

With my experience and the plugins I used, Here I listed the most unique , useful & must need VSCode extensions for Angular development.

Must Need VSCode extension for Angular Development.


JSON2TS is a really cool and effective extension which convert a JSON into TS interface object by simply copy & pasting the API response or API URL.

This will be more effective if you are playing with a huge JSON object responce.

cmd+alt+V or ctrl+alt+V. - Copy the JSON content and paste inside
the interface file with the mentioned shortcut.
(Rename the interface if required)

cmd+alt+X or ctrl+alt+X. - Copy the API URL and paste inside
the interface file with this shortcut


You can switch between the HTML, TS, Specs, CSS files of the respective component rapidly using simple keyboard shortcuts after adding this extension.

alt+o(Windows) shift+alt+o(macOS)if on .ts|.css|.spec.ts: go to html
if on .html: go to previous

alt+i(Windows) shift+alt+i(macOS)if on .ts|.html|.spec.ts: go to css
if on .css: go to previous

alt+u(Windows) shift+alt+u(macOS)if on .css|.html|.spec.ts: go to ts
if on ts: go to previous

alt+p(Windows) shift+alt+p(macOS)if on .ts|.css|.html: go to spec.ts
if on .spec.ts: go to previous

Angular Language Service

This is another effective extension which assist you in auto suggest variable in template file (HTML) which are declared in TS.

As you can access the TS declarations inside the HTML template which result in preventing variables mismatch & saves more time as you need not go back and refer the TS file for declaration.

Angular v7 Snippet

This extension helps you in unfold the complete code snippet by typing part of it. Really helpful if you don’t want to type the snippet by yourself altogether.

Other Extensions

TSLint – To find & fix the lint error on the go. This will align with your TSLint configuration.

Sass – Intended Sass autocomplete, snippet & prettifier.

Bracket Pair Colouriser – To identify the matching brackets with colors.

These are the extensions which I mostly use with VS code while developing the Angular application. The comment section is open to sharing the name of your favorite and recommended plugins which increase productivity on angular development.

  1. Posted by Priti

Add Your Comment