7 Best VS Code Extensions every Web Developer should have

VS Code is the most popular code editor used by Web Developers, In this article, I'll introduce you to the 7 most loved extensions for VS Code

ยท

3 min read

7 Best VS Code Extensions every Web Developer should have

Search for each extension in VS Code Extension Tab or click the link given under their names.

1. Live Server

Live Server by Ritwik Dey

If you are a web developer you must be refreshing your browser tabs again and again after every change in HTML or the CSS, this is where Live Server comes to the rescue, open your webpage using this extension and it will refresh the browser for you and will let new changes show up on your screen.

2. Prettier

Prettier

Your code reflects what kind of a person you are, so your code should not be messy and difficult to read, right? Prettier do it for you, It cleans any extra white space, a blank line and indents your code. Next time when you start coding make sure prettier is installed and it keeps the code clean and easily readable.

3. Todo Highlight

Todo Highlight by Wayou Liu

You can highlight TODOSs, FIXMEs or annotations in your comment so that you can keep track of what to update and what to write later. This extension Highlights the annotations and also reminds you that you have left some of them into your code so that you don't push the code into production leaving the bugs behind.

4. Bracket Pair Colorizer

Bracket Pair Colorizer by CoernraadS

If you have trouble finding the closing bracket for a specific opening bracket to define your scope, then we are in the same league. While writing hundreds of line of code and nesting block in a block in a block in a block.....ufff. Use this extension and it will colorize the same pair of brackets and you can save some time in finding those scopes.

5. Auto Rename Tag

Auto Rename Tag Jun Han

Who wants to write the same thing again and again? Auto rename tag is a very handy extension for you to have, If you rename any opening tag in your HTML it will automatically rename the closing tag for you and vice versa.

6. CSS Peek

CSS Peek by Pranay Prakash

Did you have any idea from the name what this extension does, don't you worry I'm here only to tell you about that, this extension lets you peek over the CSS file while you are still in the HTML file. Just hover over the Ids or Class names and it will tell you what styles are written in that Class or Id.

7. Live Share

Live Share by Microsoft

This Extension is by the parent of VS Code, yes that's right, Microsoft. You can collaborate with your friends and colleague with the help of this one, What it basically does is, it shares the same coding space so that you and your friend can read, write, edit or delete anything at the same time remotely with their computers.

ย