15 VS Code Tips That Will Double Your Productivity

Why VS Code Mastery Pays Off

VS Code is the most popular code editor in the world, but most developers use maybe 20% of its capabilities. These 15 tips have the highest return on learning investment — each one saves real time every day.

---

1. Multi-Cursor Editing

Add cursor at each occurrence of selection: Cmd+Shift+L (Mac) / Ctrl+Shift+L (Windows/Linux)

Select a variable name, press this shortcut, and edit all occurrences simultaneously. Rename without find-and-replace.

Add cursor manually: Alt+Click anywhere to add a cursor at that position.

Column selection: Opt+Shift+Drag (Mac) / Alt+Shift+Drag (Windows)

---

2. Command Palette

Cmd+Shift+P — Your most important shortcut. Access every VS Code command by name. Forget where a setting is? Command Palette.

---

3. Quick File Navigation

Cmd+P — Open any file by fuzzy searching its name. Type : after the filename to jump to a line: app.ts:142 Type @ to search symbols in the current file. Type # to search symbols across the workspace.

---

4. Go To Definition / References

F12 — Jump to where a function/class is defined Alt+F12 — Peek definition (open inline, stay in current file) Shift+F12 — Show all references Cmd+Click — Same as F12

---

5. Integrated Terminal

Ctrl+`` — Toggle terminal Ctrl+Shift+`` — New terminal instance

Split terminal: click the split icon. Rename terminal: right-click the tab.

---

6. IntelliSense on Demand

Ctrl+Space — Trigger IntelliSense suggestions manually Cmd+Shift+Space — Show parameter hints for a function

---

7. Refactoring Actions

Select code → Cmd+. (Mac) / Ctrl+. — opens Quick Fix and refactor menu. Extract function, rename symbol, fix import — all contextually.

Rename symbol across all files: F2

---

8. Emmet in HTML/JSX

Type a shorthand and press Tab:

div.container>ul.list>li.item*3    Tab →

Expands to a full div > ul > 3 li structure instantly.

---

9. Bracket Pair Colorization

Built in since VS Code 1.60:

"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active"

---

10. Settings Sync

Cmd+Shift+P → "Settings Sync: Turn On" — syncs your settings, extensions, and keybindings across machines via GitHub/Microsoft account.

---

11. Fold Code Sections

Cmd+K Cmd+0 — Fold all regions Cmd+K Cmd+J — Unfold all Cmd+K Cmd+[ — Fold current block Cmd+K Cmd+] — Unfold current block

---

12. Timeline View

In the Explorer panel, scroll to the bottom to find Timeline — shows git history and local file saves for the current file. Instantly undo to any point.

---

13. Snippet Creation

Cmd+Shift+P → "Snippets: Configure User Snippets" — create custom snippets:

"React Component": {
  "prefix": "rfc",
  "body": [
    "export default function $1() {",
    "  return (",
    "    <div>",
    "      $2",
    "    </div>",
    "  );",
    "}"
  ]
}

---

14. Debug Launch Configurations

// .vscode/launch.json
{
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Server",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Press F5 to start debugging with breakpoints, watch variables, and step through execution.

---

15. Essential Extensions

• ESLint — live linting
• Prettier — auto formatting
• GitLens — git blame inline, history
• Error Lens — shows errors inline on the line they occur
• Peacock — color-code different project windows
• Thunder Client — lightweight REST client inside VS Code

---

Conclusion

Start with the Command Palette, multi-cursor editing, and the debugger — these three alone will change how you work. Then gradually add the others as you discover you need them. VS Code rewards investment in learning it.