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 😄

Oldest comments (46)

Collapse
 
kelseyleftwich profile image
Kelsey Leftwich

I found this helpful and very funny. :)

P.S. I think the gif under "Use Command/Ctrl+Shift+L" is the gif from "Command/Ctrl+Shift+H"

Collapse
 
vtrpldn profile image
Vitor Paladini

Oh, good catch. Thanks, Kelsey! It was very fun to write as well, glad you liked it 😄

Collapse
 
srgk26 profile image
S R Gokul Krishnan

You should've asked, "why am I still coding in an era where time machines exist?"

Collapse
 
vtrpldn profile image
Vitor Paladini

Well, somebody must have worked on the time machine firmware hahaha

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
 
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
 
diogosouza profile image
Diogo Souza

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

Collapse
 
sharmarajdaksh profile image
Dakshraj Sharma

I didn't even know I needed these. Thank you so much.

Collapse
 
vtrpldn profile image
Vitor Paladini

Happy to help!

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
 
mdhesari profile image
Mohammad Fazel • Edited

So creative and perfect article!

Thank you for sharing it.

What I use every day is opening and closing terminal :

Command/Ctrl + backtick
Command/Ctrl + shift + backtick

Collapse
 
vtrpldn profile image
Vitor Paladini

Command/Ctrl + backtick is toggle Integrated Terminal and Command/Ctrl + shift + backtick creates a new one, right? Thanks for sharing!

Collapse
 
mdhesari profile image
Mohammad Fazel

👌👌

Collapse
 
waseidev profile image
Walther Seidel

in spanish keyboards is:
Ctrl + ñ" (open/closes a terminal)
"Ctrl + Shift + ñ" (open an additional terminal)

Collapse
 
nomade55 profile image
Lucas G. Terracino

Awesome post Vitor, truly a good selection of shortcuts showcased here.!

Collapse
 
andrematias profile image
André Matias

Awesome Post, I had fun now :)

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
 
lucassseverino profile image
Lucas Severino

I had a good laugh at this hahaha
Very helpful!! =)

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan • Edited

My favorites:

  • Ctrl+L. Highlight the current line. Press it N times to highlight the next N lines.
  • Alt+Up/Down. Move an entire line of code (or the current selection) up/down. No more cutting/pasting.
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
 
samuelabreu profile image
Samuel Abreu

My fav is Ctrl/cmd + r, to list/filter functions

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
 
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)