Must Need VSCode extensions for Angular Development.
With my experience and the plugins I used, Here I listed the most unique , useful & must need VSCode extensions for Angular development.
JSON2TS
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.
cmd+alt+V
orctrl+alt+V
. - Copy the JSON content and paste inside
the interface file with the mentioned shortcut.
(Rename the interface if required)
cmd+alt+X
orctrl+alt+X
. - Copy the API URL and paste inside
the interface file with this shortcut
angular2-switcher
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)ifon .ts|.css|.spec.ts
: go tohtml
ifon .html
: go to previous
alt+i
(Windows)shift+alt+i
(macOS)ifon .ts|.html|.spec.ts
: go to css
ifon .css
: go to previous
alt+u
(Windows)shift+alt+u
(macOS)ifon .css|.html|.spec.ts
: go to ts
ifon ts
: go to previous
alt+p
(Windows)shift+alt+p
(macOS)ifon .ts|.css|.html
: go to spec.ts
ifon .spec.ts
: go to previous
Angular Language Service
This is another effective extension which assist you in auto suggest variable in
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
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.
Hello,
Really nice article…Thanks for sharing this. I really appreciate your efforts