Visual Studio Code is the most popular code editor in the world, and for good reason — it’s fast, extensible, and free. But most developers only use a fraction of its capabilities. This guide covers the shortcuts, settings, and extensions that will dramatically speed up your workflow.

Essential Keyboard Shortcuts

These are the shortcuts that save the most time. Learn them and they’ll become muscle memory within a week.

Navigation

Shortcut (Mac)	Shortcut (Windows/Linux)	Action
⌘P	Ctrl+P	Quick Open — open any file by name
⌘⇧P	Ctrl+Shift+P	Command Palette — run any command
⌘B	Ctrl+B	Toggle sidebar
⌘J	Ctrl+J	Toggle terminal panel
⌃`	Ctrl+`	Toggle integrated terminal
⌘\	Ctrl+\	Split editor
⌘1/2/3	Ctrl+1/2/3	Focus editor group 1/2/3
⌘⇧E	Ctrl+Shift+E	File explorer
⌘⇧F	Ctrl+Shift+F	Search across files
⌘⇧G	Ctrl+Shift+G	Source control (Git)

Editing

Shortcut (Mac)	Shortcut (Windows/Linux)	Action
⌘D	Ctrl+D	Select next occurrence of word
⌘⇧L	Ctrl+Shift+L	Select ALL occurrences
⌥↑/↓	Alt+↑/↓	Move line up/down
⌥⇧↑/↓	Alt+Shift+↑/↓	Copy line up/down
⌘⇧K	Ctrl+Shift+K	Delete entire line
⌘Enter	Ctrl+Enter	Insert line below
⌘⇧Enter	Ctrl+Shift+Enter	Insert line above
⌘/	Ctrl+/	Toggle line comment
⌥⇧A	Alt+Shift+A	Toggle block comment
⌘⇧[/]	Ctrl+Shift+[/]	Fold/unfold code block
⌘L	Ctrl+L	Select entire line
⌘⇧\	Ctrl+Shift+\	Jump to matching bracket

Multi-Cursor Editing

Multi-cursor is one of VS Code’s killer features:

Shortcut (Mac)	Shortcut (Windows/Linux)	Action
⌥Click	Alt+Click	Add cursor at click position
⌘⌥↑/↓	Ctrl+Alt+↑/↓	Add cursor above/below
⌘D	Ctrl+D	Add cursor at next matching word
⌘⇧L	Ctrl+Shift+L	Add cursor at every matching word

Find and Replace

Shortcut (Mac)	Shortcut (Windows/Linux)	Action
⌘F	Ctrl+F	Find in file
⌘H	Ctrl+H	Find and replace
⌘⇧F	Ctrl+Shift+F	Find in all files
⌘⇧H	Ctrl+Shift+H	Replace in all files

Pro tip: Enable regex in find (⌘⌥R / Alt+R) for powerful pattern matching.

Hidden Features Most People Miss

1. Command Palette

Press ⌘⇧P / Ctrl+Shift+P and type any action. You never need to memorize where settings are — just search:

• >sort lines — Sort selected lines alphabetically
• >transform to uppercase — Convert selection to uppercase
• >join lines — Join multiple lines into one
• >toggle word wrap — Toggle line wrapping
• >format document — Auto-format the entire file

2. Emmet Abbreviations

Type an Emmet abbreviation and press Tab for instant HTML:

div.container>ul>li*5>a.link{Item $}

Expands to:

<div class="container">
    <ul>
        <li><a href="" class="link">Item 1</a></li>
        <li><a href="" class="link">Item 2</a></li>
        <li><a href="" class="link">Item 3</a></li>
        <li><a href="" class="link">Item 4</a></li>
        <li><a href="" class="link">Item 5</a></li>
    </ul>
</div>

3. Quick Fix Actions

When you see a lightbulb 💡 icon or yellow/red squiggly, press ⌘. / Ctrl+. for quick fixes:

