VS Code für HTML & CSS

Projekt einrichten

Für ein sauberes Setup legst du zuerst einen Projektordner an. In VS Code arbeitest du immer innerhalb eines Root-Verzeichnisses, damit alle Dateien, Bilder und Styles logisch zusammengefasst sind.

Beispiel-Ordnerstruktur

projektname/
 ├── index.html
 ├── /assets
 │     ├── /css
 │     │     └── style.css
 │     ├── /img
 │     └── /js
 └── /components (optional)
    

Projekt in VS Code öffnen

Cmd ⌘ + O oder File → Open Folder
→ Ordner auswählen → öffnen.

Danach erkennt VS Code automatisch deine Dateien und bietet dir passende Features an (z. B. Emmet).

Wichtige Bereiche in VS Code

• Explorer - Verwaltet deine Dateien und Ordner.
• Editor - Hier schreibst du deinen Code.
• Statusleiste - Zeigt Sprache, Formatierung, Git-Status, Encoding usw.
• Command Palette - Zentrale Steuerung für alle Befehle (siehe Shortcut).
• Extensions - Installiere Plugins, um VS Code zu erweitern.
• Terminal - Eingebautes Terminal für Node, Git etc.

Der Editor arbeitet mit Tabs, Split-Views und Multi-Cursorn - ideal für paralleles HTML/CSS-Arbeiten.

Emmet richtig nutzen

Emmet ist bereits in VS Code integriert. Sobald du eine .html- oder .css-Datei nutzt, kannst du extrem schnell Code generieren.

Beispiele

• ! → drückt Enter → komplette HTML-Grundstruktur
• ul>li*5 → drückt Enter → erzeugt Liste mit 5 li
• .box → drückt Enter → erzeugt <div class="box">
• p.red.big → <p class="red big">

Emmet funktioniert auch in CSS:

• m10 → margin: 10px;
• p20-10 → padding: 20px 10px;

Live Server

Mit Live Server siehst du deine Änderungen sofort im Browser, ohne manuell neu zu laden.

Code automatisch formatieren

VS Code kann deinen Code automatisch einrücken und formatieren.

Tipp: du kannst „Format on Save“ aktivieren: Datei → Einstellungen → Format on Save

Terminal öffnen

Wenn du später mit Node.js oder Git arbeitest, brauchst du das integrierte Terminal.

Ctrl + ` (macOS & Windows)

Falls deine Tastatur kein „Ctrl“ besitzt (Mac): → View → Terminal

Sprache einstellen

→ "language" eingeben → gewünschte Sprache auswählen. Danach muss VS Code neu gestartet werden.

Solltest du eine andere Tastaturbelegung haben, die dir diesen Shortcut nicht erlaubt, kannst du aber ganz oben in das Suchfeld klicken (dort, wo der Name deines Root-Verzeichnisses steht), dann ">" → "language" eintippen, wodurch die "richtige" Suche in den Einstellungen geöffnet wird..

Plugins

VS Code Profile anlegen

Wenn du mit verschiedenen Sprachen arbeitest (HTML/CSS, Python, PHP, etc.), laden standardmäßig alle Extensions gleichzeitig. Das kann VS Code verlangsamen und die Oberfläche unübersichtlich machen.

Profile lösen dieses Problem: Du erstellst separate Arbeitsumgebungen mit jeweils nur den Extensions und Einstellungen, die du für eine bestimmte Aufgabe brauchst.

Neues Profil erstellen

Cmd ⌘ + Shift + P (Mac) oder Strg + Shift + P (Windows)
→ "Profiles: Create Profile" eingeben → Enter

Empfohlenes HTML/CSS Profil

Für ein schlankes Frontend-Profil brauchst du nur diese Extensions:

• Live Server - Auto-Reload im Browser
• Prettier - Code-Formatierung
• Auto Rename Tag - Ändert öffnende/schließende Tags gleichzeitig
• CSS Peek - Klick auf Klasse → springt zur CSS-Definition
• HTML CSS Support - Autocomplete für CSS-Klassen in HTML

Zwischen Profilen wechseln

Klicke unten links auf das Zahnrad-Icon → Profiles → Profil auswählen.

Oder per Shortcut: Cmd ⌘ + Shift + P → "Profiles: Switch Profile"

Bei bestehenden Projekten

Wenn du ein Profil wechselst, passiert Folgendes:

• Deine Dateien bleiben unverändert - Profile betreffen nur VS Code, nicht dein Projekt
• Extensions werden getauscht - Nur die zum Profil gehörenden Extensions sind aktiv
• Settings werden getauscht - Jedes Profil kann eigene Einstellungen haben
• Workspace-Settings bleiben - Falls du .vscode/settings.json im Projekt hast, gilt diese weiterhin

Profile exportieren & teilen

Du kannst dein perfekt eingerichtetes Profil exportieren und auf anderen Rechnern importieren:

Cmd ⌘ + Shift + P → "Profiles: Export Profile" → Als Datei speichern oder GitHub Gist

Projekt-spezifische Settings

Manchmal brauchst du für ein bestimmtes Projekt andere Einstellungen als global. Dafür gibt es Workspace Settings:

JSON Kopieren

// .vscode/settings.json in deinem Projektordner
{
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "files.exclude": {
        "node_modules": true
    }
}

Diese Settings gelten nur für dieses Projekt und überschreiben deine globalen Einstellungen.

Praktische Shortcuts