VS Code Productivity Guide

Introduction

VS Code is the most popular code editor, but most developers barely scratch the surface of its capabilities. The right extensions, keyboard shortcuts, and settings can dramatically speed up your workflow.

This guide focuses on the highest-impact productivity improvements — the 20% of features that give you 80% of the speed boost.

From essential extensions to custom snippets and multi-cursor editing, these tips apply whether you're writing React, CSS, or any web technology.

Key Concepts

Essential Keyboard Shortcuts

plain

// Navigation
Cmd+P          — Quick file open
Cmd+Shift+P    — Command palette
Cmd+Shift+F    — Search across files
Ctrl+G         — Go to line
Cmd+D          — Select next occurrence
Cmd+Shift+L    — Select all occurrences

// Editing
Alt+Up/Down    — Move line up/down
Shift+Alt+Down — Duplicate line
Cmd+Shift+K    — Delete line
Cmd+/          — Toggle comment
Cmd+Shift+[    — Fold region
Cmd+Shift+]    — Unfold region

Multi-Cursor Editing

Hold Alt and click to place multiple cursors. Select a word and press Cmd+D to select the next occurrence. Use Cmd+Shift+L to select all occurrences at once. This is faster than find-and-replace for targeted edits.

Practical Examples

1. Essential Extensions

bash

// Install via command line:
code --install-extension bradlc.vscode-tailwindcss
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension formulahendry.auto-rename-tag
code --install-extension wix.vscode-import-cost
code --install-extension usernamehw.errorlens
code --install-extension GitHub.copilot

2. Custom Snippets

json

// .vscode/snippets.code-snippets
{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "export function ${1:${TM_FILENAME_BASE}}(${2:props}) {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}"
    ]
  }
}

3. Workspace Settings