DEV Community

loading...
Cover image for 14 VS Code Shortcuts to Supercharge Your Productivity

14 VS Code Shortcuts to Supercharge Your Productivity

Domagoj Vidovic
Frontend Engineer in a London tech-startup. Let's make our Frontend lives more magical ✨ JS/CSS/HTML enthusiast
・3 min read

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.

Discussion (41)

Collapse
teja463 profile image
Brahma Teja Ponnuru

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

Collapse
mightycoderx profile image
MightyCoderX

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!

Collapse
darrylnoakes profile image
Darryl Noakes • Edited

Moving lines is Alt + Down/Up by default.

Collapse
manoharreddyporeddy profile image
Manohar Reddy Poreddy • Edited

If you have installed notepad++ keymap like me:

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 + \
Enter fullscreen mode Exit fullscreen mode
Collapse
darrylnoakes profile image
Darryl Noakes

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

Collapse
manoharreddyporeddy profile image
Manohar Reddy Poreddy • Edited

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

Collapse
codewithshahan profile image
Programming with Shahan

Yeah, I use this alternate commands.

Collapse
manoharreddyporeddy profile image
Manohar Reddy Poreddy

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

Thread Thread
codewithshahan profile image
Programming with Shahan

Yep, me too.

Collapse
leob profile image
leob • Edited

You forgot what might be THE most powerful shortcut/feature in VSCode: navigate back/forward! (navigation history, not 100% sure what it's really called)

So, it works like this:

You move around in the code, e.g. you jump to a method, perform a search, go to the top of a file, go to the bottom of a file, open a new file, and so on and so on, anything that changes your "location" in the source code - now "navigate back" let's you instantly go back to the previous "places" where you've been (and "navigate forward" to move in the other direction).

I'd call it "super powers", if you learn only one shortcut, then learn this one.

P.S. and the second most useful feature is that you can override all of these keyboard shortcuts - I find some of them way too complicated and impossible to remember (especially having worked with IDEs before, which has similar actions but different keys for them) - so I just redefine a bunch of them.

Collapse
darrylnoakes profile image
Darryl Noakes

VS Code calls this "cursor undo/redo". I really need to use this more often 😄.
The default for undo is Ctrl + U. Redo has no binding by default.

Collapse
leob profile image
leob

Not sure if that's what it's called, but I've (re)defined it like this, in keybindings.json:

{
    "key": "ctrl+up",
    "command": "workbench.action.navigateBack"
},
{
    "key": "ctrl+down",
    "command": "workbench.action.navigateForward"
},
Enter fullscreen mode Exit fullscreen mode

The internal name is "workbench.action.navigateBack" and "workbench.action.navigateForward", and I've assigned "control-up" and "control-down" to it (left and right would have been more logical, but somehow that didn't work).

This is incredibly powerful and I have the impression that not a lot of people know or use it, it's kind of tucked away and doesn't even have default key bindings.

Thread Thread
darrylnoakes profile image
Darryl Noakes

Sorry, I mixed up the two. I found cursor undo/redo in the keybindings menu, and thought it was that. It is like a much more toned-down version of Navigation. It only changes your cursor position, and skips to the beginning of the file if the "history stack" is empty.

Navigation is so much better!, as it navigates between files, and works at all times, not just when an editor is focused.

My VS Code keybindings for Navigation:

  • workbench.action.navigateBack: Alt + LeftArrow (default)
  • workbench.action.navigateForward: Alt + RightArrow (default)
  • workbench.action.navigateToLastEditLocation: Alt + K (default was Ctrl + K, Ctrl + Q)
Thread Thread
leob profile image
leob

Ah nice, I didn't know about the other one, but yeah "navigation" is indeed brilliant because it also navigates backwards/forwards across files ...

Thread Thread
darrylnoakes profile image
Darryl Noakes • Edited

left and right would have been more logical, but somehow that didn't work

Ctrl + LeftArrow/RightArrow don't work because they are Windows keyboard controls (also in pretty much all OSes). They navigate to the left and right of words.
For example (| represents cursor):
"I am some tex|t." => LeftArrow => "I am some |text."
"I am| some text." => RightArrow => "I am some| text."

Thread Thread
leob profile image
leob

Yeah that's why I chose different key combos for nav prev/next :)

Collapse
dhruvgarg79 profile image
Dhruv garg

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

Collapse
yatki profile image
Mehmet Yatkı

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.

GitHub logo yatki / vscode-surround

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

Surround

Visual Studio Marketplace Visual Studio Marketplace GitHub last commit License


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 1

Demo 2: Wrapping multi selections

Demo 2

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




Cheers, 🚀🖖

Collapse
haritsinh profile image
Haritsinh Gohil

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

Collapse
darrylnoakes profile image
Darryl Noakes

Yes, that is the default.
You can go to the keyboard shortcuts settings menu (shortcut: Ctrl + K, Ctrl + S), find it there (either the key combo or the command), and look at the Source column.
Default is VS Code's default binding, User is one you added or edited, and Extension is one added by an extension.

Collapse
haritsinh profile image
Haritsinh Gohil

ok thanks dude.

Collapse
cenacr007_harsh profile image
KUMAR HARSH

Very useful post Domagoj.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

Thanks mate!

Collapse
abdadeel profile image
Abdullah Adeel (AB) • Edited

To duplicate a line or any block of code, if it line you can shift + alt with up or down arrow. Same shortcut is for block of code when selected. ✌🏼

Collapse
skyridertk profile image
skyridertk

14.1 Wrap Text
Alt + Z

Collapse
mackenzyman profile image
MackenzyMan

Ctrl + Enter go to next line no matter where the cursor is
Shift + Ctrl + Enter go up

Collapse
pavelee profile image
Paweł

Thank you!

Collapse
queencykoh profile image
queencykoh • Edited

For #5 to rename press F2 😊

Collapse
snkhan300 profile image
Sardar Nawab Khan • Edited

Copy a line. A better way to do it is. option+shift+down arrow (mac)

Collapse
coldlombax profile image
John

I like to use CTRL + X, to cut a line, good for reshuffling code!

Collapse
cristobalnyram profile image
Cristobal Nyram

Great post, Thanks for you

Collapse
am_rahuls profile image
Rahul

Great write up! Here is my shortcut

Alt + Shift + F -> Auto indent code

Collapse
jlangz profile image
Jakob Langseth

CTRL/CMD + / to comment out the current selection

Collapse
arvind625 profile image
Arvind Dhakar

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

Collapse
sdubie profile image
SDubie

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

Collapse
rtpharry profile image
Matthew Harris

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

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

Collapse
dinesh_jumnani profile image
Dinesh

CTRL + g for GoTo Line Number in the current file.

Collapse
jppan profile image
jppan

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

Collapse
martinms profile image
Martin Mulyo Syahidin

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