DEV Community

loading...
Cover image for 10 useful VS Code shortcuts you should know  ()

10 useful VS Code shortcuts you should know ()

simonpaix profile image Mariana Simon Originally published at learnpine.com Updated on ・3 min read

This is a curated list of the shortcuts you should learn as soon as possible. I really wish I knew them when I started coding. It would have saved me hours of manual typing.

Default shortcuts for Linux. Mac and Windows shortcuts are displayed below if different.

1. Ctrl+P : Displays the search bar to search for files

(Mac: Cmd + P)
You will be navigate between files the entire time. You can type the file name and open it by pressing enter.
search bar

2. Ctrl + Shift + P: Displays the command pallete

(Mac: Cmd + Shift + P)
Displays the command pallete where you can search for an action
command palete

3. Crtl + B : Toggle the sidebar

(Mac: Cmd + B)
Show or hide the side bar where you can navigate through the explorer.
toggle sidebar

4. Ctrl+Shift+E : Move to Explorer window

(Mac: Cmd + Shift + E)
Move to Explorer window where you have your file tree and can navigate using the arrow keys.
move to explorer

5. Ctrl + Shift + M : Quickly shows errors and warnings

(Mac: Cmd + Shift + M)
Everybody likes bug-free code. Shows up the problems panel where you can see identified errors and warnings.
errors

6. Ctrl + Shift + L: Multi cursor selection

(Mac: Cmd + Shift + L)
Add additional cursors to edit all occurrences of the current selection. Usually less error-prone than doing search and replace all.
multiselect

7. Ctrl + D : One by one selection

(Mac: Cmd+D)
Similar to the previous one, but use Ctrl + D if you want to add the occurrences of the current selection one by one. Each time you press the key combination it adds a new occurrence to the selection.
one-select

8. Ctrl+/ : Toggle line comment

(Mac: Cmd+/)
Toggle between commented and uncommented line behavior.
toggle comment

9. Ctrl + Shift + I: Formats the entire file

(Mac: Shift + Option + F, Windows: Windows Shift + Alt + F)
Formats the entire active file or prompts you to install a Formatter extension. I use Prettier extension to format JS code
format

10. Alt + Up or Alt + Down: Move line

(Mac: Opt+Down or Opt+Up)
Pretty straightforward. Move line up and down.
move

Bonus: Wrap with Abbreviation.

Helps you add that missing div tag to an HTML block for example. It is not enabled by default, you need to do it in keyboard shortcuts preferences. Use shortcut 2 listed here (yeah \0/) -> type Preferences:Open Keyboard Shortcuts -> search for Emmet: Wrap with Abbreviation -> choose a key to bind it. I use Alt + M.
wrap

Honarable mention:

Ctrl + Space : Show Suggestions
Shows suggestions to quickly fill properties and other stuff.
suggest

 

About me, let's connect! 👋👩‍💻

 
I'm an avid learner and I love sharing what I know. I teach coding live for free 👉 here and I share coding tips on my Twitter . If you want to, come visit and say hi in the chat 😁
 
 

Discussion (43)

pic
Editor guide
Collapse
equiman profile image
Camilo Martinez • Edited

Excellent recommendations! I would like to add this information:

  • ctrl+i also does the same as ctrl+space it was introduced recently.
  • When using ctrl+d and select more elements than expected, you can undo selections with ctrl+u
Collapse
who8mypnuts profile image
Stan

Thanks! I always wondered about undoing selections when I got too much.

Collapse
anduser96 profile image
Andrei Gatej

Thanks for sharing! Didn't know about Wrap with Abbreviation, that's cool.

Collapse
josef37 profile image
Josef Wittmann • Edited

Fold that stuff! 😄

