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

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

ยท

4 min read

Featured on Hashnode

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

image.png

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

change-case.gif

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

toggler.gif

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

cursor-align-1.gif

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

project-manager.png

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