Visual Studio Code keyboard shortcuts every developer should know
Programming

Visual Studio Code keyboard shortcuts every developer should know

Mishel Shaji
Mishel Shaji

A text editor is an unavoidable tool that every developer should have. Choosing the right text editor can save a lot of time and effort in writing code.

According to Stack Overflow Developer Survey, Visual Studio Code (often called VS Code) is the most popular text editor used by developers worldwide. It has a rich set of extensions to choose from and is available on all major platforms. Here, I'm sharing some useful keyboard shortcuts that can make the experience with VS Code even better.

Ctrl + Home/End - Go to the beginning/end of the file

While editing pages with hundreds or thousands of lines, you can easily scroll to the top or bottom of the file by pressing Ctrl + Home (Navigates to the top) or Ctrl + End (Scrolls to the last line).

Rename in VS Code
Go to beginning and end of a file

Ctrl + F4 - Close the current file

To close files that you no longer need, press Ctrl + F4. This will close the active file in the editor.

Ctrl + Enter - Insert a new line below

You might be wondering why we should use Ctrl + Enter to create a new line instead of using Enter. Pressing Enter key splits the line into two based on the position of the cursor. But the Ctrl + Enter key combination inserts a new line just below the line without splitting it.

Ctrl + / - Toggle comment

This is a very useful shortcut that you gonna use frequently, especially if you write comments for your code. You can also use this shortcut to comment multiple lines by selecting them before using the shortcut. Use the shortcut again to uncomment the lines.

Alt +Up / Down

This shortcut can be used to move a single or a group of lines up or down.

Move code in VS Code
Move code to a different position

Ctrl + P - Go to file

This is one of the shortcuts I like the most. Finding the required file can be difficult if the project contains a lot of files and folders. In such cases, you can use this shortcut and easily find the required file by typing some hints.

Go to file in VS Code
Go To File

Ctrl + F - Find

You might already be familiar with this shortcut. So, I'm skipping this without any explanations.

Ctrl + H - Find and replace

If you have something to find and replace, use this shortcut. Thanks to VS Code's powerful search. You can even use regular expressions to find and replace the text from the file.

Find and replace in VS Code
Find and replace

F2 - Rename

This is one of the most helpful shortcuts I've ever used. You can use this shortcut to rename all the occurrence of a varia ble name or a function.

Rename in VS Code
Rename

Folding

You can add foldable regions to a block of HTML code just like, multi-line comments. A block of foldable regions can be created using <!-- #region --> and <!-- endregion -->.

Emmet snippet in VS Code
Folding

Emmet snippets in VS Code

VS Code supports Emmet snippets. This is the feature of the Visual Studio Code that I use the most. See the examples below. (Remember to press Tab after typing the snippet)

  • p*3 (+ Tab) - Creates three <p> tags.
  • div>p  - Creates a paragraph tag as the immediate child of a div tag.
  • div>h1+p - Creates a div tag  with h1 and p tag as its child elements.
  • div>p.text-danger*5 - Creates five paragraphs with the class attribute set to text-danger as the child element of <div> tag.
  • div.form-group>label+input.form-control#txtname - Better to try this yourself.
Emmet snippet in VS Code
Emmet snippet in VS Code

I hope you enjoyed this post. Did I miss anything important in this list of useful features? Let me know in the comments below.