VSCode Shortcuts For Web-Devs
A curated list of essential VSCode Shortcuts to help you code faster as a web developer.
3 min read
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.
|quick open → open an existing file|
|toggle sidebar on/off|
|view all keyboard shortcuts|
|the swiss army knife → command palette. Type your query to see suggestions|
General Editing Shortcuts
|delete the entire word to the left of the cursor|
|delete the entire word to the right of the cursor|
|jump words with cursor|
|select entire words|
|copy entire line|
|cut entire line|
VSCode Editing Shortcuts
|add a line below/top|
|move the line up/down|
|copy line up/down|
|remove current line|
|toggle line comment|
|toggle word wrap|
Selection & Navigation
|select next occurrence of selection.|
|select all occurrences of selection|
|add multiple cursors|
|go to line|
|jump to the matching bracket|
|open new terminal window|
|terminal command to open a file if it exists, or create one if it doesn’t|
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!
Did you find this article valuable?
Support Abin John by becoming a sponsor. Any amount is appreciated!