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 • Updated 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 😄

Latest comments (46)

Collapse
 
tranxuanthang profile image
tranxuanthang • Edited

I would rather tell my past self to learn Vim at the age 14. I use VSCode sometimes so it's still good to learn some nice commands though!

Collapse
 
cben profile image
Beni Cherniavsky-Paskin

Alt+1, Alt+2, Alt+3 ... also work for focusing tabs. It also works in Chrome (both Ctrl+digits and Alt+digits), Firefox (only Alt+digits) and gnome-terminal (only Alt+digits), making this the one shortcut to remember! [Linux]

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
 
theoparis profile image
Theo Paris • Edited

Is there a shortcut for creating a new file in the explorer SIDEBAR? I always have to right click first and then use my mouse to do this.

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.

Collapse
 
phongduong profile image
Phong Duong

In my vscode, I use Ctrl+Tab to navigate between tabs

Collapse
 
shanerobinson profile image
Shane Robinson

Funny and so helpful! Thank you and thanks to all the add'l added in the comments! I have a lot of muscle memory learnin' to do.

Collapse
 
vtrpldn profile image
Vitor Paladini

Thanks, Shane! I'm very happy with all the comments, I learned quite a few new shortcuts as well 😄

Collapse
 
mehtanilay10 profile image
Nilay Mehta

My favorite is Ctrl + D to select Next occurrence. And hold ctrl key for using multi cursor.

Collapse
 
japanesemayonnaise profile image
Shimba

You are so funny. Thank you for this!

Collapse
 
vtrpldn profile image
Vitor Paladini

You're welcome, Elliot 😄

I wish I could write like this every time but I have to be particularly inspired to come up with something this silly haha

Collapse
 
giologist profile image
Gio

This is a great list! I Found myself referring back to this after reading it a few days ago :)

Quick observation:

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

For me (I've made no edits that I can recall) this closes all "except" the current tab. And then pressing it again re-opens all. Did you customize this setting?

Collapse
 
mmanousos profile image
Melissa Manousos • Edited

That seems like specialized behavior, @Gio.
The default on VSCode (as well as most browsers and operating systems) is that CMD + W closes the current window.

Collapse
 
idanizi profile image
Idan Izicovich

Nice!!

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
 
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
 
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
 
cyberhck profile image
Nishchal Gautam

I use forward and backward button on my mouse