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.
Top comments (39)
For #7 Duplicate line -> Alt + Shift + Down Arrow to create a duplicate line.
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!
Moving lines is
Alt + Down/Up
by default.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.
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.Not sure if that's what it's called, but I've (re)defined it like this, in keybindings.json:
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.
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 wasCtrl + K, Ctrl + Q
)Ah nice, I didn't know about the other one, but yeah "navigation" is indeed brilliant because it also navigates backwards/forwards across files ...
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."
Yeah that's why I chose different key combos for nav prev/next :)
If you have installed notepad++ keymap like me:
Alternate commands (Windows verified)
My delete line is
Ctrl + Shift + K
, which VS Code says is the default.Duplicate line's default is
Shift + Alt + Down/Up
.Oh .. my bad
This notepad++ keymap I have installed:
marketplace.visualstudio.com/items...
Yeah, I use this alternate commands.
Cool ( some of the main commands didn't work for me :) )
Yep, me too.
My favourite is
CTRL+D
multi-cursor select same words.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
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
to get list of commands and pick one of them.
List of commands
surround.with
(ctrl+shift+T)surround.with.if
surround.with.ifElse
Cheers, 🚀🖖
In my windows pc
Ctrl + G
is for Goto Line not search for next occurence, is it default?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 theSource
column.Default
is VS Code's default binding,User
is one you added or edited, andExtension
is one added by an extension.ok thanks dude.
Very useful post Domagoj.
Thanks mate!
To duplicate a line or any block of code, if it line you can
shift + alt
withup
ordown
arrow. Same shortcut is for block of code when selected. ✌🏼14.1 Wrap Text
Alt + Z
Great write up! Here is my shortcut
Alt + Shift + F -> Auto indent code