VS Code Useful Extensions for Web Development
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
