Mariana Simon

Posted on Apr 14, 2021 • Updated on May 28, 2021 • Originally published at learnpine.com

10 useful VS Code shortcuts you should know ()

#productivity #vscode #webdev #beginners

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 navigate between files all the time. You can type the file name and open it by pressing enter.

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

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

3. Crtl + B : Toggle the sidebar

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

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.

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

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

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.

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.

8. Ctrl+/ : Toggle line comment

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

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

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

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

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.

Honarable mention:

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

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 😁

Top comments (48)

Camilo Martinez • Apr 16 '21 • 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

Stan • Apr 17 '21

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

Mostafiz Rahman • Apr 20 '21

This is also useful:

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

Mariana Simon • Apr 21 '21

Nice addition. Thanks, Mostafiz!

Josef Wittmann • Apr 17 '21 • 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.

kiranjd • Apr 21 '21 • Edited

Fold everything: cmd/ctrl + k then 0

Alex Ágreda • Apr 18 '21

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

Andrei Gatej • Apr 14 '21

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

laxcivo • Apr 15 '21

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

Mariana Simon • Apr 15 '21

True! I love it too

Cody Tilkins • Apr 19 '21

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.

Mariana Simon • Apr 21 '21

Nice tip! Thanks, Cody

qq449245884 • Apr 21 '21

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.

Mariana Simon • Apr 21 '21

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