Boost Your Productivity in VSCode with 16 shortcuts
Tags: vscode, javascript, productivity, typescript
Published: 2020-03-14 21:19:22

When you code on a regular basis or even code for a living, it makes a lot of sense to get familiar with your IDE, and its shortcuts. Even better: customise your IDE to your needs.

## Essential Shortcuts

To work effectively with any IDE, there are a few things you want to be able to do, without leaving the keyboard. In this article we will go over the most essential shortcuts for search, navigation and editing files. 

Since default shortcuts are different on Windows and Mac, I will give you the `Command` name and my recommended shortcut in a nice formatted table, which you can use as cheat sheet. `modifier` in this context just means you could use anything like `alt`, `ctrl`, `opt`. You can search the commands under `Settings > Keyboard Shortcuts` and assign new `Keybinding` by double clicking. Furthermore I made some sample gifs, showing how it looks in action linked under each table.

You can also watch this short video and use the tables for later reference.

{% youtube yg0cOg_zCMQ %}

## Search
|  Command | Recommended Shortcut | How to remember
|--|--|--|
| Go to File... | `modifier`+**`p`** | search **p**roject file
| Search: Find in Files | `modifier`+`shift`+**`f`** | search **f**iles in project
| Find | `modifier`+ **`f`** | search in **f**ile
| Go to Symbol in File... | `modifier`+ **`s`** | Go to **s**ymbol

The commands above help you quickly find a certain function in your code. If you know which file it is in, use `modifier` + `p` and jump to the file, then use symbol search `modifier`+`s` to jump to the function. If you do not know the file, search the whole project with `modifier`+`shift`+`f`.

[See VSCode Search in Action](https://imgur.com/UiVr1Q0.gif)

## Navigation
|  Command | Recommended Shortcut | How to remember
|--|--|--|
| View: Quick Open View | `modifier`+**`1`**| Open View in **1st** Panel
| View: Open Previous Editor | `modifier`+**`q`** | sidestepping left with WASD controls
| View: Open Next Editor | `modifier`+**`e`** | sidestepping right with WASD controls
| View: Close Editor | `modifier`+**`r`** | **r**emove current editor
| View: Move Editor into `directon` Group | `modifier`+**`m`** `arrow key`| **m**ove current editor
| View: Focus Editor into `directon` Group | `modifier`+**`f`** `arrow key`| **f**ocus editor
| View: Toggle Integrated Terminal | `modifier`+**`t`** | focus **t**erminal
| Go to Line... | `modifier`+**`L`** | Go to **L**ine
| cursorWordEndRight/cursorWordStartLeft | `modifier`+`Arrow Key` | -

[See VSCode Navigation in Action](https://imgur.com/6SQo4If)

With the above commands you can quickly focus any of the side bars with `modifier`+`1` and jump back to editing by opening a file or using `modifier`+`f` `Arrow Key` to focus one of the Editor Groups again. You split the editor view by using `modifier`+`m` `Arrow Key` and move focus between editors using `modifier`+`f` `Arrow Key`. Within each editor you can jump between open files using `modifier`+`q` and `modifier`+`e`.  You can then use previously mentioned symbol search or `modifier`+`L` to jump to a certain line. Within any line you move the cursor using `cursorWordEndRight/cursorWordStartLeft`. Using `modifier`+`t` you can focus the terminal to run your application or run any test commands.

## Editing
|  Command | Recommended Shortcut | How to remember
|--|--|--|
| Add Selection To Next Find Match | `modifier`+**`n`** | select **n**ext occurrence
| Move Line Down/Up | `modifier`+`Arrow Key` | -
| Expand/Shrink Selection | `modifier`+ `shift` **`Arrow Key`** | -

[See VSCode Editing in Action](https://imgur.com/6XPH5jM)

The `modifier`+`n` helps you with refactoring and multi-cursor editing. With `Move Line Down/Up` you can move certain lines or complete code blocks. The `Expand/Shrink Selection` is quite smart and helps you selecting complete codes of block, before moving/replacing them.