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
#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.
#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.
#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.
#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.
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!
