iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up
Next »

Summary

By · Reviewed & last updated · Part of VS Code Tutorial

A one-screen summary of VS Code productivity: the shortcuts, settings, snippets, tasks, and extensions that turn the editor from "competent text editor" into "force multiplier".

VS Code in one page

EXAMPLE
# ===== Movement =====
# Ctrl+P              quick open by filename
# Ctrl+T              workspace symbol
# Ctrl+Shift+O        symbol in current file (@symbol after Ctrl+P also works)
# Ctrl+G              go to line
# F12                 go to definition
# Alt+F12             peek definition
# Shift+F12           find all references
# Ctrl+Tab            recent files

# ===== Editing =====
# Ctrl+D              add next occurrence (multi-cursor)
# Ctrl+Shift+L        select all occurrences in file
# Alt+Click           add cursor at click
# Ctrl+Alt+Up/Down    add cursor above/below
# Shift+Alt+Drag      column selection
# Alt+Up/Down         move line
# Shift+Alt+Up/Down   duplicate line
# Ctrl+/              toggle comment
# Ctrl+Shift+K        delete line

# ===== Refactor =====
# F2                  rename symbol (cross-file aware)
# Ctrl+.              quick fix menu
# Shift+Alt+F         format document
# Ctrl+Shift+\        jump to matching bracket

# ===== Search =====
# Ctrl+F              find in file
# Ctrl+H              replace in file
# Ctrl+Shift+F        find across project
# Ctrl+Shift+H        replace across project

# ===== Panels =====
# Ctrl+B              toggle sidebar
# Ctrl+\\`             toggle terminal
# Ctrl+Shift+M        problems
# Ctrl+Shift+E        explorer
# Ctrl+Shift+G        source control

# ===== settings.json — sensible defaults =====
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": { "source.organizeImports": "explicit" },
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.rulers": [80, 120],
  "editor.minimap.enabled": false,
  "editor.cursorBlinking": "smooth",
  "workbench.editor.enablePreview": false,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.exclude": { "**/node_modules": true, "**/dist": true, "**/.turbo": true },
  "search.exclude": { "**/node_modules": true, "**/dist": true, "**/*.lock": true },
  "git.autofetch": true,
  "terminal.integrated.scrollback": 100000
}

# ===== keybindings.json — bindings worth memorising =====
[
  { "key": "alt+z",       "command": "editor.action.toggleWordWrap" },
  { "key": "ctrl+alt+t",  "command": "workbench.action.tasks.runTask", "args": "test" },
  { "key": "ctrl+alt+l",  "command": "workbench.action.tasks.runTask", "args": "lint" }
]

# ===== Snippets (productive.code-snippets) =====
{
  "console log var": {
    "prefix": "clg",
    "scope": "javascript,typescript,typescriptreact",
    "body": ["console.log('$1:', $1);"]
  }
}

# ===== Tasks (.vscode/tasks.json) — committed to the repo =====
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "test",
      "type": "shell",
      "command": "npm test -- --watch",
      "presentation": { "reveal": "always", "panel": "dedicated" },
      "problemMatcher": []
    }
  ]
}

# ===== Workspace files =====
# 'File -> Save Workspace As...'  shop.code-workspace
# 'code shop.code-workspace' opens it
# Commit it; teammates pick up the same folders + tasks + recommended extensions

# ===== Settings sync =====
# 'Settings Sync: Turn On' (GitHub or Microsoft account)
# Syncs settings, snippets, keybindings, extensions across machines
# Stop redoing setup on every laptop

# ===== Extensions worth installing (most projects) =====
# GitLens                 inline blame + commit timelines
# Error Lens              show errors inline
# Prettier / Black / gofmt  formatters
# GitHub Pull Requests    PR review without leaving the editor
# REST Client             call HTTP endpoints from .http files
# YAML, TOML, dotenv
# Docker, Kubernetes (when relevant)
# GitHub Copilot (when relevant)

# ===== Pitfalls =====
# - Installing 50 extensions — editor becomes noisy and slow
# - Skipping settings sync — re-doing this on every machine
# - Not committing .vscode/tasks.json — your team does not benefit
# - Fighting the editor — read the keybindings; learn 5 shortcuts; loop
# - Treating Copilot suggestions as truth — verify before accepting

Why it matters

Settings sync + format-on-save + tasks.json + ten muscle-memory shortcuts is the configuration that turns VS Code from "the place I write code" into "the place I move at speed". Spend an afternoon on the setup once; the productivity wins compound every day after.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// Next: Continue / Copilot deep dive, custom themes, workspace dev containers.
Try it Yourself »

Discussion

Loading…

Next »