VS Code Productivity: Extensions, Settings, and Shortcuts That Matter

VS Code Productivity: Extensions, Settings, and Shortcuts That Matter

VS Code's extension marketplace has over 50,000 entries. Most are redundant, abandoned, or solve problems you don't have. This guide focuses on the extensions, settings, and shortcuts that produce the biggest productivity gains for real development work.

Extensions Worth Installing

Universal (Every Developer)

Error Lens -- Displays error and warning messages inline, right next to the problematic code. Eliminates the need to hover over red squiggles or check the Problems panel. This is the single highest-impact extension for any language.

GitLens -- Shows blame annotations, commit history, file history, and comparison views. The inline blame (who changed this line and when) is worth the install alone. Disable the features you don't use to keep the UI clean.

Todo Tree -- Scans your codebase for TODO, FIXME, HACK comments and shows them in a tree view. Keeps you from forgetting the shortcuts you took.

EditorConfig for VS Code -- Reads .editorconfig files and applies consistent formatting settings across the team. Handles the basics (indent style, trailing whitespace) without needing a full formatter config.

Web Development

ESLint -- Integrates ESLint linting directly in the editor. Pair with format-on-save for automatic fixes.

Prettier -- Code formatter for JavaScript, TypeScript, CSS, HTML, JSON, and more. Set it as the default formatter and enable format on save. Don't fight about formatting -- let Prettier decide.

Tailwind CSS IntelliSense -- Autocomplete for Tailwind classes, hover previews of CSS, and linting for class conflicts. Essential if you use Tailwind.

Python

Python (Microsoft) -- The official Python extension. Includes IntelliSense, linting, debugging, and Jupyter notebook support.

Ruff -- A fast Python linter and formatter (written in Rust) that replaces flake8, isort, and Black. Dramatically faster than the tools it replaces.

Go

Go (by the Go team) -- The official Go extension. Provides IntelliSense via gopls, debugging via Delve, test running, and code generation. This is all you need for Go development.

Rust

rust-analyzer -- The Rust language server. Provides incredible type inference, inline hints, code actions, and error explanations. Rust development in VS Code is genuinely excellent because of this extension.

Settings That Make a Difference

Open settings with Ctrl+, (or Cmd+, on macOS), then click the JSON icon in the top right to edit settings.json directly.

{
  // Editor behavior
  "editor.fontSize": 13,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontLigatures": true,
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.stickyScroll.enabled": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.linkedEditing": true,
  "editor.renderWhitespace": "boundary",
  "editor.inlineSuggest.enabled": true,

  // Format on save
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },

  // File management
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/.next": true,
    "**/dist": true
  },

  // Terminal
  "terminal.integrated.fontFamily": "'JetBrains Mono'",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.linux": "zsh",

  // Search
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.next": true,
    "**/coverage": true
  },

  // Telemetry (disable)
  "telemetry.telemetryLevel": "off",

  // Workbench
  "workbench.colorTheme": "Catppuccin Mocha",
  "workbench.iconTheme": "catppuccin-mocha",
  "workbench.startupEditor": "none",
  "workbench.editor.enablePreview": false
}

Key settings to call out:

• Disable the minimap. It wastes horizontal space and you never click on it. Use Ctrl+G to go to a line number instead.
• Enable bracket pair colorization. It's built-in now (no extension needed) and makes nested brackets readable.
• Enable sticky scroll. Shows the current function/class/block header pinned at the top as you scroll. Incredibly useful in large files.
• Format on save. This eliminates formatting as a conscious task. You just write code and it gets formatted when you save.
• Disable preview mode (enablePreview: false). By default, single-clicking a file opens it in "preview" mode, which gets replaced when you click another file. This is confusing. Disable it.

Multi-Cursor and Selection Mastery

Multi-cursor editing is VS Code's killer feature over terminal editors. Learn these and you'll refactor code dramatically faster.

The power combo: Select a variable name, press Ctrl+D repeatedly to select each occurrence, then type the new name. All instances update simultaneously. Use Ctrl+K Ctrl+D to skip an occurrence you don't want to change.

Keyboard Shortcuts Worth Memorizing

Beyond multi-cursor, these shortcuts eliminate mouse usage:

Tip: Press Ctrl+K Ctrl+S to open the keyboard shortcuts editor. Search for any action and rebind it. You can also search by pressing a key combination to see what it's bound to.

Remote Development

VS Code's remote development capabilities are a genuine differentiator over other editors.

Remote-SSH

Install the Remote - SSH extension. Connect to any machine you can SSH into, and VS Code runs a server on the remote while the UI stays local. File browsing, terminal, debugging, extensions -- everything works as if the files were local.

// ~/.ssh/config
Host devbox
  HostName 10.0.0.50
  User dev
  ForwardAgent yes

Then Ctrl+Shift+P > "Remote-SSH: Connect to Host" > select "devbox." VS Code opens with the remote filesystem.

Dev Containers

The Dev Containers extension runs your development environment inside a Docker container. Add a .devcontainer/devcontainer.json to your repo and everyone on the team gets an identical environment.

{
  "name": "Node.js Dev",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ]
    }
  },
  "forwardPorts": [3000]
}

WSL Integration

On Windows, the WSL extension connects VS Code to your Windows Subsystem for Linux. You get a real Linux development environment with VS Code's GUI. This is the best way to develop on Windows.

Extensions to Avoid

• Bracket Pair Colorizer: Built into VS Code now. Uninstall the extension.
• Path Intellisense / Path Autocomplete: VS Code's built-in path completion handles this.
• Settings Sync (extension): VS Code has built-in settings sync via your GitHub or Microsoft account.
• Any extension that "beautifies" or "formats" a specific language: Use Prettier or the language-specific formatter (Ruff for Python, rustfmt for Rust, gofmt for Go). One formatter per language, not five competing extensions.

The Bottom Line

VS Code productivity comes from three things: format on save (so you stop thinking about formatting), multi-cursor editing (so refactoring is fast), and the right 5-10 extensions (not 50). Disable the minimap, learn the keyboard shortcuts for navigation and selection, and use remote development when it fits your workflow. Everything else is noise.