Awesome VSCode extensions for a better coding experience [ Part 1 ]
Tags: beginners, vscode, programming, productivity
Published: 2022-06-04 07:54:21

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.

![Auto Close Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwgs7zwzi13bqlguqjif.gif)

*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.


![Auto Rename Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ix2qhh1ykrcudrisciol.gif)

*3. Bracket Pair Colorizer:* ( Now integrated into VSCode )

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.

![Bracket Pair Colorizer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlowfxqsmbh9j83c8ewq.jpg)

*4. Indent Rainbows:* ( Now integrated into VSCode )

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.


![Indent Rainbows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0eh2rsmjybtnmuc3mu4.png)

*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.

![Live Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fdsh89duovgb9luf8v1.gif)

To explore more and download these extensions visit here:

- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
- [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)