Have a look at the folding/unfolding shortcuts (I can't post them here, because of my German keyboard). Especailly those which allow you to fold/unfold at your current position. That makes navigating new projects so much easier.

Collapse
airmind profile image
Alex Ágreda

Ctrl + Shift + [ to fold
Ctrl + Shift + ] to unfold

Collapse
kiranjd profile image
kiranjd • Edited

Fold everything: cmd/ctrl + k then 0

Collapse
mostafiz93 profile image
Mostafiz Rahman

This is also useful:

cmd + j to toggle Terminal/Output/Debug Console view

Collapse
simonpaix profile image
Mariana Simon Author

Nice addition. Thanks, Mostafiz!

Collapse
laxedo17 profile image
laxcivo

thanks. While not a shortcut, for errors, Error Lens is amazing! One of the best VS Code extensions.

Collapse
simonpaix profile image
Mariana Simon Author

True! I love it too

Collapse
qq449245884 profile image
qq449245884

Dear Mariana Simon Paixao,may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
simonpaix profile image
Mariana Simon Author

Hi there! Sure, I don't see any problem if you include the original author and source. Can you send me a link when you do so? I have Chinese friends and would like to share with them :)

Collapse
qq449245884 profile image
qq449245884

no problem!

Collapse
vince_amstz profile image
Vincent Amstoutz

Very interesting, I did not know them all, thanks ! 👍🙂

Also, I often use Ctrl + G to go to a particluar number of line.

Collapse
simonpaix profile image
Mariana Simon Author

Nice. I didn't know about this one 👍

Collapse
tilkinsc profile image
Cody Tilkins

I swapped ctrl + d and ctrl + shift + d to delete line and duplicate line. I don't make that much use of selecting one by one. I use ctrl + shift + L which selects all alike more.

Collapse
simonpaix profile image
Mariana Simon Author

Nice tip! Thanks, Cody

Collapse
lokeshsenthilkumar profile image
Lokesh Senthilkumar

shift+alt+down to copy the current line

Collapse
simonpaix profile image
Mariana Simon Author

Good one 👍

Collapse
gpakyoo profile image
Godluck Akyoo

Wrap with Abbreviation, just increased my efficiency by many folds, Thank you.

I would like to add Alt + Shift + Up/Down arrow duplicate line or a block of code selected.

Collapse
simonpaix profile image
Mariana Simon Author

Thanks! Nice addition 👍

Collapse
loganliffick profile image
Logan Liffick

Wrap with abbreviation is a game changer, great list!

Collapse
simonpaix profile image
Mariana Simon Author

Thanks, Logan!

Collapse
testerslol123 profile image
Danny S

Thanks for sharing, I just saw this post, and I will try it in my visual studio code.

The things that I always use is ctrl + P and ctrl + /

Collapse
cespujunk66 profile image
cespujunk66

thanks, very interesting!

Collapse
sebasprogrammer2020 profile image
SebasProgrammer2020

muchas gracias. el bonus estuvo super! thanks a lot

Collapse
andrewbaisden profile image
Andrew Baisden

Great stuff!

Collapse
gilfewster profile image
Gil Fewster

While not a shortcut, using regular expressions with the search box is staggering powerful and well worth exploring.

Collapse
nostop8 profile image
Volodymyr Dovbenko

Before moving lines using alt+up or down, I usually use shift+up or down in order to select multiple lines. Saves some time too.

Collapse
vjnvisakh profile image
Visakh Vijayan

Ctrl shift I was a new one for me. Thanks

Collapse
mcwertgaming profile image
Damon Leven

This is a bit basic, but with STRG+shift+ARROW you can extend your cursor to write on multiple lines at the same time.

Collapse
shubham57396755 profile image
#im_Bshubh

Thanks for Sharing Very useful!

Collapse
youpiwaza profile image
max

Learned a few more. Thanks a lot ;)

Format all file instead of Palette > Reindent. that's cool

Collapse
jonatannietoa profile image
Jonatan Nieto

Wrap with Abbreviation is a cheat that is very useful! Great post!

Collapse
simonpaix profile image
Mariana Simon Author

Thanks, Jonatan! Yeah, I use it a lot!

Collapse
julianperezpesce profile image
Julián Pérez Pesce

ctrl + k + c to comment multiple lines selected
ctrl + k + u to uncomment the multiple lines selected

Collapse
maneesh8040 profile image
Collapse
samuel_marien profile image
Samuel Marien

Thanks, so useful !

Collapse
simonpaix profile image
Mariana Simon Author

Thanks, Samuel!

Collapse
faisalahammad profile image
Faisal Ahammad

Much appreciated

Collapse
chadyka profile image
Jakab Ádám

Great article! 10. Shows the same gif as 4. though. Maybe you could correct that.

Collapse
simonpaix profile image
Mariana Simon Author

Thank, you! Jakab! I corrected that, thanks :)

Collapse
thebuilderekes profile image
Ekeopre Beredugo

Thanks for sharing