Blog post10 must know VSCODE shortcuts and tricks

10 must know VSCODE shortcuts and tricks

Published August 11, 2018

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. In this tutorial, I have compiled a list of some of my favorite keyboard shortcuts and other tricks that I love to use.

In this tutorial you will learn:

  1. The command palette
  2. Search for files in the project
  3. Search and rename
  4. Navigation inside the files
  5. Working with the multi-cursor
  6. Rich language editing
  7. VSCODE Emmet
  8. File management
  9. Controlling the display
  10. Miscellaneous
  11. Conclusion

# 1. The command palette

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

F1

To open the command palette.

press f1 in vscode to see the command palette

# 2. Search for files in the project

If you want to search by file name, type:

CTRL + P

press ctrl + p in vscode to search by file name

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.

press shift+f12 to see all the occurences of 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

how to navigate inside files with the vscode editor

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

how to work with the multi-cursor

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

how to format code with the vscode

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

working with Emmet and the VSCODE

# 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

ctr + b to toggle the side bar in VSCODE

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.

shortcut to toggle the terminal in VSCODE

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

navigate between tabs with VSCODE

And finally, to cancel the last action:

CTRL + Z

# Conclusion

The list of keybindings in this tutorial is far from being exhaustive. You can download the official document that summarizes the shortcuts.

May interest you

comments powered by Disqus