VS Code Useful Extensions

Extensions are very useful to your IDE to speed up your development and to improve your quality of output.Now a days VS Code is most popular IDEC for web development. Here we have listed top 20 vs code extensions that will make you a more productive developer.

Angular 8 Snippets – TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

This extension is optimized for developers that use Angular and are no longer using AngularJS (Angular 1). If you type in AngularJS keywords, it will suggest an Angular solutions. This is by design and meant to help developers learn how AngularJS concepts and techniques map to Angular.

URL: https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode

Angular Snippets (Version 9)

This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML.

URL: https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2

HTML Snippets

This extension adds rich language support for the HTML Markup to VS Code

URL: https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

URL : https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

URL: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

classdiagram-ts

classdiagram-ts produces UML class diagram based on typescript source files

URL: https://marketplace.visualstudio.com/items?itemName=AlexShen.classdiagram-ts

Prettier – Code formatter

Prettier is an opinionated code formatter.

URL: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Rainbow Brackets

Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets. This is particularly useful for Lisp or Clojure programmers, and of course, JavaScript, and other programmers

URL: https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets

Beautify

Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code

URL: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Color Picker

Helper with GUI to generate color codes such as CSS color notations

URL: https://marketplace.visualstudio.com/items?itemName=anseki.vscode-color

Add jsdoc comments

Adds simple jsdoc comments for the parameters of a selected function signature

URL: https://marketplace.visualstudio.com/items?itemName=stevencl.addDocComments

GitLens — Git supercharged

Setup git in vs code with this extension.

URL: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Code Spell Checker

To check spelling and cases in your code.

URL: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Path Intellisense

It gives automatic suggestions of file path.

URL: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

TypeScript Class Organizer

Best extension to organise your typescript code.

URL: https://marketplace.visualstudio.com/items?itemName=aljazsim.tsco

TypeScript Hero

This extension is useful to manage all your imports.

URL: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

Turbo Console Log

Simply add console.log by just one click and can remove all console.log just with one command.

URL: https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

Live Server

It creates live server for your application.

URL: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Debugger for Chrome

Instead of chrome you can also debug your code in vs code same as developer console.

URL: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

TS Lint

Best extension to work on typescript to check typescript classes, line length, module and much more.

URL: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin

emojisense:

If you have a need to emojies on your IDE , you can install this.

URL: https://marketplace.visualstudio.com/items?itemName=bierner.emojisense

Learn Unit testing : https://www.jsmount.com/angular-http-request-testing/

VS Code Useful Extensions