Keyboard Shortcuts and Reference Guide
14th Jul 2022 (Updated on 10th Dec 2024)
A curated list of essential keyboard shortcuts and references to enhance your productivity
While working on a layout for a blog page, I decided I should start making note of the different key commands that I use on a daily basis. This is a running list of keyboard shortcuts that allow me to work more efficiently.
Tip: The alt key is referred to as the option key on a Mac.
🎨 Visual Studio Code (VS Code) Shortcuts
open command palette
⌘ command + shift + p
close current window
⌘ command + w
This has been a game changer - I now close tabs in VS Code when I’m done with them, instead of keeping them open indefinitely (now if only I could practice this in Chrome)
duplicate current line down
shift + ⌥ option + ↓
add another cursor below
⌘ command + ⌥ option + ↓
open/close integrated terminal
^ control + `
split the terminal
⌘ command + \
This is great for when you need to view two files simultaneously in VS Code
duplicate file in VS Code
⌥ option + click and drag file to destination
I did some searching and this was the best solution that didn’t require a plug-in.
🍎 Mac Shortcuts
Fast application switching
⌘ command + tab
💡 Figma
Duplicate current selection
⌘ command + d
Show components menu
shift + i
I use this one to access plugins such as Unsplash quickly.
Group selection
⌘ command + g
✈️ Tailwind CSS
Text shadow
<h2
class="mt-8 lg:mt-0 mb-0 text-center font-normal text-3xl lg:text-[44px] lg:text-white -tracking-[.6px] lg:-tracking-[0.88px] leading-normal lg:leading-normal lg:[text-shadow:_0_4px_4px_rgba(0_0_0_/_0.25)]"
>
Submit your blog pitch here!
</h2>Inline ternary operator
<div
class={`relative rounded-xl pt-3.5 md:pt-7 px-5 pb-[10px] md:pb-[22px] bg-neutral ${
index === 0 ? "rounded-bl-none rounded-br-none" : ""
}`}
></div>Background image
<div
class="h-[218px] lg:h-[234px] lg:rounded-3xl bg-dark bg-[url('../images/blogSubmission/laptop-medium-shot-923w.png')] bg-no-repeat bg-center bg-cover"
></div>