# VSCode Shortcuts For Web-Devs

If you're like me, you are a sucker for keyboard shortcuts or productivity "hacks" on any tool that you use. VSCode is no different for me, and I love the plethora of shortcuts and customization possibilities that it offers. However, if you're starting out or checking out the shortcuts for the first time, the [official documentation](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf) can seem a bit overwhelming.

To make things easier, I've curated a list of shortcuts below that I find essential as a web developer. There's also a handy notion-page version of the shortcuts [here](https://www.notion.so/abinjohn/VSCode-Like-A-Pro-9e7e2d9e61e1452bbd0da517660a6261) for easy reference. You can duplicate it as a template and save it to your workspace :)

These shortcuts will help you code faster so that you can see your code fail sooner.
![giphy.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1669615828556/Osxvw77Xp.gif align="center")

## General

| **Shortcut**            | **Description**                                                              |
|-------------------------|------------------------------------------------------------------------------|
| `ctrl + p`              | quick open → open an existing file                                           |
| `ctrl + b`              | toggle sidebar on/off                                                        |
| `ctrl + k` + `ctrl + s` | view all keyboard shortcuts                                                  |
| `ctrl + shift + p`      | the swiss army knife → command palette.   Type your query to see suggestions |

## Editing

### General Editing Shortcuts
| **Shortcut**                                           | **Description**                                   |
|--------------------------------------------------------|---------------------------------------------------|
| `ctrl + backspace`                                     | delete the entire word to the left of the cursor  |
| `ctrl + delete`                                        | delete the entire word to the right of the cursor |
| `ctrl + leftArrow / rightArrow`                        | jump words with cursor                            |
| `ctrl + Shift + leftArrow / rightArrow`                | select entire words                               |
| `ctrl + c` while on a line, without selecting anything | copy entire line                                  |
| `ctrl + x` while on a line, without selecting anything | cut entire line                                   |
### VSCode Editing Shortcuts
| **Shortcut**         | **Description** |
|----------------------|-----------------|
| `ctrl + enter` <br><br>  `ctrl + shift + enter`     |     add a line below/top            |
| `alt + up` <br><br> `alt + down` |        move the line up/down         |
|  `alt + shift + up` <br><br> `alt + shift + down`  |       copy line up/down |
|  `ctrl + shift + k` |   remove current line |
|  `ctrl + /` | toggle line comment |
|   `alt + z` |  toggle word wrap |

## Selection & Navigation

| **Shortcut** | **Description** |
|--------------|-----------------|
|`ctrl + d` after making a selection |   select next occurrence of selection.<br><br>Keep tapping `d` while holding down`ctrl` to select additional occurrences.              |
|`ctrl + shift + l`|select all occurrences of selection|
|`alt + left click`|add multiple cursors |
|`ctrl + g`|go to line |
|`ctrl + shift + \`|jump to the matching bracket|
|`ctrl + up arrow / down arrow`|scroll up/down|

## Terminal Controls
| **Shortcut** | **Description** |
|---|---|
| <code> ctrl + ` </code>  |open/close terminal  |
| <code>ctrl + shift + `  </code>| open new terminal window |
|`code <filename>`  |  terminal command to open a file if it exists, or create one if it doesn’t|

## More Power

To take your speed up another level, I'd recommend looking into Snippets in VSCode. You can check out my post on the same [here](https://abinjohn.in/code-faster).

Feel free to connect with me on [twitter](https://twitter.com/abin_john98) and let me know if you learned anything new from this post. I'd love to chat!