One of the best things about VS Code is the rich library of extensions you can use to speed up your coding and make your life easier.
Some of these extensions are paid, but there are tons of quality options that are available for free in the VS Code Marketplace.
In this article, I will be sharing 10 of the free ones for your reading pleasure. Let's dive in.
1. VS Code Auto Rename Tag
This extension lets you rename both opening and closing tags once. This means that wherever you choose to rename from – either the opening or the closing tag – you don’t have to go back to the other tag to do the same thing. It's just automatically renamed for you.
2. Prettier in VS Code
The name “Prettier” is pretty self-explanatory – this extension makes your code prettier by formatting it in a very readable way.
You can choose to either format your code on save or paste.
3. Convert Pixels to Rem in VS Code
Sometimes, you might want your units to be in rem (root em) instead of pixels (px) and vice versa.
Good news – you don’t need to do mathematical conversions yourself because that’s what this extension does for you.
To convert from rem to px and vice versa, press and hold the alt + z keys.
4. VS Code Flexbox Cheatsheet
The Flexbox cheatsheet extension brings a handy Flexbox cheatsheet right into VS Code.
You can use it in two ways: by pressing Ctrl + Shift + P on Windows and Cmd + Shift + P on Mac to pop it up, or you can simply hover over anywhere the display is set to flex.
5. Grid Snippets VS Code Extension
The Grid Snippets extension gives you the ability to code in CSS Grid with simple shortcuts that bring in the snippets for you.
Some of these shortcuts include:
- dg – display grid
- dig – display inline-grid
- gg – grid gap
- gtc – grid-template-columns
- gta – grid-template-areas
There are many other shortcuts available in the docs.
6. Bracket Pair Colorizer
It's easy to get confused by braces in our code. This bracket pair colorizer alleviates that confusion by assigning different colors to braces (brackets, curly braces, square brackets).
You can see in the screenshot below that all the braces have different colors so you can keep track of which are which.
7. Live Server Extension in VS Code
Gone are the days when we all had to reload the browser to see the changes we made to our code.
These days, all you have to do is install the Live Server extension from the VS Code Marketplace, and boom! Every change you make is immediately updated in the browser.
The file you open with Live Server has to be the HTML file. Also, the HTML file must have opening and closing head and body tags.
8. VS Code Icons
VS Code icons is one of my favorite extensions. With it, you get to see your file icon represented in the language or framework/library in which you are coding.
9. Polacode
This extension is a very interesting one to work with. It lets you take beautiful screenshots of your code.
To take a screenshot you just press Ctrl + Shift + P on Windows and Cmd + Shift + P on Mac to bring in the command palette. Then you can search “Polacode” and select it. Just highlight the part you want to screenshot
and press the camera-like icon to take the screenshot and save it on your device.
10. Code Time
Code time is an extension that helps you track your progress and metrics right inside VS Code.
But that’s just the tip of the iceberg. With this super cool extension, you can mute notifications, connect a Slack workspace and set your presence to away, get to know your coding uptime, your progress, and much more.
In addition, you can also invite your team members, which will help you discover the impact of meetings or any other activity.
You get a little feet-like icon when it is installed. From there, you can explore all the features. Surprisingly, it is not paid – it's free!
My friend, Joy Shaheb, has made a video version of this article. Feel free to check it out on YouTube.
Thanks for reading and have a nice time.