VSCode Shortcuts For Web-Devs

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. giphy.gif


ctrl + pquick open → open an existing file
ctrl + btoggle sidebar on/off
ctrl + k + ctrl + sview all keyboard shortcuts
ctrl + shift + pthe swiss army knife → command palette. Type your query to see suggestions


General Editing Shortcuts

ctrl + backspacedelete the entire word to the left of the cursor
ctrl + deletedelete the entire word to the right of the cursor
ctrl + leftArrow / rightArrowjump words with cursor
ctrl + Shift + leftArrow / rightArrowselect entire words
ctrl + c while on a line, without selecting anythingcopy entire line
ctrl + x while on a line, without selecting anythingcut entire line

VSCode Editing Shortcuts

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 + kremove current line
ctrl + /toggle line comment
alt + ztoggle word wrap

Selection & Navigation

ctrl + d after making a selectionselect next occurrence of selection.

Keep tapping d while holding downctrl to select additional occurrences.
ctrl + shift + lselect all occurrences of selection
alt + left clickadd multiple cursors
ctrl + ggo to line
ctrl + shift + \jump to the matching bracket
ctrl + up arrow / down arrowscroll up/down

Terminal Controls

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!

Did you find this article valuable?

Support Abin John by becoming a sponsor. Any amount is appreciated!