Top 5 VS Code Extension for Web Developers In 2021

In every project, we are firstly opening VS Code editor like that my first blog on hasnode (my first technical blog also) also starting with VS Code topic.

Here is a list of extensions for VS code that will make your time and effort very productive, and you will become an efficient web developer.

1. Live Server

Live Server

Live Server is a must-have for any developer creating webpages using HTML and CSS. Once installed all you have to do is open your project, look for the Go Live button on the status bar at the bottom, or use the command Alt+L Alt+O in order to launch a quick development live server so you can view your current project live on any browser or you can right-click the file and "click open with live server"

demo of live server

2. Prettier

Prettier

Prettier makes sure you don’t have to worry about formatting again! It’s super easy and can be configured to auto-format code on every save.

Bonus Tip: Clean code file won't let you give up from coding.

3. Bracket Pair Colorizer

BPC

Bracket Pair Colorizer gives the opening and closing brackets matching colours, making it much easier to know which brackets belong together.

Custom bracket characters can also be configured, and you can add a background colour to the active scope too.

4. JavaScript (ES6) Code Snippets

JS ES6

JavaScript (ES6) Code Snippets Extension enhances the experience by adding a slew of import/export triggers, class helpers, and method triggers.

The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue. In the VSCode Marketplace, code snippets for other flavours, such as Angular, are also readily available.

5. TODO Highlight

TODO

TODO Highlight makes them stand out much more. I usually write TODOs in my comments to then totally forget about them.

You can toggle the highlights and can also list all the highlighted annotations and reveal them from the corresponding file.

Thank you for ready up to here. If you feel this blog useful and knowledgeable feel free to connect me on these social media.

Instagram GitHub

Buy Me A Coffee

Rayyan Rasheed's photo

I personally like it and It is very useful to a beginner to handle vscode easily

Aswin Asok's photo

These extensions really helped me in increasing my productivity while coding.

Jobin S's photo

ooh great. Happy to Hear

Savio Martin's photo

Good start! Thanks 😘

Jobin S's photo

thank you