10 must know VSCODE shortcuts and tricks

VSCODE is by far the best code editor I have ever worked with because it supports all the languages that I need on a daily basis (PHP, JavaScript, HTML, CSS, TypeScript, Python, SQL) as well as Angular. It also has an outstanding built-in terminal and out of the box support in GIT. All these features are wrapped in a beautiful and convenient envelope. One of the main reasons for convenience is the multitude of keyboard shortcuts.Here is the list of some keyboard shortcuts and other tricks.

# 1. The command palette

Want to see all the commands that your editor has to offer? Press:

F1

To open the command palette.

# 2. Search for files in the project

If you want to search by file name, type:

CTRL + P

The search is among all the file names in the project and it offers excellent auto-completion.

# 3. Search and rename

To find all the cases of a function or a variable name put the cursor on the name and press:

SHIFT + F12

which opens all the files that contain the name.

To rename a function or a variable in the current file:

CTRL + H

And to rename in all of the project:

CTRL + SHIFT + H

# 4. Navigation inside the files

To navigate through all the functions in a file, type:

F1

and in the command palette that opens delete the arrow and type instead:

@:

If you want to go to a line, type in the command palette:

:XXX

where XXX is the line number

or press CTRL + G and type line number in box.

To navigate to the end of the file, press:

CTRL + END

to the beginning of the file:

CTRL + HOME

and to scroll the file up and down:

CTRL + ⇑

or

CTRL + ⇓

# 5. Working with the multi-cursor

To insert the cursor in multiple places in the file:

ALT + CLICK

And to cancel the last cursor operation:

CTRL + U

# 6. Rich language editing

To format the code all you need to do is type:

ALT + SHIFT + F

To add or remove a single line comment:

CTRL + /

And to toggle a multi-line comment:

SHIFT + ALT + A

# 7. VSCODE Emmet

Emmet is a plugin which makes it very easy to write HTML by writing abbreviations instead of the full markdown, and it is built into VSCODE.

Write the Emmet abbreviations and then press:

TAB

# 8. File management

To copy the path to the current file, press:

CTRL + K

leave, then press:

P

To see the file in the explorer:

CTRL + K   R

# 9. Controlling the display

To toggle the sidebar:

CTRL + B

Zoom in or out:

CTRL + + / –

One of the main benefits of VSCODE is the integrated terminal. To toggle the visibility of the terminal:

CTRL + `

The backtick ` is the key at the upper left corner of your keyboard.

Zen Mode lets you focus on the code by hiding everything except for the editor (no sidebar and terminal) and going full screen. To get into the Zen mode:

CTRL + K

Remove your fingers then press:

Z

To get out of the mode press ESC twice.

# 10. Miscellaneous

To navigate between the tabs:

CTRL + TAB

And finally, to cancel the last action:

CTRL + Z