My ultimate VS Code setup for web development in 2025

Learn how to set up Visual Studio Code with the best extensions, themes, and settings for web development. Includes performance tips and keyboard shortcuts.

Introduction

Visual Studio Code has become the de facto code editor for web developers, and for good reason. Its extensibility, performance, and features make it an incredibly powerful tool. In this guide, I'll share my complete VS Code setup that I've refined over years of web development. You'll learn about essential extensions, productivity-boosting settings, and customizations that will significantly improve your development workflow.

Core Settings and Customization

Essential Settings

Here are my must-have settings for VS Code. Add these to your settings.json:

{
  "workbench.colorTheme": "Night Owl",
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.lineHeight": 1.6,
  "editor.codeActionsOnSave": {
    "source.organizeImports": "always"
  },
  "editor.wordWrap": "on",
  "git.confirmSync": false,
  "git.autofetch": true
}

Theme Setup

I prefer dark themes for reduced eye strain. Here's my current theme setup:

• Color Theme: Tokyo Night
• Icon Theme: Material Icon Theme
• Font: JetBrains Mono with ligatures enabled

Essential Extensions

Code Quality and Formatting

• 🎨 Prettier - Code formatting
• 📝 ESLint - JavaScript linting
• 🔍 Code Spell Checker - Catch spelling mistakes
• ⚡ Error Lens - Inline error messages

IntelliSense and Snippets

• 🤖 GitHub Copilot - AI code suggestions
• 📦 npm Intellisense - npm package autocompletion
• 🎯 Path Intellisense - File path autocompletion
• ⚛️ ES7+ React/Redux/React-Native snippets - React code snippets