7 Unique Visual Studio Code Extensions

SWAP Inc.
5 min readJun 3, 2021

--

A List of Unique Visual Studio Code extensions that keep up our workflow great.

Visual Studio Code is the most popular text editor that is hailed as the best for the most time for all kind of development tasks. Visual Studio Code holds 46% of entire text editor usage in the whole world as per WakaTime in 2020. What makes VSCode so special? The reasons can be Minimalism, Familiarity, Easy to use, etc. But deep inside we all know it is the Extensions that make us love VSCode so much.

In this blog, we will see the 7 Unique Visual Studio Extensions.

1. Music Time for Spotify

Listening to music while coding is one of the common relaxing ways for most people. This extension allows us to connect your Spotify account and access your playlists and podcasts. Music Time does not support Apple Music & Play Music. To install Hover Here.

Sidebar view of Music Time with Spotify

For Apple Music users - Hover Here. But it does not provide much functionality as Music Time for Spotify Does. Sorry Play Music fans.

2. Code Time

Code Time is an excellent extension in Visual Studio Code that can help you to obtain a detailed analysis of the work you have done for a speculated period. Like Screen Time in iOS and Digital Wellbeing in Android, Code Time is for Visual Studio Code. To install Hover here.

Sidebar View of Code Time

Users can look at the detailed analysis in the Dashboard section present in the sidebar of the VSCode. Code Time also provides the features to connect with a Slack Workspace of your choice & it requires Slack access. Using Code Time you can massively increase your productivity by obtaining metric analysis.

3. Bracket Pair Colorizer

After looking at productivity-based extensions you might have been exhausted pretty much. So, let us look at some extensions that pamper us from the hassle and get the work done with ease.

Such an extension is Bracket Pair Colorizer, it simply colors the various opening and closing brackets with differentiated color when there are more brackets. This greatly helps in finding that function’s ending brackets or the ending bracket of get method in Node.js whatever you want. To install Hover Here.

An example of how Bracket Pair Colorizer works

4. Font Awesome Auto-complete & Preview

Everyone in the frontend web development domain knows what is Font Awesome. If you don’t know or you’re not a frontend developer. Here it is, Font Awesome is a huge icon library that we make use of in our projects with the integration of Font Awesome CDN. Keeping that aside, this extension makes a great deal in our work. How? Let us see.

This great extension eases out our hassle of going into the font awesome site, again and again, to cross verify the class of an icon that we are going to use in the project by showing the list of icons that is available right after you hit “fa-” & it also shows the preview of the icon which helps us to cross-check within the VSCode. To Install Hover Here.

How Icons’ Class suggestions appear
How Icons’ Preview appear

5. VS Color Picker

Let us consider you are vigorously working on that Website that you need to finish on the speculated deadline as a task. You don’t know what color to include on certain areas and you can’t even randomly type out the hex code or RGB code or does not have much time to look at the Color Hunt (Hover for the link). All you need is random colors but relevant. Well here is your solution.

VS Color Picker is a simple yet enormously powerful extension that allows the user to pick up the color randomly using a color picker or a color pallet that is provided by the following extension without the external aid for color choosing. To install Hover Here.

Color Pallet in VS Color Picker

6. Cobalt2 Theme Official

Productivity, Reduced effort are what we saw in the above extensions. It is the right time now to look at the eye-pleasing aesthetic extensions now. Fine, you have used the Code Time to get an analysis of your work time, you’ve surely got to flex that but what did that cost? The most obvious answer would be eye strain. Well, now we will look at a couple of theme extensions that will go easy on your eyes.

Cobalt2 Theme Official is a very aesthetic and eye-pleasing dark theme that has dull navy blue as the background and contrasting text colors which perfectly blends in. To Install Hover Here.

Sample Code for Cobalt Theme

7. JetJet-theme

The Last Theme “Cobalt2 Theme Official” is a dark theme which most of the developer prefer to live up to the expectation of a quote “Developers live in dark”. If you say or feel you are different from the rest, you are offending the rest. No, relax that was for fun. Being unique is actually a great thing to look upon. So we will present you an actually good light theme for your VSCode setup.

JetJet-theme is a complete package theme that has inbuilt dark themes too. It provides much flexibility and also has lines indicating the starting and ending tag in a code. Give it a try ❤. To Install Hover Here.

Sample Code for JetJet Theme

Hope you all enjoyed reading it as well as enjoyed using the extensions. Thank you for reading.

--

--

No responses yet