• Auto-import modules
• Generate missing methods
• Convert between quote types
• Wrap in try/catch

4. Go to Definition / References

• F12 — Go to definition
• ⌥F12 / Alt+F12 — Peek definition (inline)
• ⇧F12 / Shift+F12 — Find all references
• F2 — Rename symbol across all files

5. Integrated Terminal

• Multiple terminals: Click the + button or `⌘⇧“
• Split terminal: Click the split icon
• Rename terminals for organization
• Run tasks directly from the terminal

6. Zen Mode

Press ⌘K Z / Ctrl+K Z for distraction-free coding — hides everything except the editor. Press Esc Esc to exit.

7. Timeline View

In the Explorer sidebar, expand Timeline to see the Git history of the current file — every save, every commit.

Must-Have Settings

Open settings JSON with ⌘⇧P → “Preferences: Open User Settings (JSON)“:

{
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Menlo, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.linkedEditing": true,
  "editor.stickyScroll.enabled": true,
  "editor.cursorSmoothCaretAnimation": "on",
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "terminal.integrated.fontSize": 13,
  "workbench.startupEditor": "none",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "breadcrumbs.enabled": true,
  "git.autofetch": true,
  "git.confirmSync": false
}

Best Extensions

Essential for Everyone

1. Prettier — Auto-format code on save. Supports JS, TS, HTML, CSS, JSON, YAML, Markdown.

2. ESLint — Linting for JavaScript/TypeScript. Catches errors and enforces style.

3. GitLens — Supercharged Git. See who changed each line, browse file history, compare branches.

4. Error Lens — Shows errors and warnings inline, right next to the problematic code.

5. Auto Rename Tag — Rename paired HTML/JSX tags automatically.

Web Development

6. Live Server — Launch a local dev server with live reload for static HTML files.

7. Thunder Client — REST API client inside VS Code (like Postman).

8. CSS Peek — Peek at CSS definitions from HTML class names.

9. Tailwind CSS IntelliSense — Autocomplete and hover previews for Tailwind classes.

Productivity

10. GitHub Copilot — AI-powered code suggestions. Paid, but dramatically speeds up coding.

11. Path Intellisense — Autocomplete file paths in imports.

12. Todo Tree — Find and list all TODO, FIXME, HACK comments across your project.

13. Bookmarks — Bookmark lines and jump between them.

Appearance

14. One Dark Pro — Popular dark theme.

15. Material Icon Theme — Beautiful file/folder icons.

Workspace-Specific Settings

Create .vscode/settings.json in your project root for per-project settings:

{
  "editor.tabSize": 4,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.tabSize": 4
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.exclude": {
    "node_modules": true,
    ".git": true,
    "dist": true
  }
}

Snippets

Create custom snippets for code you type frequently. Open ⌘⇧P → “Snippets: Configure User Snippets”:

{
  "Console Log": {
    "prefix": "cl",
    "body": "console.log('$1:', $1);",
    "description": "Quick console.log"
  },
  "Arrow Function": {
    "prefix": "af",
    "body": "const $1 = ($2) => {\n\t$3\n};",
    "description": "Arrow function"
  },
  "React Component": {
    "prefix": "rfc",
    "body": [
      "export default function $1() {",
      "\treturn (",
      "\t\t<div>",
      "\t\t\t$2",
      "\t\t</div>",
      "\t);",
      "}"
    ],
    "description": "React function component"
  }
}

Debug Configuration

Create .vscode/launch.json for debugging:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.js"
    },
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    }
  ]
}

Set breakpoints by clicking in the gutter, then press F5 to start debugging.

Conclusion

VS Code’s power lies in the combination of keyboard shortcuts, smart extensions, and customized settings. Invest 30 minutes learning the shortcuts in this guide, install the extensions that match your workflow, and customize your settings. The time saved compounds every single day — most developers report saving 1-2 hours per day after optimizing their editor setup.