Ali The Expert

Logo

20-vs-code-shortcuts-developers

Eloquent JavaScript

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.

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.

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

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 + ]

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

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

Trim trailing white spaces

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

    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.

Join line

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

  • Mac — Ctrl + J

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

Quick file open

  • Mac — Command + P

  • Windows/Ubuntu — Ctrl + P

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

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

Switch Tabs

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

  • Mac — Command+1, Command+2, Command+3

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

Select current line

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

  • Mac — Command + L

  • Windows/Ubuntu — Ctrl + L

Delete line

  • Mac — Command + Shift + K

  • Windows/Ubuntu — Ctrl + Shift + K

Move line

  • Mac — Option + Up/Down arrow
  • Windows/Ubuntu — Alt + Up/Down arrow

    • Find word/phrase

    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

    • Peek Definition

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

    20-vs-code-shortcuts-developers