Zum Inhalt springen

VS Code für Webentwicklung – Extensions & Workflows (2025)

Visual Studio Code ist der De-facto-Standard für moderne Webentwicklung. Mit den richtigen Extensions, Settings und Workflows wird VS Code zur ultimativen Entwicklungsumgebung. Hier zeige ich mein 2025er Setup: unverzichtbare Extensions für HTML/CSS/JavaScript, produktive Shortcuts, intelligente Snippets, Git-Integration, Performance-Tipps und bewährte Workflows für effizientes Coding.

VS Code für Webentwicklung – Extensions & Workflows – Symbolbild

~9 Min. Lesezeit · Veröffentlicht am

Warum VS Code für Webentwicklung?

💡 Settings Sync aktivieren: Unter Datei → Einstellungen → Settings Sync mit GitHub/Microsoft-Account anmelden. Alle Extensions, Settings und Snippets werden automatisch synchronisiert!

Essential Extensions 2025

🔧 Auto Rename Tag
Automatisches Umbenennen von HTML/XML-Tags.
ext install formulahendry.auto-rename-tag
💄 Prettier – Code Formatter
Einheitlicher Stil für JS/TS/CSS/HTML/JSON/MD.
ext install esbenp.prettier-vscode
🔍 Error Lens
Zeigt Lint-/TS-Fehler inline an.
ext install usernamehw.errorlens
🌈 Bracket Pair Colorizer 2
Farbige Klammerpaare für Übersicht in tiefen Strukturen.
ext install CoenraadS.bracket-pair-colorizer-2

HTML/CSS Extensions

🏷️ HTML CSS Support
Autocomplete für CSS-Klassen in HTML.
ext install ecmel.vscode-html-css
📐 HTML Boilerplate
HTML5-Templates schnell anlegen (Emmet).
ext install sidthesloth.html5-boilerplate
🎨 Live Sass Compiler
SCSS → CSS mit Live-Reload. Ideal für lokale Apache-Setups.
ext install glenn2223.live-sass
🔧 CSS Peek
Goto-Definition für CSS-Klassen.
ext install pranaygp.vscode-css-peek
🎯 Autoprefixer
Automatische Vendor-Prefixes.
ext install mrmlnc.vscode-autoprefixer

JavaScript/TypeScript Extensions

🚨 ESLint
Linting mit Prettier-Integration für saubere Builds.
ext install dbaeumer.vscode-eslint
📘 TypeScript Importer
Automatische Imports für TS/JS.
ext install pmneo.tsimporter
⚛️ ES7+ React/Redux Snippets
Kürzel wie rafce für Komponenten.
ext install dsznajder.es7-react-js-snippets
🟢 Vue Language Features (Volar)
Vue 3 + TypeScript + Template-IntelliSense.
ext install Vue.volar

Git & GitHub Integration

🔗 GitLens — Git supercharged
Blame, History, Inline-Hinweise, Visualisierungen.
ext install eamodio.gitlens
🐙 GitHub Pull Requests and Issues
PRs & Issues direkt in VS Code managen.
ext install GitHub.vscode-pull-request-github
📊 Git Graph
Interaktiver Branch-Graph.
ext install mhutchie.git-graph

Git-Workflow (Kurz)

  1. Änderungen im Source Control-Panel prüfen
  2. Inline Blame (GitLens) für Kontext
  3. Selektives Staging auf relevante Chunks
  4. Branch-Status in Git Graph kontrollieren
  5. PR via GitHub Extension erstellen

Settings & Konfiguration

Über Datei → Einstellungen oder direkt in settings.json:

{
  // Editor
  "editor.fontSize": 14,
  "editor.fontFamily": "JetBrains Mono, Fira Code, Monaco, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,

  // Format on Save
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // Files & Autosave
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  // Terminal
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.shell.osx": "/bin/zsh",

  // Git
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,

  // Explorer
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,

  // Emmet
  "emmet.includeLanguages": { "javascript": "javascriptreact" }
}

Workspace-spezifische Settings

{
  "editor.tabSize": 4,
  "eslint.workingDirectories": ["./src"],
  "typescript.preferences.importModuleSpecifier": "relative"
}

Custom Snippets & Shortcuts

HTML Snippets

{
  "HTML5 Boilerplate": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\\"de\\">",
      "<head>",
      "  <meta charset=\\"UTF-8\\">",
      "  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">",
      "  <title>$1</title>",
      "  <link rel=\\"stylesheet\\" href=\\"$2\\">",
      "</head>",
      "<body>",
      "  $3",
      "  <script src=\\"$4\\"></script>",
      "</body>",
      "</html>"
    ],
    "description": "HTML5 Boilerplate mit Platzhaltern"
  }
}

Wichtige Shortcuts

Workspace Management

Multi-Root Workspaces

{
  "folders": [
    { "name": "Frontend", "path": "./frontend" },
    { "name": "Backend API", "path": "./api" },
    { "name": "Docs", "path": "./docs" }
  ],
  "settings": { "editor.tabSize": 2 },
  "extensions": { "recommendations": ["esbenp.prettier-vscode","dbaeumer.vscode-eslint"] }
}

Remote Development

🚀 Remote – SSH
Entwicklung auf Servern per SSH.
ext install ms-vscode-remote.remote-ssh
🐳 Remote – Containers
Arbeiten in Docker-Containern, reproduzierbare Umgebungen.
ext install ms-vscode-remote.remote-containers

SSH-Config

Host webserver
  HostName your-server.com
  User developer
  Port 22
  IdentityFile ~/.ssh/id_rsa

Dann: ⌘⇧P → Remote-SSH: Connect to Host → webserver

Performance-Tipps

⚡ VS Code schneller machen: Viele Extensions verlangsamen Start und IntelliSense. So bleibst du flott.

Extension-Management

File-Watcher & Suche optimieren

{
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/dist/**": true,
    "**/build/**": true,
    "**/.git/objects/**": true,
    "**/tmp/**": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true
  }
}

Memory/CPU

"typescript.tsserver.maxTsServerMemory": 4096,
"eslint.runtime": "node"

FAQ

Wie viele Extensions sind sinnvoll?
Weniger ist mehr – 15–25 aktive Extensions reichen. Unbenutzte pro Workspace deaktivieren.

VS Code langsam – was tun?
Reload, Extensions prüfen, files.watcherExclude setzen, TS-Memory erhöhen.

Settings zwischen Geräten synchronisieren?
Settings Sync einschalten und anmelden, fertig.

Prettier + ESLint?
ESLint = Qualität, Prettier = Stil. Zusammen unschlagbar.

🚀 Nächste Schritte: Kombiniere VS Code mit Node.js Build-Tools und meinem macOS Webentwicklungs-Setup für einen vollständigen Workflow.

VS Code Extensions Webentwicklung Produktivität Prettier ESLint Git JavaScript