January 4, 2024
Shortcuts I Use Daily as a Web Developer
Justin Golden
Some of these are simple, and some more complex. I’m listing all of the shortcuts I use multiple times a day, so bare with me:
VS Code
Ctrl F
- Find (alt enter
after searching in VS Code to add a cursor to each location)Alt click
- Multi cursor in VS CodeCtrl D
- Select the next instance of highlighted text (hit a few times to keep selecting more text)Ctrl L
- Select lineCtrl X, Ctrl C, Ctrl V
- Cut, Copy, Paste (in VS Code, if you select nothing, it cuts/copies the line)Double click
- select wordTriple click
- Select lineQuad click
- Select all (alsoCtrl A
)Ctrl Shift F
- Find in all files (Ctrl Shift E
is files andCtrl Shift G
is git)Ctrl P
- Type file name to openAlt Z
- Toggle line wrapAlt Arrows
- Move selected lines up/down, or change files left/right (can select multiple lines to move)Ctrl \
- Split editorCtrl Shift V
- Preview MarkdownCtrl W
- Close tab window (currently open file) (works in browser to close current tab)Ctrl Tab
andCtrl Shift Tab
- Change tabs (works in browser)Ctrl Enter
- Insert newline below (even if your cursor is in the middle of a line) (Ctrl Shift Enter
for new line above)Ctrl Arrows
- Move left/right one word at a timeShift Arrows
- Select left/right characters (or lines with up and down arrows)Ctrl Shift Arrows
- Select left/right word at a timeCtrl Backspace
/Ctrl Delete
- Delete previous word / next wordHome
/End
- Start or end of lineCtrl Home
/Ctrl End
- Move to start or end of fileCtrl Alt Arrows (up/down)
- Make new cursors above/belowCtrl 1
- Focus editor (this might feel dumb when you can just click, but preventing yourself from needing the mouse is great)- Right click file tab, then
Shift Alt R
- Reveal in file explorer
I also recommend a plugin to quickly change quotes, and a plugin called “Auto Rename Tag” which will rename the other corresponding XML/HTML tag when you rename one (super useful!)
VS Code has Emmet built in, and while I won’t explain in detail here, you can use things like p.hello
to make a new paragraph of class hello: <p class="hello"></p>
and you can chain classes and use IDs: div#hello.there.world
: <div id="hello" class="there world"></div>
and make multiple elements with *
and use tab to change what part you’re filling out. For example: ul>li*4
works as you’d expect and makes a <ul>
with 4 <li>
inside it, and you can hit tab and fill each out.
Windows
Win V
- Clipboard manager - has a history of items you’ve copiedWin Shift S
- Screenshot tool - copy a portion of the screen or the whole screen to clipboardAlt Tab
- Change tabsWin Tab
- Show all tabs then can change tabsWin (number)
- Open that number app on taskbar, for example, if chrome is item 2 in taskbar, useWin 2
Win L
- Lock the PCWin X -> U -> (S, U, or R)
(sleep, shut down, or restart)Win X
thenU
thenS
to sleepWin X
thenU
thenU
to shut downWin X
thenU
thenR
to restart
Win .
- Win and period to open the emoji picker, just type and then use arrow keys and hit enterF2
- Rename selected fileCtrl L
- Highlight file explorer location (works in browser to highlight address bar)
I use Power Toys for fancy zones, which allows me to drag a window holding Shift
to drop it into a specific zone or holding Ctrl Shift
to make it take up multiple zones. Power Toys has lots of other awesome tools and I highly recommend it. It makes Windows just a little less worse : )
GitHub Desktop
Ctrl Shift A
- Open in VS Code (or whatever editor you have setup in Github Desktop)Ctrl Shift G
- Open on Github.comCtrl Shift F
- Open in File ExplorerCtrl B
- Change branchesCtrl P
- PushCtrl Shift P
- PullCtrl Shift T
- FetchCtrl Shift N
- New branchCtrl Alt P
- Preview pull request
Ctrl K
- Select a link then hitctrl K
to turn it into a clickable link in gmail and some other email clients
More Blog Articles