/

5 Must-Have VS Code Extensions for Web Developers

Priyanshu Chaurasiya

almost 2 years ago

5 Must-Have VS Code Extensions for Web Developers

Hey everyone!
If you're connected to the tech and development industry, you surely must be familiar with VS Code. It's a fantastic code editor and arguably the most popular one among developers. Who doesn't want to code faster and better, right? I know I do!

Do you know that VS Code has a plethora of extensions to help you increase your efficiency and productivity? In today's article, we're going to talk about exactly that.

Hello, I’m Priyanshu Chaurasiya, a developer and blogger. Welcome to my blog! Today, I'll be sharing with you 5 must-have extensions that every web developer should have. I personally use all these extensions and believe me, they really save time, boost productivity, and make coding easier. So, let's dive in!

Prettier

A good developer writes well-formatted code, and this is where Prettier comes in handy. Prettier formats your code, removes extra spaces, and unused lines, and makes it easy to understand the hierarchy and nesting in your code. Here’s how you can set it up:

Open VS Code.
Go to the Extensions section.
Search for and install Prettier.
Open the Command Palette with Ctrl+Shift+P (or Cmd+Shift+P on Mac).
Type and select "Format Document With..." and hit Enter.
Select Prettier from the list of options.

And you're done! Write some messy code and try formatting it with Prettier to see the magic.

Prettier - Code formatter - Visual Studio Marketplace

Comments

Have something to share?

Join the conversation by signing in below!

/

5 Must-Have VS Code Extensions for Web Developers

Priyanshu Chaurasiya

almost 2 years ago

Hey everyone!
If you're connected to the tech and development industry, you surely must be familiar with VS Code. It's a fantastic code editor and arguably the most popular one among developers. Who doesn't want to code faster and better, right? I know I do!

Do you know that VS Code has a plethora of extensions to help you increase your efficiency and productivity? In today's article, we're going to talk about exactly that.

Hello, I’m Priyanshu Chaurasiya, a developer and blogger. Welcome to my blog! Today, I'll be sharing with you 5 must-have extensions that every web developer should have. I personally use all these extensions and believe me, they really save time, boost productivity, and make coding easier. So, let's dive in!

Prettier

A good developer writes well-formatted code, and this is where Prettier comes in handy. Prettier formats your code, removes extra spaces, and unused lines, and makes it easy to understand the hierarchy and nesting in your code. Here’s how you can set it up:

Open VS Code.
Go to the Extensions section.
Search for and install Prettier.
Open the Command Palette with Ctrl+Shift+P (or Cmd+Shift+P on Mac).
Type and select "Format Document With..." and hit Enter.
Select Prettier from the list of options.

And you're done! Write some messy code and try formatting it with Prettier to see the magic.

Prettier - Code formatter - Visual Studio Marketplace

Comments

Have something to share?

Join the conversation by signing in below!

Extension for Visual Studio Code - Code formatter using prettier

Live Server

If you've been writing code and repeatedly saving it and then refreshing your browser to load the changes, it can get quite hectic and irritating, right? Live Server can help with this. It creates a development environment and automatically updates your changes in the browser in real-time. Here’s how to set it up:

Open VS Code.
Go to the Extensions section.
Search for and install Live Server.
Click on 'Go Live' in the bottom right of your screen, or right-click on your HTML file and select "Open with Live Server".

Now, just make changes in your code and see the automatic real-time reflection of changes in the browser. It’s that easy!

Live Server - Visual Studio Marketplace

Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages

Auto Rename Tag

The third extension on our list is Auto Rename Tag. The name itself explains its purpose. When you change the name of an opening tag of an element, you don't need to separately change the name of the closing tag—Auto Rename Tag does it for you. Here’s how to install and set it up:

Open VS Code.
Go to the Extensions section.
Search for and install Auto Rename Tag.

That’s it! No additional steps are needed. Just make sure it is enabled, and enjoy the ease of changing tag names.

Auto Rename Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

Better Comments

As a beginner, you might not write comments often in your code, but it's always recommended to have a good practice of writing comments. By default, all comments appear similar, and we need to read the whole comment to understand its purpose. Better Comments helps with this. Here’s how to install it:

Open VS Code.
Go to the Extensions section.
Search for and install Better Comments.

Now, you can start writing comments with the following features to differentiate between them:

Use an asterisk (*) to mark it as information (shown in green).
Use an exclamation mark (!) to highlight it as an alert (shown in red).
Use a question mark (?) to mark it as a query (shown in blue).
Write 'TODO' to mark it as pending work (shown in orange).

This extension really helps to quickly get an idea about the code block.

Better Comments - Visual Studio Marketplace

Extension for Visual Studio Code - Improve your code commenting by annotating with alert, informational, TODOs, and more!

CodeSnap

This is the fifth and last extension on our list and can be your favorite if you are quite active on social media as a developer and regularly share your code snippets. CodeSnap helps you generate beautiful images of your code, which you can save to your local computer and share on your social handles. Here’s how to use CodeSnap:

Open VS Code.
Go to the Extensions section.
Search for and install CodeSnap.

To use CodeSnap:

Open VS Code.
Open the Command Palette with Ctrl+Shift+P (or Cmd+Shift+P on Mac).
Search for and select "CodeSnap".
Select your code from the files; the selected code will be in the image.
Click on the shutter icon on the top of the image; the image will be downloaded to your local computer.

Done! Enjoy sharing and flexing beautiful code on your social handles.

CodeSnap - Visual Studio Marketplace

Extension for Visual Studio Code - 📷 Take beautiful screenshots of your code

So, these were the 5 VS Code extensions you should have as a web developer. They help increase productivity, make it easier to write and handle your code, and take you a step closer to being a professional developer. I hope you liked it and found it useful. Stay connected with me, as I will be sharing many more such articles on the blog.

Until then, check out my recent blogs!

Prettier

Comments

Have something to share?

Prettier

Comments

Have something to share?

Live Server

Auto Rename Tag

Better Comments

CodeSnap

Recent Comments