VS Code sneltoetsen: Complete productiviteitsgids

Why Keyboard Shortcuts Matter for Developers

VS Code keyboard shortcuts are one of the fastest ways to boost your coding productivity. Every time you reach for the mouse, you lose a few seconds -- and those seconds add up to hours over a week. Developers who master keyboard shortcuts in Visual Studio Code report completing tasks 30-50% faster than those who rely on menus and mouse clicks.

This guide covers the most impactful VS Code shortcuts for macOS and Windows/Linux, organized by workflow category. Whether you are editing code, navigating files, managing terminals, or debugging, these shortcuts will transform how you work.

Essential Navigation Shortcuts

Navigation is where you spend the most time. These shortcuts help you jump between files, symbols, and lines without touching the mouse.

File and Tab Navigation

Code Navigation

Editing Shortcuts That Save Hours

These editing shortcuts handle the tasks you repeat hundreds of times a day: moving lines, duplicating code, selecting text, and formatting.

Line Operations

Selection and Multi-Cursor

Multi-cursor editing is one of VS Code's most powerful features. Once you master it, you will never want to edit text any other way.

Multi-Cursor Workflow Example

Scenario: Rename a CSS class in multiple places at once

1. Place cursor on the class name
2. Press Cmd+D (Ctrl+D) repeatedly to select each occurrence
3. Type the new name -- all instances update simultaneously

Before:
  <div class="old-card">
    <h2 class="old-card-title">...</h2>
    <p class="old-card-body">...</p>
  </div>

After (typed "new-card" once):
  <div class="new-card">
    <h2 class="new-card-title">...</h2>
    <p class="new-card-body">...</p>
  </div>

Search and Replace

Regex Search Examples in VS Code

# Find all console.log statements
console\.log\(.*\)

# Find function declarations (JS/TS)
(function|const|let|var)\s+\w+\s*=\s*(async\s+)?\(

# Find TODO/FIXME comments
(TODO|FIXME|HACK|BUG):\s*.*

# Find imports from a specific module
import.*from\s+['"]@/components.*['"]

# Find empty HTML tags
<(\w+)[^>]*>\s*<\/\1>

# Replace: convert px to rem (capture group)
Find:    (\d+)px
Replace: calc($1 / 16 * 1rem)

Code Intelligence and Refactoring

Terminal and Integrated Tools

Debugging Shortcuts

Git Integration Shortcuts

Window and Layout Management

Custom Keybindings

You can customize any shortcut via Cmd+K Cmd+S (Ctrl+K Ctrl+S on Windows/Linux), or edit the keybindings.json file directly. Here are some popular custom bindings:

// keybindings.json - Open via Cmd+K Cmd+S, then click the {} icon
[
  // Duplicate line without clipboard (alternative)
  {
    "key": "cmd+shift+d",
    "command": "editor.action.copyLinesDownAction",
    "when": "editorTextFocus"
  },
  // Move between editor tabs
  {
    "key": "cmd+1",
    "command": "workbench.action.openEditorAtIndex1"
  },
  // Toggle terminal with Cmd+J (common preference)
  {
    "key": "cmd+j",
    "command": "workbench.action.togglePanel"
  },
  // Save all files
  {
    "key": "cmd+shift+s",
    "command": "workbench.action.files.saveAll"
  },
  // Quick switch between recent files
  {
    "key": "cmd+e",
    "command": "workbench.action.quickOpenRecent"
  }
]

Productivity Tips and Workflows

Tip 1: The Quick Open Power Pattern

Cmd+P (Ctrl+P) supports special prefixes:

  filename       → Open file by name
  :lineNumber    → Go to line (e.g., :42)
  @symbol        → Go to symbol in file
  @:category     → Symbols grouped by category
  #symbol        → Go to symbol in workspace
  >command       → Run VS Code command
  ?              → Show help for Quick Open

Example workflow:
  1. Cmd+P → type "user" → opens UserComponent.tsx
  2. Cmd+P → type ":125" → jumps to line 125
  3. Cmd+P → type "@handleSubmit" → jumps to handleSubmit function

Tip 2: Emmet Abbreviations for HTML/CSS

VS Code has built-in Emmet support. Type abbreviations and press Tab:

HTML:
  div.container>ul>li*5>a    → nested structure with 5 list items
  .card>.title+.body+.footer → div with three children
  input:email                → <input type="email">
  link:css                   → <link rel="stylesheet">
  !                          → full HTML5 boilerplate

CSS:
  m10        → margin: 10px;
  p20-30     → padding: 20px 30px;
  df         → display: flex;
  jcc        → justify-content: center;
  aic        → align-items: center;
  bgc#333    → background-color: #333;
  fz16       → font-size: 16px;

Tip 3: Snippets for Repetitive Code

// Open: Cmd+Shift+P → "Configure User Snippets"
// Select language (e.g., typescriptreact.json)
{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:Component}Props {",
      "  $2",
      "}",
      "",
      "export default function ${1:Component}({ $3 }: ${1:Component}Props) {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}"
    ]
  },
  "useState Hook": {
    "prefix": "ush",
    "body": "const [$1, set${1/(.*)/${1:/capitalize}/}] = useState<$2>($3);"
  },
  "useEffect Hook": {
    "prefix": "ueh",
    "body": [
      "useEffect(() => {",
      "  $1",
      "  return () => {",
      "    $2",
      "  };",
      "}, [$3]);"
    ]
  }
}

