DEV Community

Cover image for Awesome VSCode extensions for a better coding experience [ Part 1 ]
Hyperloop007
Hyperloop007

Posted on • Updated on

Awesome VSCode extensions for a better coding experience [ Part 1 ]

Imagine yourself typing all the HTML boilerplate code when you decided to make a new project or imagine not being able to recall the name of that single property in css and searching the web for it. Why am I talking about all this? It's obvious because this kind of stuff would really suck. So, that brings us to the wonderful extensions that we have in vscode made by a lot of people and you can use them for free.

What are vscode extensions anyway?

VSCode extensions let you add debuggers and various tools to your environment and works through various custom settings that the extensions bring with them.

VSCode extensions are a great way to reduce your workload and make it easy for you to write your code and format it. You can even create your own vscode extensions but we won't talk about it here. There are a lots of extensions available on vscode as of today but I will mention some of which I find really useful.

1. Auto Close Tag:

As you can probably figure out from the name here this extension automatically closes the HTML/XML opening tags you write. You can customize or change the settings from the vscode auto close tag settings.
It can even be used to close the self closing tags in HTML.

Image description

2. Auto Rename Tag:

This very extension lets you rename both the opening and the closing tag at once saving you the pain of renaming the tags one by one.

Image description

3. Bracket Pair Colorizer:

This extension colors bracket pairs based on their positioning in the code i.e. bracket pairs adjacent to each other will have different set of color from each other.

This makes the code look really clean and makes it easy to figure out the block of code you want to go to.

Image description

4. Indent Rainbows:

This extension is not all that different from the Bracket Pair Colorizer, just that it does the same with levels of indentations which can prove to be helpful in a language like python.

Image description

5. Live Server:

Not much needs to be said about one of the most popular and useful extensions of all in vscode where you can see live previews and changes of your work with just a single click.

Image description

To explore more and download these extensions visit here:

Visit part 2 of the post here Part 2 ->

Discussion (12)

Collapse
gyuha profile image
Gyuha Shin • Edited on

Numbers 3 and 4 went into basic functions.

Bracket pair colorization 10,000x faster

Improved bracket pair guides

Collapse
hyperloop profile image
Hyperloop007 Author

That's amazing, thanks for sharing.

Collapse
liyasthomas profile image
Liyas Thomas

If you can provide the link to the extensions - it would've been better for readers.

Collapse
hyperloop profile image
Hyperloop007 Author

Added the links as you said I should

Collapse
hyperloop profile image
Hyperloop007 Author

Thanks for the feedback @liyasthomas I will be sure to make those changes.

Collapse
arsalannury profile image
ArsalanNury

those are amazing
thank you

Collapse
hyperloop profile image
Hyperloop007 Author

Glad I could help

Collapse
azlan_syed profile image
Azlan-Syed

don't forget to add code runner and exe runner extension in part 2

Collapse
arcahyadi profile image
arcahyadi

Auto rename tag is new for me, thx

Collapse
spandyboss profile image
SpandyBoss

I liked the auto rename extension the most thanks for posting this .
Keep it up
Good luck !

Collapse
azlan_syed profile image
Azlan-Syed

Well i use live server personally thanks for other extensions

Collapse
azlan_syed profile image
Azlan-Syed

the extension for auto closing tag in html is kinda copypasta cuz we already have emet here