Domagoj Vidovic

Posted on Jul 27, 2021

14 VS Code Shortcuts to Supercharge Your Productivity

#vscode #productivity #javascript #tooling

We, software engineers, tend to be extremely efficient beings.

Our goal is to optimize everything, not just the code.

That's why we don't want to spend 10 seconds looking for something on the GUI. We don't want to spend even 2 seconds.

Why would we, when we can do it in 0,1s by using the powerful keyboard shortcuts?

If I repeatedly do the same actions, I always Google for its shortcut. Usually, I find it.

Let me share with you the shortcuts I use every day. I bet you don't know many of them!

1. Search files by name

Ok, we'll start by listing the most common and simples shortcuts.

cmd + P (Mac) / crtl + P (Windows) will open a search field with an incredibly powerful fuzzy search. I probably use this 100+ times a day.

2. Search settings

This one is similar; after clicking cmd + P (Mac) / crtl + P (Windows), just type >. You can now type in any search term, and only settings will be affected.

3. Multiple cursors

This feature is so cool, I wish I could use it everywhere else!

Just press alt and start clicking around the editor. Multiple cursors will appear!

4. Multiple cursors v2

You can do something similar without clicking around. cmd option + arrow down (Mac) / shift alt + arrow down (Windows) will insert an extra cursor below.

Obviously, you can use arrow up to insert a cursor above.

5. Select all occurrences

This one is quite uncommon, but it's extremely powerful! First, you need to select some text.

Then,cmd shift + L (Mac) / crtl shift + L (Windows) select all occurrences of that text. It's so useful for situations like renaming a variable across the file:

Imagine manually renaming a variable repeated 30 times in the file. Nightmare.

6. Delete a line

cmd shift + K (Mac) / crtl shift + K (Windows) does the trick here.

7. Duplicate a line

Put your cursor in the line you want to duplicate.

Press cmd + C, then cmd + V (Mac) / crtl + C, then crtl + V (Windows). Voila!

8. Search in a file

This one is quite familiar across all the common apps (like browsers): cmd + F (Mac) / crtl + F (Windows).

cmd + G (Mac) / crtl + G (Windows) search for the next occurrence, while cmd shift + G (Mac) / crtl + shift + G (Windows) search for the previous one.

9. Replace in a file

If you want to replace the term you searched for, fire cmd option + G (Mac) / crtl shift + G (Windows).

Then, click enter to replace the current occurrence.

If you want to replace them all, click cmd + enter (Mac) / crtl + enter (Windows).

10. Search in all files

Nothing can exist without a good old search in all files.

cmd shift + F (Mac) / ctrl shift + F (Windows) does the trick.

If you want to match text by case, press cmd option + C (Mac) / crtl shift + C (Windows).

You can also match the whole word by pressing cmd option + W (Mac) / crtl shift + W (Windows).

11. Replace in all files

Do you want to replace all occurrences in all files across the project, i.e. search/replace?

Amazing, cmd option + H (Mac) / crtl shift + H (Windows) does the trick.

cmd option + enter (Mac) / crtl alt + enter (Windows) triggers the replacement.

12. Split editor

One tab is not enough, you need many of them! Great, just press cmd + \ (Mac) / alt shift + 0 (Windows). Repeat until you're satisfied.

13. Close tab

This one is the same as in Chrome - cmd + W (Mac) / crtl + W (Windows).

14. Switching between opened tabs

Do you want to open the previous tab? crtl + tab does the trick.

Do you want to go to a tab on a known position? crtl + [index] does that.

Finally, you can pick the tab on left/right by pressing cmd option + arrow left/right (Mac) / crtl page down/up (Windows).

Conclusion

I wouldn't suggest learning all of them by heart immediately - try with one or two of them, and slowly adapt them to your work.

Save this article in case you want to revisit it later.

Using more keyboard shortcuts will increase your productivity.

And oh, it does feel so good.

Oldest comments (39)

KUMAR HARSH • Jul 27 '21

Very useful post Domagoj.

Domagoj Vidovic • Jul 27 '21

Thanks mate!

Brahma Teja Ponnuru • Jul 28 '21

For #7 Duplicate line -> Alt + Shift + Down Arrow to create a duplicate line.