VS Code Settings for Maximum Productivity

// settings.json - Open via Cmd+, then click {} icon
{
  // Auto-save files after delay
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,

  // Format on save and paste
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,

  // Smooth cursor animation
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.cursorBlinking": "smooth",

  // Bracket pair colorization (built-in)
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",

  // Sticky scroll (shows current scope)
  "editor.stickyScroll.enabled": true,

  // Minimap settings
  "editor.minimap.enabled": true,
  "editor.minimap.maxColumn": 80,

  // Font and display
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.fontLigatures": true,

  // Terminal settings
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.cursorStyle": "line"
}

Essential Extensions for Shortcut Power Users

Printable Cheat Sheet Summary

╔══════════════════════════════════════════════════════════════╗
║              VS CODE SHORTCUTS CHEAT SHEET                   ║
╠══════════════════════════════════════════════════════════════╣
║                                                              ║
║  NAVIGATE                    EDIT                            ║
║  Cmd+P     Quick Open        Cmd+D     Select word           ║
║  Cmd+Shift+P  Command Palette  Option+Up  Move line up      ║
║  Ctrl+G    Go to line        Cmd+Shift+K  Delete line        ║
║  F12       Go to definition  Cmd+/     Toggle comment        ║
║  Cmd+Shift+O  Go to symbol   Shift+Option+F  Format          ║
║                                                              ║
║  SEARCH                     MULTI-CURSOR                     ║
║  Cmd+F     Find in file     Cmd+D       Add next match       ║
║  Cmd+Shift+F  Find in workspace  Cmd+Shift+L  All matches   ║
║  Cmd+H     Replace           Option+Click  Add cursor        ║
║                              Cmd+Option+Up  Cursor above     ║
║                                                              ║
║  TERMINAL                   DEBUG                            ║
║  Cmd+`     Toggle terminal   F5        Start debugging       ║
║  Cmd+Shift+`  New terminal   F9        Toggle breakpoint     ║
║  Cmd+\     Split terminal    F10       Step over             ║
║                              F11       Step into             ║
╚══════════════════════════════════════════════════════════════╝

Conclusion

Mastering VS Code keyboard shortcuts is an investment that pays off every day. Start by learning five shortcuts this week, practice them until they become muscle memory, then add five more the next week. Within a month, you will navigate and edit code dramatically faster.

The most impactful shortcuts to learn first are: Cmd+P (Quick Open), Cmd+D (select next occurrence), Cmd+Shift+P (Command Palette), Option+Up/Down (move lines), and Cmd+/ (toggle comment). These five alone will transform your daily workflow.

Use our Diff Checker to compare code changes, or explore our Git Commands Cheat Sheet to complement your VS Code productivity.