Jobin S
JOBIN S

JOBIN S

Top 5 VS Code Extension for Web Developers In 2021

Top 5 VS Code Extension for Web Developers In 2021

Jobin S

Published on Jan 31, 2021

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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

Did you find this article valuable?

Support Jobin S by becoming a sponsor. Any amount is appreciated!

See recent sponsors |Β Learn more about Hashnode Sponsors
Β 
Share this