10 VS Code Keyboard Shortcuts for Productivity Boost
Tags: productivity, vscode, shortcuts
Published: 2020-12-01 12:35:10

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