5 min. read

October 07, 2021

VS Code

20 VS Code Shortcuts For Pro Developers

Code faster with these VS shortcuts

Viduni Wickramarachchi

Viduni Wickramarachchi, Software Engineer

VS Code is one of the most used code editors among developers, and it has some amazing features to help developers increase their coding speed.

So in this article, I'm going to go through 20 Visual Studio Code shortcuts that I find the most convenient for me when I'm coding. No worries if it doesn't apply to you, hopefully, there will be at least a couple of shortcuts you can learn and apply when you next open VS Code. Speaking of opening...

The sidebar on VS code can be opened and closed without clicking on the left-hand side tab using the following VS shortcuts.

  • Mac — Command + B

  • Windows — Ctrl + B

  • Ubuntu — Ctrl + B

Closing the sidebar is very useful when you are in the split editor mode.

Opening and closing sidebar Vs shortcuts

2. Select word

This is used to select the word where your cursor currently is in VS code studio.

  • Mac — Command + D

  • Windows — Ctrl + D

  • Ubuntu — Ctrl + D

If you keep pressing the shortcut more than once, you can keep selecting the same occurrence of the word.

Select word vs shortcuts

3. Split Editor

A split editor (a side-by-side editor) is often useful if you need to compare two files or refer to another file while making changes to a different file in Visual Code Studio.

  • Mac — Command + \ or 2,3,4

  • Windows — Shift + Alt + \ or 2,3,4

  • Ubuntu — Shift + Alt + \ or 2,3,4

Split Editor visual studio shortcut

4. Code folding

If the file is too long, we might need to fold and unfold blocks of code to understand the code better.

This can be done using the following VS code shortcut:

Folding the innermost uncollapsed region at the cursor:

  • Windows/Ubuntu — Ctrl + Shift + [

  • Mac — Command+ Option + [

Unfolding the collapsed region at the cursor:

  • Windows/Ubuntu — Ctrl + Shift + ]

  • Mac — Command+ Option + ]

5. Copy line up/down

If you need to copy the current line to the line above or below, the following VS shortcut can be used.

  • Mac — Shift + Option + Up/Down

  • Windows — Shift + Alt + Up/Down

  • Ubuntu — Ctrl + Shift + Alt + Up/Down

Copy line up/down vs shortcut

6. Code formatting

Code formatting allows indenting the code based on the rules already set up in the editor.

  • Windows — Shift + Alt + F

  • Mac — Shift + Option + F

  • Ubuntu — Ctrl + Shift + I

7. Trim trailing white spaces

This will help get rid of white spaces at the beginning or end of the line.

Trim trailing white spaces vs shortcut

You can change your VS code properties to trim whitespaces automatically in your settings by modifying the user settings tab like below:

Preferences > Settings > User Settings tab

Add a new "files.trimTrailingWhitespace": true setting to the User Settings documents if it's not already there. Afterwards, when you save a file, this will be automatically applied, and the whitespaces will be removed.

8. Join line

This Visual Code shortcut allows you to join the selected set of lines into a single line.

Join line vs shortcut
  • Mac — Ctrl + J

  • Ubuntu, Windows — Open keyboard shortcuts from File > Preferences > Keyboard shortcuts, and bind editor.action.joinLines to a shortcut you prefer.

9. Quick file open

Quick file open vs shortcut
  • Mac — Command + P

  • Windows/Ubuntu — Ctrl + P

10. Command Palette

This code shortcut is one of the most important key combinations to know in VS Code. You can access all available commands based on your current context using:

  • Windows/Ubuntu: Ctrl +Shift + P

  • Mac: Command + Shift + P

Command Palette vs shortcut

11. Toggle terminal

It’s common to use several terminals when developing a web application, and you can easily toggle between them using:

  • Mac — Command+backtick (Command+`)

  • Windows/Ubuntu — Ctrl+backtick (Ctrl+`)

12. Switch Tabs

This shortcut allows you to switch between the sections you’ve split.

Switch Tabs vs shortcut
  • Mac — Command+1, Command+2, Command+3

  • Windows/Ubuntu — Ctrl+1, Ctrl+2, Ctrl+3

13. Select current line

With this VS code shortcut, you select the current line where your cursor is at.

Select current line vs shortcut
  • Mac — Command + L

  • Windows/Ubuntu — Ctrl + L

14. Delete line

  • Mac — Command + Shift + K

  • Windows/Ubuntu — Ctrl + Shift + K

15. Move line

  • Mac — Option + Up/Down arrow

  • Windows/Ubuntu — Alt + Up/Down arrow

16. Find word/phrase

find word phrase vs shortcuts

If you need to find from the current file

  • Mac — Command + F

  • Windows/Ubuntu — Ctrl + F

If you need to find from the entire project

  • Mac — Command+Shift + F

  • Windows/Ubuntu — Ctrl+Shidt + F

17. Peek Definition

The Peek Definition feature allows you to view and edit the source code of a referenced symbol right on the spot.

Peek Definition vs shortcut
  • Mac — Option + F12

  • Windows/Ubuntu — Alt + F12

18. Rename

This will allow you to rename a component and replace the subsequent occurrences of the component name as well.

Rename vs shortcut
  • Mac/Windows/Ubuntu — F2

19. Multi cursor selection

VS Code supports multiple cursors for fast simultaneous edits. You can add secondary cursors using:

  • Mac — Option + Click

  • Windows/Ubuntu — Alt + Click

Multi cursor selection vs shortcut

20. Duplicate line

You can make the duplications of the same line using:

  • Mac — Command + Shift + D

  • Windows/Ubuntu — Ctrl + Shift + D

Conclusion

As I mentioned, there are a large number of shortcuts we can use with VS Code. However, the above list includes some must-know shortcuts for every developer who works with VS Code.

I hope you found some exciting shortcuts in this list to make your coding more efficient, and if there are any other tips of your own, don't forget to share them in the comments.

Thanks for reading ✌️