DEV Community

Cover image for VS Code Shortcuts That I Would Teach Myself if I Had a Time Machine With Limited Fuel
Vitor Paladini
Vitor Paladini

Posted on Edited on Originally published at paladini.dev

VS Code Shortcuts That I Would Teach Myself if I Had a Time Machine With Limited Fuel

— "Hey, it's me. Listen up, I don't have much time."

— "Wait, what?! What is happening?! Who are-How did you get in my house?! Wh-why do you look so much like me?!"

— "I am you, you dum-dum. I came from the future specially to teach you some VS Code shortcuts. Now..."

— "Wait. Are you serious? You could've brought back lottery results, stock market data, but you came all the way here to teach me freaking VS Code shortcuts?!"

— "Listen, I really don't have much juice left on this thing... Just sit and pay attention please, this is impor..."

— "Couldn't you have written these shortcuts, you know, on a piece of paper?"

— "Shut up! This is important!"

— "Okay, okay..."

— "So, you should stop clicking for files in File Explorer and start using Command/Ctrl+P, then type the file name. Add :N and it will open exactly at that line number"

Example gif

— "Ooooh, we have hologram gifs in the future, nice example"

— "I know, right? Also, stop navigating the File Explorer with your mouse altogether and just use Command/Ctrl+Shift+E and arrow keys, ok?"

Example gif

— "Ok, cool..."

— "Now, if you ever need to focus on the panel again, instead of clicking the edit area, just press Command/Ctrl+1 and it will focus the first open panel"

Example gif

— "Cool, cool cool cool cool cool no doubt"

— "Use Command+Shift+[ and ] to navigate through file tabs, try Alt+Left and Right if you run Windows in this timeline. This will save you a lot of time"

Example 3 gif

— "Hard to think of it as a lot of time but, yeah, okay… You're the one with the time machine"

— "Use Command/Ctrl+B to toggle the editor sidebar, it will save you some space when coding on small screens"

Example gif

— "I knew that one!"

— "Instead of scrolling so much, use Control/Ctrl+G to go straight to the line you want, do you copy?"

Example gif

— "Roger that"

— "Use Command/Ctrl+Shift+L whenever you need to select all occurrences of some text

Example gif

— "Handy! Next one please."

— "Command/Ctrl+W closes the current tab, Command/Ctrl+Shift+T reopens it"

— "The usual, nothing new he..."

Example gif

— "Wait, I have to return now. Command/Ctrl+Shift+H is Find & Replace, you'll always forget this one, don't be too hard on yourself"

Example gif

"Wait! I have so many questions! How did I even get a time machine? Does this creates a new parallel universe? Will 49ers ever win the Super Bowl again? Hey, wait! Waaait."


EDIT: There is a whole lot of great shortcuts in the comments, you definitely should check them!


Repo in the examples is forem.

Gifs (with a hard G) were recorded with Kap on a 680x416 size with 12 fps.

VS Code theme is Cobalt2 and the font is Envy Code R.


Hey, let's connect 👋

Follow me on Twitter and let me know you liked this article!

And if you really liked it, make sure to share it with your friends, that'll help me a lot 😄

Top comments (46)

Collapse
 
paulasantamaria profile image
Paula Santamaría •

Best "vscode shortcuts" post I've ever read. Extra points for the b99 reference.
Next time you go back make sure to teach your past self this one: Shift +Alt + F. It will automatically format your code (if you have a formatter installed for that language).

Collapse
 
diogosouza profile image
Diogo Souza •

This one is really useful. The Mac version is Option + Shift + F

Collapse
 
vtrpldn profile image
Vitor Paladini •

Thanks, Paula. Glad that someone caught that 😄

Shift + Alt + F is also pretty great, thanks for sharing!

Collapse
 
maxime216 profile image
maxime216 •

You can also configure VSCode to run this onSave as instance which allow you to dont forget formatting ;)

Thread Thread
 
paulasantamaria profile image
Paula Santamaría •

Love this idea, thanks!

Collapse
 
pavelloz profile image
Paweł Kowalski •

I find "move line up/down" shortcut very useful.
Also cmd+a (beginning of the line) and cmd+e (end of line) very useful - not only in vscode, just in general, including terminal.

Collapse
 
drew_mc profile image
Drew McConville •

Great one! (fyi this was Ctrl+A/E on mac for me)

Collapse
 
milhod profile image
Milho •

Do you know how long I tried to find this info? Thank you! Lot of my time will be saved

Collapse
 
pavelloz profile image
Paweł Kowalski •

Glad i could help :-))

Collapse
 
vtrpldn profile image
Vitor Paladini • • Edited

Man, I kid you not, that was literally my expression when I tried your suggestion.

amazed

Fantastic, never even knew that this kind of navigation was possible.

Collapse
 
bytejunkie profile image
matt short •

can't see this one mentioned elsewhere, but i must use it every hour.

CTRL + / >> comment/uncomment a line or selection

also mentioned elsewhere, but different

CTRL + ' >> open a terminal window (but this one is apostrophe, not backtick)

Collapse
 
cyberhck profile image
Nishchal Gautam •

I use forward and backward button on my mouse

Collapse
 
maxime216 profile image
maxime216 • • Edited

Good article that will probably help many people :)
Well, some other things that are usefull =>
(Sry Idk for windows)
Command + d : select current word (really essential shortcut) and, if you press it again, it will select the next occurence of this word :)
And an other one which allow you to work on several line at the same time:
Command + option + arrow (up or down), then do what you want with your selected lines (esc to leave this mode !)

Collapse
 
pzelnip profile image
Adam Parkin •

The move line up/down is like my #1 used hotkey.

The other one I use a lot that's similar is SHIFT+ALT+up/down for duplicating the current line above or below.

Collapse
 
rajatkantinandi profile image
Rajat Kanti Nandi •

If you are on mac with touchbar you can also press the arrow keys in the touchbar. Super convenient.

Collapse
 
vasilevas profile image
Radu Pacurar Vasile •

Nice post and nice replies. I'll also add some shortcuts I'm using and I didn't see here.

  1. Select several lines. SHIFT+ALT+i will create multicursor. Then CMD+LEFT/RIGHT to go to the beginning/end of the lines.
  2. CMD+P. Then > to see the latest command, or : to jump to specific line. For example, if I have some text I want to uppercase it, I select the text, CMD+P, then type > and start typing uppercase. You will see a Transform to Uppercase command :)
Collapse
 
leob profile image
leob • • Edited

Control-Shift-P (or Command-Shift-P) is the "master key" which shows your most recent commands, and allows you to search for any other command, including keyboard shortcuts - learn this one first, and then gradually you'll learn the rest ...

Control-Q is also one I use a lot - switching between the Explorer view, the Source Control view and the Debug/Run view.

Ah and then Control-] or Cmd-] (on OSX) to jump to end bracket/begin bracket is a powerful one.

Collapse
 
mmanousos profile image
Melissa Manousos •

CMD + ] on my Mac causes the line to indent (like using TAB) rather than jumping to brackets. I wonder if you have mapped your hot keys differently.

Collapse
 
leob profile image
leob •

Ah yes maybe I remapped it, some key combos are unintuitive or conflict with other things so then I'd remap them.