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

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

Raluca Marin's photo

Very helpful, thanks for the tips!

Edidiong Asikpo's photo

Wow! These are awesome extensions.

I am going to download every single one of them today. Thanks for sharing Adrian Marin.

Adrian Marin's photo

I'm glad I could surface some of the more hidden ones. Keep it up! ✌️

Bhargav Ponnapalli's photo

Thanks for this Adrian.

My favourite is probably change-case. Love it!

Good luck for everything!

Adrian Marin's photo

Yeah, I use it every-day!

Thank you Bhargav Ponnapalli! Best of luck to you too!

Katrina Po's photo

These are great! Thanks for sharing.

Adrian Marin's photo

Yeah! For sure!

Ivory O.'s photo

Great post Adrian, I've never really seen beyond the usual VScode, Bracket and Sublime TextπŸ˜‚πŸ”₯πŸ”₯πŸ”₯πŸ”₯

Adrian Marin's photo

Ha ha! I know what you mean.

soumendra kumar sahoo's photo

Toggler looks cool. Thanks for sharing.

Adrian Marin's photo

Yeah. I literally use it every day! πŸ€™