DEV Community

Cover image for Useful VS Code Extensions
Anjali Jha
Anjali Jha

Posted on

Useful VS Code Extensions

Here are some efficient VS Code extensions which will help improve your productivity and workflow.


1. indent-rainbow

It is a simple extension to make indentation more readable. This extension colorizes the indentation in front of your text alternating four different colors on each step. Some may find it helpful in writing code for Python.

2. Live-Server

It is one of the most used extension. It launches a local development server with live reload feature for static & dynamic pages.

3. auto rename tag

Useful for writing substantial lines of code. When you rename one HTML/XML tag, it automatically renames the paired HTML/XML tag thus making the process easier.

4. CSS Peek

If you hate having to toggle over to your .css file to check the properties attached to a class or id, with CSS Peek, you can view a hover image of your CSS from within you HTML file. This extension also turns class names and ids into a hyper link that takes you directly to that class or id definition in your CSS.

5. Prettier

Prettier - Code Formatter is incredibly popular for auto-formatting. It automatically formats your code on saving thus making it more organized and easy to work with.

Top comments (4)

terabytetiger profile image
Tyler V. (he/him)

I'm not sure about for XML, but for HTML Auto-rename Tag is a built in setting now called "Linked Editing" 🙂

anjalijha22 profile image
Anjali Jha

Oh! Good to know that