MightyCoderX • Jul 28 '21

Yeah I thought of writing that, but you did it first, thank you. This is two times faster and doesn't overwrite your clipboard, that's why I always use it!

Extra trick!
You can move lines up and down by using Ctrl+Arrow Down/Up, which is faster than using Ctrl + X and Ctrl + V, or Ctrl dragging with the mouse, when you need to move the line nearby!

Darryl Noakes • Aug 2 '21 • Edited

Moving lines is Alt + Down/Up by default.

Paweł Ciosek • Jul 28 '21

Thank you!

Matthew Harris • Jul 28 '21

Minor typo you have used crtl throughout which should be ctrl.

But I just learned a few keyboard shortcuts to quickly replace that 😉

SDubie • Jul 28 '21

For #7 use ctrl + d to duplikate a complete line or the selected text.

Martin Mulyo Syahidin • Jul 28 '21

VS code change my coding life, speed up my work with many usefull extension.

skyridertk • Jul 28 '21

14.1 Wrap Text
Alt + Z

Arvind Dhakar • Jul 28 '21

For #2.
Search for settings => cmd + shift + p

Jakob Langseth • Jul 28 '21

CTRL/CMD + / to comment out the current selection

jppan • Jul 28 '21

For #7 Ctrl + d would work too on windows. This works on almost all the IDEs(JetBrains) :)

Mehmet Yatkı • Jul 29 '21

Hey @domagojvidovic , thanks for the guide.. It's not supported natively but you can also check this little extension of mine. It gives you CTRL + SHIFT + T shortcut to surround your codeblocks with snippets.

yatki / vscode-surround

🔥A simple yet powerful extension to add wrapper templates around your code blocks

Surround

A simple yet powerful extension to add wrapper snippets around your code blocks

Features

Supports language identifiers 🚀New!
Supports multi selections
Fully customizable
Custom wrapper snippets
You can assign shortcuts for each wrapper snippets separately
Nicely formatted (Preserves indentations 🚀New!)
Sorts recently used snippets on top 🚀New!

Demo 1: Choosing a wrapper snippet from quick pick menu

Demo 2: Wrapping multi selections

How To Use

After selecting the code block, you can

right click on selected code
OR press (ctrl+shift+T) or (cmd+shift+T)

to get list of commands and pick one of them.

Hint

Each wrapper has a separate command so you can define keybindings for your favorite wrappers by searching surround.with.commandName in the 'Keyboard Shortcuts' section.

List of commands

Command	Snippet
`surround.with` (ctrl+shift+T)	List of all the enabled commands below
`surround.with.if`	if ($condition) { ... }
`surround.with.ifElse`	if ($condition) { ... } else { $else

…

View on GitHub

Cheers, 🚀🖖

Dhruv garg • Jul 29 '21

My favourite is CTRL+D multi-cursor select same words.

queencykoh • Jul 29 '21 • Edited

For #5 to rename press F2 😊

Manohar Reddy Poreddy • Jul 30 '21 • Edited

If you have installed notepad++ keymap like me:

marketplace.visualstudio.com/items... then

Alternate commands (Windows verified)

   Search files           - ctrl + P
2. Search settings        - ctrl + shift + P

5. change all occurrences - ctrl + F2
   rename symbol          - F2

6. Delete a line          - ctrl + L
7. Duplicate  a line      - ctrl + D

9. Replace in a file      - ctrl + H
12 Split editor           - ctrl + \

Programming with Shahan • Jul 31 '21

Yeah, I use this alternate commands.

Manohar Reddy Poreddy • Aug 1 '21

Cool ( some of the main commands didn't work for me :) )

Programming with Shahan • Aug 1 '21

Yep, me too.

Darryl Noakes • Aug 2 '21

My delete line is Ctrl + Shift + K, which VS Code says is the default.
Duplicate line's default is Shift + Alt + Down/Up.

Manohar Reddy Poreddy • Aug 2 '21 • Edited

Oh .. my bad
This notepad++ keymap I have installed:
marketplace.visualstudio.com/items...

Haritsinh Gohil • Jul 30 '21

In my windows pc Ctrl + G is for Goto Line not search for next occurence, is it default?