5 great VSCode extensions you might not know about

I love extensions that make my life easy. It's like having a superpower! Here are a few that I found in the VS Marketplace, along with my keyboard shortcuts configuration.

1. Peacock by John Papa

Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.

I'm a very visual person. I can spot tiny details pretty fast, like a different accent color, a missing quote, or an extra comma. I also have a lot of ongoing projects. Navigating between all of them and always figuring out on which one I landed increases my cognitive load.

When I cycle through color-coded VSCode windows with [Cmd + ~], I know instantly which project I landed on. No need to read the title bar and no confusion. 🦚

2. change-case by Wayne Maurer

Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word

Because I work as a full-stack developer I usually switch between languages and contexts (front-end javascript and back-end node.js/php/ruby) and because of differently cased languages I always copy and paste differently cased variables Ex: campaign_id in ruby becomes campaignId in JavaScript. No one wants to go through each variable and do the conversion by hand. That's why change-case is a time-saver!

Just select your text (multiple cursors supported), open your command palette and find the casing you want to cast. ✨

3. Toggle Quotes by Brite Snow

toggle quotes.gif

You probably ran into this too. You have a regular single-quoted string in JS and want to interpolate a value inside. Now it's easy with Toggle quotes. It toggles between single-quote ('), double quote (") and backticks (`).

{
  "key": "cmd+'",
  "command": "editor.togglequotes"
}

4. Toggler by HiDeoo

In a similar fashion, I want to easily toggle between true and false or 1 and 0. Toggler is the perfect tool for the job. It's totally configurable and can toggle between whatever items you need. ☯️

{
  "key": "alt+r",
  "command": "extension.toggle",
  "when": "editorTextFocus"
}

5. Cursor Align by Mike Moore

I sometimes want my code to look neat. All equals = or colons : aligned vertically. We could do this by hand, space by space, or, we could use Cursor Align.

Honorable mentions

6. Project Manager by Alessandro Fragnani

Store all your projects in one config file and quickly open them up using your Command palette.

7. Search node_modules by Jason Nutter

search node_modules.gif

We could go and browse node_modules with your mouse, but we want to move faster. We want to have fuzzy search available and quickly select you module inside the Command palette

5 great VSCode extensions you might not know about - 2021 edition