VS Code Essential Keyboard Shortcuts

The shortcuts that matter day-to-day. macOS shown — swap ⌘ for Ctrl on Windows/Linux.

Navigation

⌘P              Quick Open (file by name)
⌘⇧P            Command Palette
⌘⇧E            Explorer panel
⌘⇧F            Search across files
⌘⇧G            Source Control panel
⌘⇧D            Run & Debug panel
⌘⇧X            Extensions panel
⌘B              Toggle sidebar
⌘J              Toggle terminal panel
⌃`              Open terminal

⌘1/2/3         Switch editor groups
⌘W              Close tab
⌘⇧T            Reopen closed tab
⌘⌥←/→         Navigate back / forward
⌘K ⌘S          Open keyboard shortcuts

Editing

⌘D              Select next occurrence of word
⌘⇧L            Select all occurrences
⌥Click          Add cursor
⌘⌥↑/↓         Add cursor above / below
⌘L              Select line
⌥↑/↓           Move line up / down
⌥⇧↑/↓         Copy line up / down
⌘⇧K            Delete line
⌘Enter          Insert line below
⌘⇧Enter        Insert line above
⌘/              Toggle line comment
⌥⇧A            Toggle block comment
Tab / ⇧Tab     Indent / outdent selection
⌘]  /  ⌘[      Indent / outdent line

Code Intelligence

F12             Go to Definition
⌥F12            Peek Definition
⇧F12            Go to References
F2              Rename symbol
⌘.              Quick Fix / Code actions
⇧⌥F            Format document
⌘K ⌘F          Format selection
⌃Space          Trigger IntelliSense
⌘⇧Space        Trigger parameter hints

Search & Replace

⌘F              Find in file
⌘H              Replace in file
⌘⇧F            Find in workspace
⌘⇧H            Replace in workspace
⌘G  /  ⇧⌘G    Next / previous match
⌥Enter          Select all matches in Find
⌘⌥R            Toggle regex in search

Git (built-in)

⌃⇧G            Open Source Control
⌘K ⌘K          Commit staged (when panel focused)
⌘Enter          Confirm commit message input

VS Code Settings & Configuration

Settings hierarchy

• User settings — apply everywhere (~/.vscode/settings.json or Code > Preferences > Settings)

• Workspace settings — apply to the open folder (.vscode/settings.json, committed to repo)

• Folder settings — in multi-root workspaces, per-folder overrides

• Language-specific settings — override per language inside any of the above

Useful settings.json snippet

{
  // Editor
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.stickyScroll.enabled": true,
  "editor.linkedEditing": true,       // auto-rename matching HTML tags

  // Files
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "**/node_modules": true,
    "**/.next": true
  },

  // Terminal
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.osx": "zsh",

  // Explorer
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,

  // Language-specific overrides
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.formatOnSave": false
  }
}

Workspace .vscode/ folder

• settings.json — project-specific settings (formatter, tab size, etc.)

• extensions.json — recommended extensions for the project (prompted on open)

• launch.json — debug configurations

• tasks.json — build/run tasks accessible via Terminal > Run Task

extensions.json

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "prisma.prisma"
  ]
}

Debugging with launch.json

VS Code's built-in debugger connects to Node.js, browsers, and most runtimes. Config lives in .vscode/launch.json.

Basic launch.json structure

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Run current file",
      "program": "${file}",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Common configurations

// Node.js script
{
  "type": "node",
  "request": "launch",
  "name": "Launch script",
  "program": "${workspaceFolder}/src/index.ts",
  "runtimeArgs": ["-r", "ts-node/register"],
  "skipFiles": ["<node_internals>/**"]
}

// Attach to running Node process (e.g. started with --inspect)
{
  "type": "node",
  "request": "attach",
  "name": "Attach to process",
  "port": 9229,
  "restart": true,
  "skipFiles": ["<node_internals>/**"]
}

// Next.js (server-side)
{
  "type": "node",
  "request": "launch",
  "name": "Next.js server",
  "program": "${workspaceFolder}/node_modules/.bin/next",
  "args": ["dev"],
  "skipFiles": ["<node_internals>/**"]
}

// Chrome / browser
{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

Useful variables in launch.json

• ${workspaceFolder} — root of the open folder

• ${file} — currently active file

• ${fileBasenameNoExtension} — filename without extension

• ${env:HOME} — environment variable

• ${input:myVar} — prompt user for a value at launch

Debugger controls

F5          Start / Continue
F9          Toggle breakpoint
F10         Step Over
F11         Step Into
⇧F11        Step Out
⇧F5         Stop
⌘⇧F5       Restart

Debug console tips

• Expressions can be evaluated live in the Debug Console while paused

• Add Watch expressions to track values across steps

• Conditional breakpoints: right-click a breakpoint → Edit → add condition

• Logpoints: right-click gutter → Add Logpoint — logs without stopping execution

Must-Have VS Code Extensions

Code quality

• Prettier (esbenp.prettier-vscode) — opinionated formatter, integrates with formatOnSave

• ESLint (dbaeumer.vscode-eslint) — linting with auto-fix on save

• Error Lens (usernamehw.errorlens) — inline error/warning messages instead of hover

• SonarLint (sonarsource.sonarlint-vscode) — catches bugs and security issues as you type

Languages & frameworks

• Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss) — class autocomplete + docs on hover

• Prisma (prisma.prisma) — syntax highlight + format for .prisma files

• GraphQL (graphql.vscode-graphql) — syntax + IntelliSense for .graphql files

• DotENV (mikestead.dotenv) — syntax highlighting for .env files

• YAML (redhat.vscode-yaml) — schema validation for YAML (docker-compose, GitHub Actions)

Productivity

• GitLens (eamodio.gitlens) — inline git blame, file history, powerful diff views

• GitHub Copilot (github.copilot) — AI completions, best-in-class for code

• Path Intellisense (christian-kohler.path-intellisense) — autocomplete file paths in imports

• Auto Rename Tag (formulahendry.auto-rename-tag) — rename paired HTML/JSX tags simultaneously

• Better Comments (aaron-bond.better-comments) — colour-coded comment annotations (TODO, !alert, ?question)

UI & themes

• One Dark Pro (zhuangtongfa.material-theme) — clean dark theme

• Catppuccin (catppuccin.catppuccin-vsc) — pastel dark/light themes

• Material Icon Theme (pkief.material-icon-theme) — file icons for Explorer

• Indent Rainbow (oderwat.indent-rainbow) — colour-coded indent levels

Database & API

• REST Client (humao.rest-client) — send HTTP requests from .http files, no Postman needed

• Thunder Client (rangav.vscode-thunder-client) — lightweight Postman alternative built into VS Code

• SQLTools (mtxr.sqltools) — query databases directly from VS Code with driver plugins

Remote & containers

• Remote - SSH (ms-vscode-remote.remote-ssh) — edit files on remote machines as if local

• Dev Containers (ms-vscode-remote.remote-containers) — develop inside Docker containers

• Remote - WSL (ms-vscode-remote.remote-wsl) — full VS Code experience inside WSL on Windows