Boost VS Code Productivity by 200% — Shortcuts, Extensions, Settings

Are You Really Using VS Code Properly?

Most developers use VS Code, but many utilize less than 10% of its features. It’s like driving a car in first gear only. Once you master shortcuts, extensions, and settings, your coding speed will feel at least 2x faster.

Top 30 Essential Shortcuts

Shortcut (Windows/Linux)	macOS	Function
`Ctrl+P`	`Cmd+P`	Quick file open (search by filename)
`Ctrl+Shift+P`	`Cmd+Shift+P`	Command Palette
`Ctrl+Tab`	`Ctrl+Tab`	Switch recent files
`Ctrl+\`	`Cmd+\`	Split editor
`Ctrl+B`	`Cmd+B`	Toggle sidebar
`Ctrl+J`	`Cmd+J`	Toggle terminal panel
`Ctrl+Shift+E`	`Cmd+Shift+E`	File Explorer
`Ctrl+Shift+F`	`Cmd+Shift+F`	Global search

Code Editing

Shortcut (Windows/Linux)	macOS	Function
`Alt+Up/Down`	`Opt+Up/Down`	Move line
`Shift+Alt+Up/Down`	`Shift+Opt+Up/Down`	Duplicate line
`Ctrl+Shift+K`	`Cmd+Shift+K`	Delete line
`Ctrl+D`	`Cmd+D`	Select next occurrence (multi-cursor)
`Ctrl+Shift+L`	`Cmd+Shift+L`	Select all occurrences
`Alt+Click`	`Opt+Click`	Add multi-cursor
`Ctrl+/`	`Cmd+/`	Toggle line comment
`Ctrl+Shift+[`	`Cmd+Opt+[`	Fold code
`Ctrl+Shift+]`	`Cmd+Opt+]`	Unfold code
`F2`	`F2`	Rename symbol (refactoring)
`Ctrl+.`	`Cmd+.`	Quick Fix

Shortcut (Windows/Linux)	macOS	Function
`F12`	`F12`	Go to Definition
`Alt+F12`	`Opt+F12`	Peek Definition (popup)
`Shift+F12`	`Shift+F12`	Find References
`Ctrl+G`	`Cmd+G`	Go to line
`Ctrl+Shift+O`	`Cmd+Shift+O`	Find symbol in current file
`Ctrl+T`	`Cmd+T`	Find symbol in workspace

Multi-Cursor in Practice

Multi-cursor is the most powerful editing feature in VS Code.

// Example: renaming multiple variables at once
// Before
const userName = "Kim";
const userEmail = "kim@example.com";
const userAge = 30;
const userRole = "admin";

// 1. Double-click "user" to select it
// 2. Press Ctrl+D repeatedly to select the next "user"
// 3. Type "member" → all change simultaneously

// After
const memberName = "Kim";
const memberEmail = "kim@example.com";
const memberAge = 30;
const memberRole = "admin";

// Example: adding quotes to JSON keys simultaneously
// Before (place cursors at the end of each line and edit simultaneously)
// 1. Use Ctrl+Shift+L to select all "name" occurrences
// 2. Or Alt+Click to add cursors at desired positions

// Column selection: Shift+Alt+Drag
// Useful for typing/deleting text at the same position across multiple lines

Recommended Extensions

Essential Extensions

// .vscode/extensions.json — recommend extensions to teammates
{
  "recommendations": [
    // Code quality
    "dbaeumer.vscode-eslint",        // ESLint integration
    "esbenp.prettier-vscode",        // Prettier formatter
    "streetsidesoftware.code-spell-checker", // Typo detection

    // Productivity
    "eamodio.gitlens",               // Git history, blame, comparison
    "usernamehw.errorlens",          // Show errors inline
    "christian-kohler.path-intellisense", // Path autocomplete

    // Language-specific
    "bradlc.vscode-tailwindcss",     // Tailwind CSS autocomplete
    "ms-python.python",              // Python support
    "golang.go"                      // Go support
  ]
}

Key Features by Extension

Extension	Key Feature	Why It’s Essential
GitLens	Inline `git blame`, commit history	Instantly see who wrote code and why
Error Lens	Show errors/warnings on the relevant line	No need to open the Problems panel
Prettier	Auto-format on save	Unify code style, end style debates
Code Spell Checker	Check typos in variable names/comments	Prevent typo bugs proactively
Path Intellisense	File path autocomplete	Prevent import path typos

settings.json Optimization

// .vscode/settings.json (per-project settings)
{
  // Auto-actions on save
  "editor.formatOnSave": true,           // Format on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",  // Auto-fix ESLint on save
    "source.organizeImports": "explicit" // Organize imports on save
  },

  // Editor settings
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",              // Auto word wrap
  "editor.minimap.enabled": false,       // Disable minimap (save space)
  "editor.bracketPairColorization.enabled": true, // Color-code bracket pairs
  "editor.guides.bracketPairs": true,    // Bracket pair guide lines
  "editor.stickyScroll.enabled": true,   // Sticky scroll (shows function name at top)
  "editor.inlineSuggest.enabled": true,  // Inline suggestions (AI copilot, etc.)

  // File settings
  "files.autoSave": "onFocusChange",    // Auto-save on focus change
  "files.trimTrailingWhitespace": true,  // Remove trailing whitespace
  "files.insertFinalNewline": true,      // Add newline at end of file

  // Explorer settings
  "explorer.confirmDelete": false,       // Disable delete confirmation
  "explorer.compactFolders": false,      // Disable compact folder display

  // Terminal settings
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.windows": "Git Bash",

  // Search exclusions (performance improvement)
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.git": true
  }
}

Snippet Configuration

Registering frequently used code patterns as snippets lets you generate entire code blocks with just a few keystrokes.

// User snippets: Ctrl+Shift+P → "Snippets: Configure Snippets"
// typescript.json or global snippet file
{
  // Type "cl" then Tab → console.log auto-complete
  "Console Log": {
    "prefix": "cl",
    "body": "console.log('${1:label}:', $2);",
    "description": "console.log shortcut"
  },

  // Type "comp" then Tab → React component scaffold
  "React Component": {
    "prefix": "comp",
    "body": [
      "interface ${1:Component}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:Component}({ $3 }: ${1:Component}Props) {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}"
    ],
    "description": "React function component"
  },

  // Type "trycatch" then Tab → try-catch block
  "Try Catch": {
    "prefix": "trycatch",
    "body": [
      "try {",
      "  $1",
      "} catch (error) {",
      "  console.error('${2:Error occurred}:', error);",
      "  $0",
      "}"
    ],
    "description": "try-catch block"
  }
}

Workspace Usage

// project.code-workspace — combine multiple folders into one workspace
{
  "folders": [
    { "path": "./frontend", "name": "Frontend (React)" },
    { "path": "./backend", "name": "Backend (Node)" },
    { "path": "./shared", "name": "Shared Types" }
  ],
  "settings": {
    // Workspace-wide settings
    "editor.tabSize": 2,
    "typescript.tsdk": "frontend/node_modules/typescript/lib"
  },
  "tasks": {
    "version": "2.0.0",
    "tasks": [
      {
        "label": "Full-stack dev server",
        "dependsOn": ["frontend:dev", "backend:dev"],
        "group": "build"
      }
    ]
  }
}

Practical Tips

Make Ctrl+P a habit: Instead of clicking through the file explorer, type part of a filename for instant navigation. After Ctrl+P, prefix with # for symbol search, or : for line number navigation.
Ctrl+Shift+P (Command Palette) is a universal tool: You can search for any VS Code feature by name. If you don’t know a shortcut, find it here.
Enable Settings Sync: Use Settings Sync to maintain the same environment across multiple devices (built into VS Code).
Commit the .vscode/ folder to git: Sharing settings.json, extensions.json, and launch.json ensures all team members have the same development environment.
Keep your hands on the keyboard: Every time you reach for the mouse, ask yourself “Can I do this with a shortcut?” Two weeks of deliberate practice will make it a habit.
Use Zen Mode (Ctrl+K Z): When you need focus, hide the sidebar, tabs, and status bar to leave only the editor.