Best Visual Studio Code Extensions For Web Development:[2021]

Vs code extension


Tabnine is a powerful artificial intelligence assistant designed to help you code rapidly, reduce mistakes, and discover best coding practices - without ever leaving the comfort of visual studio code.​

Tabnine studies publicly shared code and use AI deep learning algorithms that provide us with the ability to predict.

Watch it how cool TABNINE works😎

Manual Installation inside VSCode

  • Press Cmd+P in your VS CODE, type in ext install Tabnine.tabnine-vscode and press Enter​
  • Click the reload button in the extensions tab​
  • The default behavior of Tabnine is using the Enter key to accept completions. If you want to use the Enter key to start a new line instead of accepting a completion, just go to Settings → Editor: Accept Suggestion On Enter and turn it off

 2.Prettier - Code formatter

Prettier is a top code formatter. It imposes a consistent style by resolving your code and re-printing it with its own rules that take the max line length into account, wrapping code when necessary.


Install through VS Code extensions. Search for Prettier - Code formatter.

3.Live server

  • AQuick Development Live Server with live browser reload.
  • Start or Stop the server with a single click from the status bar.
  • Open an HTML file to the browser from the Explorer menu.
  • Support for excluding files for change detection.
  • Hot Key control. etc...


Open VSCode and type ctrl+p, type ext install ritwickdey.liveserver.

3.Visual Studio IntelliCode

The Vs IntelliCode extension provides artificial intelligence assisted development features for TypeScript, JavaScript, Java, and python developers in Vs code, based on understanding the context of the code combined with machine learning.
It provides artificial intelligence-assisted IntelliSense by recommended completion items for your code context at top of the completions list. The example below shows for Python code.


Amazing icons to your visual studio code

5.Bracket Pair Colorizer

Bracket pair colorizer extension allows matching brackets to identified with colors. You can also define which characters to match and which colors to use in a code.

6.Auto Rename Tag


When you rename one HTML tag, automatically rename the paired HTML tag features


This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for CSS,scss, less like classes, and IDsfound in strings within the source code.

For more top extensions click here

Sagar S

Sagar is an aspiring blogger with an obsession for all things tech. he is a computer science graduating student at the National Institute of engineering college. He is interested in tech,computer, programming, and the internet made him a self-proclaimed geek.instagramtwitterfacebook

If you have any doubt related to the above post, ask in the comment section

Post a Comment (0)
Previous Post Next Post