VS Code Ultimate Setup: Top 20 Extensions & Keybindings for Modern Coders

Why Visual Studio Code Dominates Modern Engineering

Visual Studio Code (VS Code) is lightweight, modular, and supported by a vast ecosystem of extensions. However, an unconfigured editor leads to manual formatting chores, syntax oversights, and unnecessary mouse clicks. Below is our definitive workstation setup.

Top 10 Must-Have Extensions

1. Error Lens: Elevates language diagnostics by rendering error messages inline with your code instead of hiding them in tooltips.
2. Prettier - Code Formatter: Enforces consistent styling across JavaScript, JSON, CSS, and Markdown.
3. GitLens: Visualizes code authorship directly inside the editor, showing commit annotations and history diffs.
4. Thunder Client: A lightweight REST API client embedded inside VS Code, eliminating the need to launch heavy desktop apps for API testing.
5. Auto Rename Tag: Automatically renames paired HTML/XML tags when modifying the opening or closing tag.
6. Path Intellisense: Autocompletes filenames and relative paths within import statements.
7. Color Highlight: Renders color swatches directly over HEX, RGB, and HSL codes in CSS and source files.
8. Todo Tree: Aggregates all TODO, FIXME, and NOTE comments into a searchable tree view.
9. Docker: Simplifies building, managing, and debugging containerized applications.
10. Material Icon Theme: Adds recognizable file icons to the sidebar directory tree.

Productive settings.json Configuration

{
  "editor.fontFamily": "\"JetBrains Mono\", \"Fira Code\", Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14.5,
  "editor.lineHeight": 1.6,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.minimap.enabled": false,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "workbench.editor.enablePreview": false
}

Top Productivity Keybindings to Master

• Ctrl + P (or Cmd + P): Quick File Open
• Ctrl + Shift + P: Command Palette
• Alt + Up / Down: Move line or selection up and down
• Shift + Alt + Down: Duplicate line downwards
• Ctrl + D: Multi-cursor select next occurrence of highlighted word
• Ctrl + \: Split editor pane side-by-side