loading...

VS Code extensions you may not have heard of before

thegeoffstevens profile image Geoff Stevens ・3 min read

One of the best features of VS Code is its large marketplace of extensions. With nearly 10,000 extensions now available, VS Code can be tweaked and customized to supercharge your workflow.

I'm always keeping an eye out for new and underrated extensions. So, if you're looking for a few more tools to add to your code editor, I've compiled a list of VS Code extensions.

Create impressive images of your source code

Carbon-Now-Sh uses the site carbon.now.sh to create sleek screenshots of your code. If you want to use code snippets on blog posts or in presentations, Carbon is a fantastic tool.

Carbon screenshot

To use Carbon-Now-Sh, highlight a snippet of code in VS Code that you’d like to convert to an image and type Alt-Cmd-A or open the command palette to access the Carbon commands. The extension opens a browser window on the carbon site with your highlighted code properly formatted and ready to be exported as an image.

Control your music

If you enjoy listening to music while you code, vscode-spotify lets you control Spotify from within VS Code.

The status bar shows you the song that is currently playing and allows you to play, pause, and change songs. The extension even has a button to find the lyrics of the song you're listening to and display them in a new tab.

vscode-spotify screenshot

In addition to the status bar controls, a variety of commands make controlling Spotify from your editor a seamless experience.

vscode-spotify screenshot

Send a message

Slack (not directly affiliated with the company Slack) helps you quickly send messages to your colleagues through your Slack workspace. By using the command palette to type your messages and choose your recipients, Slack makes sending quick messages easy.

Slack screenshot

If you need more robust messaging functionality, CodeStream allows you to attach messages and comments to specific blocks of code. Team members can discuss and annotate their code at the source.

CodeStream screenshot

CodeStream is free to use, but will eventually roll out a paid tier as well.

Color your windows

Window Colors gives each new VS Code window a unique color based on a hash of the root directory name.

Window Colors screenshot

Window Colors adds a little color to your workspace and can help you keep track of different windows and projects.

Color your code

Color Highlight is a small extension that highlights hex codes and RGB values with their corresponding color.

Color Highlight screenshot

Seeing colors displayed within your code is incredibly helpful when making design decisions.

Stop typing console.log

Turbo Console Log inserts console.log snippets quickly into your code. Select a variable you would like to debug, type ctrl + alt + l, and the extension will automatically insert a line to log the variable.

Turbo Console Log screenshot

You can also comment out all log messages inserted by the extension by using the shortcut alt + shift + c.

Take a break

Visual Snake Code lets you fire up a quick game of snake in VS Code if you need a quick distraction.

Visual Snake Code screenshot

Just be sure to open up the game in an empty tab, or else it might overwrite your existing work.

That's my list! Are there any other extensions that you think are underrated?

Discussion

markdown guide
 

I don't see any reasons to install these extensions, thus they are not underrated but useless for me at least. I mean, why would you want to control Spotify or play Snake inside your editor/IDE? CodeStream looks interesting, though.

 

i add a nuance here, some extensiosn can be of use to certain people (messaching, css colors)
however, i strongly discourage adding functionality that has nothing to do with coding (spotify ? really ?) they serve no real need except avoiding ONE ALT-TAB and moreoever they overload VScode which in itself has some issues with performancs already.
We need to focus on our work not on bells and whistles.

 

vscode-spotify is #productivity, because it prevents you from switching to the Spotify app which is not just a separate window but a big distraction, with its flashy interface and discovery features.

Personally, I just use keyboard media keys. Maybe I should add a binding for liking the current song.

 

Window Colors it's a god send when dealing with multiple projects 🙏thanks

 

Turbo Console Log inserts console.log snippets quickly into your code. Select a variable you would like to debug, type ctrl + alt + l, and the extension will automatically insert a line to log the variable.
I actually made a custom snippet for that, because I didn't know this kind of extension existed !
GIF
Here is the config I have:

  {
    "key": "cmd+k cmd+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "langId": "javascript",
      "name": "Print to console"
    }
  },

And the snippet itself :

"Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1', ${TM_SELECTED_TEXT});",
        ],
        "description": "Log output to console"
    }
 

Really, Color Highlight is the only extension of these that's at least remotely useful.

Controlling music from my IDE? Dude, that's what media keys are for.

VSCode is built on top of Chromium, it's a miracle that it's fast. No need to slow it down installing 10s of extensions.

Here's useful (and relatively unpopular: <100k downloads)one though: github.com/CoenraadS/Bracket-Pair-...

 

Nice find with the bracket colorizer! Could be really helpful.

 

I will try vscode-spotify, great article!

 
 

Ok, you caught me. Playing snake in VS Code might not be the best for productivity... Maybe it needs a time limit!

 
 

It's valuable, you don't always have debugger setup on quick jobs.