VSCode Shortcuts For Web-Devs
A curated list of essential VSCode Shortcuts to help you code faster as a web developer.
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 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 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.
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 ctrl + shift + enter | add a line below/top |
alt + up alt + down | move the line up/down |
alt + shift + up 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. Keep tapping d while holding downctrl 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 |
ctrl + ` | open/close terminal |
ctrl + shift + ` | 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.
Feel free to connect with me on twitter and let me know if you learned anything new from this post. I'd love to chat!