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 Code
• Ctrl D - Select the next instance of highlighted text (hit a few times to keep selecting more text)
• Ctrl L - Select line
• Ctrl X, Ctrl C, Ctrl V - Cut, Copy, Paste (in VS Code, if you select nothing, it cuts/copies the line)
• Double click - select word
• Triple click - Select line
• Quad click - Select all (also Ctrl A)
• Ctrl Shift F - Find in all files (Ctrl Shift E is files and Ctrl Shift G is git)
• Ctrl P - Type file name to open
• Alt Z - Toggle line wrap
• Alt Arrows - Move selected lines up/down, or change files left/right (can select multiple lines to move)
• Ctrl \ - Split editor
• Ctrl Shift V - Preview Markdown
• Ctrl W - Close tab window (currently open file) (works in browser to close current tab)
• Ctrl Tab and Ctrl 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 time
• Shift Arrows - Select left/right characters (or lines with up and down arrows)
• Ctrl Shift Arrows - Select left/right word at a time
• Ctrl Backspace / Ctrl Delete - Delete previous word / next word
• Home / End - Start or end of line
• Ctrl Home / Ctrl End - Move to start or end of file
• Ctrl Alt Arrows (up/down) - Make new cursors above/below
• Ctrl 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 copied
• Win Shift S - Screenshot tool - copy a portion of the screen or the whole screen to clipboard
• Alt Tab - Change tabs
• Win Tab - Show all tabs then can change tabs
• Win (number) - Open that number app on taskbar, for example, if chrome is item 2 in taskbar, use Win 2
• Win L - Lock the PC
• Win X -> U -> (S, U, or R) (sleep, shut down, or restart)
  • Win X then U then S to sleep
  • Win X then U then U to shut down
  • Win X then U then R to restart
• Win . - Win and period to open the emoji picker, just type and then use arrow keys and hit enter
• F2 - Rename selected file
• Ctrl 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.com
• Ctrl Shift F - Open in File Explorer
• Ctrl B - Change branches
• Ctrl P - Push
• Ctrl Shift P - Pull
• Ctrl Shift T - Fetch
• Ctrl Shift N - New branch
• Ctrl Alt P - Preview pull request

Email

• Ctrl K - Select a link then hit ctrl K to turn it into a clickable link in gmail and some other email clients