Open your workspace from terminal:
code ~/pixelcraft-workspace
Practice 10 minutes of no-mouse navigation:
| Action | Shortcut |
|---|---|
| Open file (fuzzy search) | Cmd/Ctrl + P |
| Command palette | Cmd/Ctrl + Shift + P |
| Toggle terminal | Ctrl + ` |
| Switch tabs | Cmd/Ctrl + Tab |
| Go to line number | Cmd/Ctrl + G |
| Find in file | Cmd/Ctrl + F |
| Find in all files | Cmd/Ctrl + Shift + F |
Open Extensions sidebar (Cmd/Ctrl+Shift+X) and install:
| Extension | What It Does |
|---|---|
| Prettier | Auto-formats code on save |
| ESLint | Catches code quality issues |
| GitLens | Shows who changed each line and when |
| Live Server | Launches a local dev server with hot reload |
| Material Icon Theme | Better file icons in the explorer |
Open with Cmd/Ctrl+Shift+P → "Open User Settings (JSON)":
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.fontSize": 14,
"editor.tabSize": 2,
"files.autoSave": "afterDelay",
"editor.wordWrap": "on"
}
Create a file with 10 lines of:
const item = "value";
const item = "value";
const item = "value";
// ... (10 lines)
Now use multi-cursor to:
1. Select all item → Cmd/Ctrl+D repeatedly → rename to filter
2. Add numbered suffixes: filter1, filter2, etc.
| Shortcut | Action |
|---|---|
| Cmd/Ctrl + D | Select next occurrence |
| Alt + Click | Add cursor at click point |
| Cmd/Ctrl + Shift + L | Select ALL occurrences |
Split editor: Cmd/Ctrl+\ — HTML left, CSS right. Edit both simultaneously.
Essential line operations:
| Shortcut | Action |
|---|---|
| Alt + ↑/↓ | Move line up/down |
| Shift + Alt + ↓ | Duplicate line |
| Cmd/Ctrl + / | Toggle comment |
| Cmd/Ctrl + Shift + K | Delete entire line |
Given a file with 50 lines of code, perform 10 specific edits using ONLY keyboard shortcuts.
Time yourself. Repeat until under 2 minutes.
Tool mastery as a multiplier.
A developer who knows 50 keyboard shortcuts saves ~30 minutes per day. That's 130 hours per year — over 3 full work weeks.