VS Code Setup for Web Development

Published: September 25, 2024 | Reading time: 12 minutes

Quick Setup Summary

Get VS Code ready for web development in 5 minutes with these essential extensions and configurations:

Essential Extensions

# Install these extensions:
- Live Server
- Prettier - Code formatter
- ESLint
- Auto Rename Tag
- Bracket Pair Colorizer
- GitLens
- Thunder Client
- HTML CSS Support

Why VS Code for Web Development?

Visual Studio Code has become the go-to editor for web developers due to its:

Lightweight performance - Fast startup and responsive editing
Rich extension ecosystem - Thousands of extensions for every need
Built-in Git integration - Version control without leaving the editor
IntelliSense - Smart code completion and suggestions
Debugging support - Built-in debugger for JavaScript and TypeScript
Terminal integration - Run commands without switching windows

Essential Extensions for Web Development

1. Live Server

Start a local development server with live reload functionality.

Installation

Extension ID: ritwickdey.liveserver
Features:
- Live reload on file changes
- Customizable port and host
- HTTPS support
- Multiple browser support

2. Prettier - Code Formatter

Automatically format your code for consistent styling.

Configuration

// settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.tabWidth": 2
}

3. ESLint

Find and fix problems in your JavaScript code.

ESLint Configuration

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ['eslint:recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    'no-console': 'warn',
    'no-unused-vars': 'error'
  }
};

4. Auto Rename Tag

Automatically rename paired HTML/XML tags.

5. Bracket Pair Colorizer

Colorize matching brackets for better code readability.

6. GitLens

Supercharge Git capabilities with blame annotations, code lens, and more.

VS Code Settings for Web Development

Recommended Settings

// settings.json
{
  // Editor settings
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'Consolas', monospace",
  "editor.fontLigatures": true,
  
  // File settings
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  
  // Emmet settings
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "emmet.triggerExpansionOnTab": true,
  
  // Terminal settings
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
}

Workspace Configuration

Multi-root Workspaces

Organize multiple projects in a single VS Code window:

workspace.json

{
  "folders": [
    {
      "name": "Frontend",
      "path": "./frontend"
    },
    {
      "name": "Backend",
      "path": "./backend"
    },
    {
      "name": "Documentation",
      "path": "./docs"
    }
  ],
  "settings": {
    "typescript.preferences.includePackageJsonAutoImports": "auto"
  }
}

Debugging Configuration

Chrome Debugging

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true
    },
    {
      "name": "Attach to Chrome",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

Keyboard Shortcuts for Productivity

Essential Shortcuts

Ctrl+Shift+P - Command Palette
Ctrl+P - Quick Open
Ctrl+` - Toggle Terminal
Ctrl+Shift+` - New Terminal
Ctrl+B - Toggle Sidebar
Ctrl+Shift+E - Explorer

Editing Shortcuts

Ctrl+D - Select Next Occurrence
Ctrl+Shift+L - Select All Occurrences
Alt+Click - Multi-cursor
Ctrl+Shift+K - Delete Line
Alt+Up/Down - Move Line
Ctrl+Shift+Up/Down - Copy Line

Project-Specific Configurations

React Development

React Extensions

Essential React Extensions:
- ES7+ React/Redux/React-Native snippets
- React Native Tools
- Auto Import - ES6, TS, JSX, TSX
- Simple React Snippets
- React Developer Tools

Vue.js Development

Vue Extensions

Essential Vue Extensions:
- Vetur
- Vue 3 Snippets
- Vue Language Features (Volar)
- Vue VSCode Snippets

Performance Optimization

Disable Unnecessary Extensions

Keep your VS Code fast by disabling extensions you don't use:

Performance Tips

1. Disable extensions you don't need
2. Use workspace-specific extensions
3. Disable telemetry if not needed
4. Limit file watchers for large projects
5. Use .vscode/settings.json for project settings

Recommended Themes

Dark Themes

One Dark Pro
Material Theme
Dracula Official
Monokai Pro
Night Owl

Light Themes

GitHub Light
Solarized Light
Quiet Light
Monokai Light
Atom One Light

Summary

VS Code is an excellent choice for web development when properly configured. Key takeaways:

Install essential extensions for your tech stack
Configure settings for optimal productivity
Use workspace configurations for multi-project setups
Set up debugging for your preferred browser
Learn keyboard shortcuts to boost efficiency
Keep performance optimized by managing extensions

Need More Help?

Struggling with VS Code setup or want to optimize your development workflow? Our experts can help you configure the perfect development environment.

Get Expert Help

VS Code Setup for Web Development - Complete Guide