5 VS Code extensions to make you a more efficient and happy developer

Visual Studio Code has become increasingly popular over the past couple of years, reaching 1st place in the 2019 Stack Overflow Developer Survey with 50.7% of respondents choosing it as their favorite development environment. I have been using it for about a year now and have never looked back. It’s highly customizable, has third-party extensions for just about anything, and comes with a ton of great presets and built-in features (like Emmet) that each make your life as a developer just that little bit sweeter.

Below (in no particular order) are 5 of my favorite VS Code extensions, with links to each and a brief description.

#1 change-case

Number of downloads at time of writing: 140,741
https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

This handy little extension does exactly what you think it does, and more! You simply highlight a piece of text (or multiple pieces), run the command, and *poof!*, your text now has your desired casing. This is super useful for when you need to quickly convert your JSON key names from snake_case to camelCase, or when you write constants and functions using the same name. There are loads more use cases and you can convert to just about any casing you can think of, including PascalCase, Sentance case, and kebab-case

Image for post
Image for post
Quickly changing case with the change-case extension

#2 Rainbow Brackets

Number of downloads at time of writing: 227,126
https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets

This extension not only makes your code look extra pretty, but also comes in handy when you have a lot of brackets and parentheses as it will match up the pairs by color, aiding in legibility and keeping you from spending hours trying to find that missing brace that’s broken your page.

Image for post
Image for post
Left: without Rainbow Brackets — Right: with Rainbow Brackets

#3 CSS-in-JS

Number of downloads at time of writing: 28,472
https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js

If you ever find yourself switching between JavaScript style objects and styled-components/classic CSS, this extensions can save you a fair bit of time and effort in converting the syntax. Be warned though that you may still need to tweak a little after, as it won’t convert integers into pixel values.

Image for post
Image for post
Changing format with the CSS-in-JS extension

#4 Bracketeer

Number of downloads at time of writing: 1,818
https://marketplace.visualstudio.com/items?itemName=pustelto.bracketeer

Bracketeer does a few things for you: First, it allows you to quickly toggle between, or remove, 3 different types of brackets (round, curly, square), and 3 different types of quotes (single, double, backtick), starting from the closest pair to the current cursor position. It also allows you to select the text contained within the nearest pair of brackets or quotes, working its way out to subsequent pairs from there.

Using Bracketeer to toggle bracket types and select text between brackets

#5 Auto Add Brackets in String Interpolation

Number of downloads at time of writing: 15,238
https://marketplace.visualstudio.com/items?itemName=aliariff.auto-add-brackets

This last one is pretty simple, but nice nonetheless. It comes with support for many languages and you can add more yourself. This extension saves you a keypress or two when writing template literals. In the case of JavaScript, whilst inside your backticks when you press the $ key, a pair of curly braces will show up with the cursor placed inside, ready for your interpolation.

Auto adding brackets in template literal

That’s it!

There are loads more extensions out there and I encourage you to spend some time perusing the VS Code extensions marketplace to discover more.

I hope you discovered something new and that these extensions will enrich your development experience!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store