I have segregated the top 9 VS code extensions that were very useful to me for more than 3 years of experience in full-stack development.  When working on the project, it is very important to use the better editor or IDEs like JetBrains community editions. A better Editor/ IDE will reduce our coding time, code optimization, error detection, easy to debug, documentation, code styling, etc. 
Here, I am using the VS Code editor because it is open-source. It is also free to use unlike other Editor/IDEs such as JetBrains, which is so costly for developers. There are lots of free extensions available in the marketplace. So, you can use those extensions for debugging, syntax highlighting, intelligent code completion, snippets, and code refactoring,  embedded Git control, and GitHub, etc. The VSCode was developed and maintained by Microsoft. This editor is available for both popular OS platforms, Windows, Linux, and Mac. So, you can use the application on any of these platforms.  
Here, we are going to discuss the top 9 VSCode Extension. These are top extensions for web developers of all stages to make coding easier, faster and effective without errors.

Debugger for Chrome

Debugger extension takes the first place because debugging is a very essential part of development. It helps in increasing the trust in our code by identifying the errors or bugs. 
Here, I have given the Debugger for Chrome for javascript developers. If you are from any other domain, you can find your suitable debugger extensions for the VScode.
Debugger for Chrome is used to debug the javascript code in chrome browser or any other target which supports chrome dev support protocols. 

Features

• We can set the breakpoints including the source files if the source maps are enabled.
• Stepping, including are available with the buttons on the Chrome page 
• The Locals pane
• Debugs script tags, eval scripts and dynamically added scripts
• Watches the breakpoints
• Console logs

Unsupported scenarios

• It does not support debugging web workers.
• Debugging Chrome extensions is not possible. it supports only client-side script.
• Supports only javascript files and does not support other forms like HTML embedded scripts/files.

Debugger Category visual studio code extension link: Click here
Debugger for Chrome visual studio code extension link: Click here

Git Lens

This is an important visual studio code extension for GitHub/ GitLab project. The Git Lens plugin is used to check who changed the code when the line or block of the code was changed. Thereby, you can annotate your code in every single line, and also more details about the git lens are available on the link below.
Features
Review the details of the changes in the Current line of our source code.
Check the difference in the current line of your source code from your current changes and last changes of the repository.
 Quick access to the Push Repositories, Pull Repositories, Fetch Repositories, and Refresh commands.
GetLens visual studio code link: Click here

Live Server

Get a quick development local server with a live reload capability that suits for both dynamic and static pages. It supports SVG, Https, Proxy, and you can use it in any browser using the advance command line.
Live server visual studio code link: Click here

Better Comments

When you are working on a project, it is better to maintain your project by writing comments to your codings. Every language has
some specific comments style. This extension will bring more readability to your code comments by highlighting it in a different colour. Then, you can easily categorize the annotations like @example, @description, @todo, @param etc.
Better Comments visual studio code Marketplace link: Click Here

Javascript (ES6) Code Snippets

This extension makes coding convenient like Path Intellisense VS Code extension.  The extension will generate the basic source code. So you don’t need to write everything from the starting line. This extension provides a snippet for javascript, typescript and some javascript Frameworks too.
Javascript (ES6) Code Snippets visual studio code link: Click here

Prettier 

This extension is used to format the source code. Arranging your source code helps in your project’s coding readability, understandability and beautify it. It also helps in managing your project in source control tools like svn, Git. 
Prettier visual studio code link: Click here

Settings Sync

This extension is used to sync your visual studio code editor configuration in different systems. Sometime we will get the chance to use different machines for my work and personal use that time we need the same setting for the new machine also at the time we will install the same extensions and VS code extensions in the new system also so it will waste our time of work. So extension will helpful to sync the visual studio code editor settings in different machines also. This Settings Sync extension stores your settings and configuration in Github gist and synchronizes wherever you want. So, you can save the time that is spent on setting the same configurations in the new system.
 Settings Sync  visual studio code marketplace link:
 https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Auto Close Tag

The Auto Close tag visual studio code extension is majorly to add and close HTML/XML tags. Sometimes, we forget to close some tags that will make some web design issues.  So, we can avoid that problem by using this extension and also this is automatic making it more easier to develop a good web design. 
Auto Close Tag visual studio code link: Click here 

CSS Peek

This is a beneficial visual studio code extension because it suggests CSS classes and Id selectors name when you are going to add that in HTML tag. The extension also helps to code faster while developing web design-based projects. Because of its CSS Class/Id names suggestions, you do not need to write the full name in HTML.
CSS Peek visual studio code marketplace link: Click here

READ MORE: 6 Essential VS code extensions for Angular developers

Thanks for reading this blog and hope these extensions enhance your productivity. I believe that I made your time useful and listed the most useful extensions for all stage javascript developers. If I missed any important extension please kindly comment it with market place link so other readers can easily find it.
Get in touch with us to build a world-class web application at affordable prices by hiring the most skilled developers in the tech industry. Contact now.