10 VS Code Keyboard Shortcuts for Productivity Boost

Each and every one of us uses keyboard shortcuts to some extent like Cut (Ctrl\Cmd + X), Copy (Ctrl\Cmd + C) and Paste (Ctrl\Cmd + V). Please don't stop reading because I mentioned those three.

I promise you this blog will only discuss shortcuts a cut above the basics and only those which are beneficial to the devs.

Why Keyboard Shortcuts ?

Firstly, Keyboard Shortcuts are just efficient. Especially when it comes to coding IDE like VS Code and IntelliJ, keyboard shortcuts are a boon to coders. While it is not that easy to get used to these shortcuts, you will definitely thank yourself for putting the effort once you get used to them.

The Shortcuts

1. Multi-cursor

This is the first keyboard shortcut I mastered. And also the most helpful one especially when on HTML (adding classes used to be such a pain 😭 ).

• How to use it : Just Ctrl click at all the places where you want to start writing. You will see multiple cursors popping up. And when you type, all of them start writing.
• Keyboard Shortcut : Ctrl/Cmd + Mouse Left Click

2. Global Search

Some of you might already be familiar with how to do this by using mouse as it is a very very important feature when working on big projects with loads of interconnected code. But did you know that you could do that with keyboard shortcut in a snap.

• How to use it : Now most of us are already familiar with Ctrl/Cmd + F for searching inside a file. Now taking it to the next level by pressing Ctrl/Cmd + Shift + F, you can do a global search on your entire project.
• Keyboard Shortcut : Ctrl/Cmd + Shift + F

3. Moving By Words Not Letters

While we can move around the extremes of the line using Home and End, what if we want to quickly change attributes in HTML / edit arguments in function calls ? 🤔🤔

• How to use it : We know that we can move the cursor by letter with Arrow Keys but if you want to move the cursor by words, you have to Ctrl/Cmd + [Left/Right Arrow Keys]
• Keyboard Shortcut : Ctrl/Cmd + [Left/Right Arrow Keys]

4. Delete Words

Following the footsteps of previous shortcut, would it not make stuff easier if you could quick delete words as well 🤩🤩

• How to use it : Now, this is a two step thing. Firstly, select the word where your cursor is with Ctrl/Cmd + D. Next, click Delete or start writing what you need in place of word selected.
• Keyboard Shortcut : Select Word (Ctrl/Cmd + D) and then start typing away

5. Moving Between Open Files

Most of us know how to move between different applications on our machine (i.e. Alt + Tab). In a similar fashion when it comes to big projects, we have to move between some files very often. And using mouse to do this is not very productive.

• How to use it : You can switch between open files this using using Ctrl/Cmd + Tab (right) and Ctrl/Cmd + Shift + Tab(left) to make this movement quick.
• Keyboard Shortcut :
  • Right Open File : Ctrl/Cmd + Tab
  • Left Open File : Ctrl/Cmd + Shift + Tab

6. Quick Comment / Uncomment

This is the most often used keyboard shortcut while I code. The best part of it is that it is language agnostic i.e. automatically comments code in the proper syntax. Also commenting and uncommenting is also used as a quick debug technique. Commenting is a good coder's duty and to do it productively, here is a shortcut.

• How to use it : Make a selection and Ctrl/Cmd + / for a multi-line comment. Or just press Ctrl/Cmd + / to comment the current line the cursor is on. To uncomment, repeat the process again.
• Keyboard Shortcut : Ctrl/Cmd + /

7. Jump To Function

When you have a code project, it is very likely that you are using code from other files a lot. And ability to quickly move to different pieces of code is a major help.

• How to use it : Just take the cursor to the function call and press F12 or Fn + F12 based on the keyboard. The file with the function is opened with your cursor at the definition.
• Keyboard Shortcut : F12 or Fn + F12

8. Open Project Files (Not Ctrl/Cmd + O)

I am not going to discuss the normal Open File and you chose the file from the File Explorer. This is a shortcut to quickly open files from the project without using mouse.

• How to use it : Press Ctrl/Cmd + P and start typing the file name. A dropdown with all possible files you might be referring to in the project shows up.
• Keyboard Shortcut : Ctrl/Cmd + P

9. Code Completion / Auto Complete / Quick Import

Having a quick suggestion related to what you might be typing is always a big help. Let it be the variable name (or) function definition. You can also quick import from different files using these shortcuts

• How to use it : Press Ctrl/Cmd + Space to see possible suggestions and use Ctrl/Cmd + Shift + Space to view the function definition where you are typing to get an understanding of its parameters.
• Keyboard Shortcut : Ctrl/Cmd + Space or Ctrl/Cmd + Shift + Space

10. Expand / Collapse Functions

Even though we understand that we should break our code into files for ease of re-use and easy understanding. Sometimes we can not help but see that our files are growing in size. Traversing through large files is a very time-consuming task. Would it not be easier if you could collapse all the functions and only expand those that you need ? And that's what this shortcut has to offer.

• How to use it : Press Ctrl/Cmd + K and then Ctrl/Cmd + 0 to collapse all sub regions. And Ctrl/Cmd + K and then Ctrl/Cmd + J to expand all sub regions. To collapse the current (where the cursor is) sub region, press Ctrl/Cmd + Shift + [ and to expand the current sub region, press Ctrl/Cmd + Shift + ]. Here sub region means a block of code.
• Keyboard Shortcut :
  • Expand All : Ctrl/Cmd + K and then Ctrl/Cmd + J
  • Collapse All : Ctrl/Cmd + K and then Ctrl/Cmd + 0
  • Collapse Current : Ctrl/Cmd + Shift + [
  • Expand Current : Ctrl/Cmd + Shift + ]

Also VS Code Official Cheat Sheet : https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
Or just use another keyboard shortcut, press Ctrl/Cmd + Shift + P to search other keyboard shortcuts

[Featured Image taken from https://code.visualstudio.com/]