💻 VS Code – Deine Werkstatt

So richtest du alles richtig ein – Schritt für Schritt

1. VS Code installieren

Lade dir Visual Studio Code (nicht zu verwechseln mit „Visual Studio“!) von der offiziellen Website herunter:

Wähle dein Betriebssystem (Windows, macOS oder Linux) und folge der Installation.

2. Deutsche Sprache einstellen (optional, aber hilfreich)

VS Code ist standardmäßig auf Englisch. Um die Oberfläche auf Deutsch umzustellen:

Öffne VS Code
Drücke Strg + Umschalt + P (Windows) oder Cmd + Shift + P (Mac)
Gib ein: Configure Display Language
Wähle „Install additional languages…“
Suche nach German und installiere das Paket „German Language Pack for VS Code“
Nach der Installation: erneut Configure Display Language aufrufen und de auswählen
VS Code neu starten

⚠️ Hinweis: Die meisten Befehle im Unterricht bleiben auf Englisch (z. B. „Live Server“), aber Menüs und Fehlermeldungen sind dann auf Deutsch.

3. Live Server installieren (Pflicht!)

Ohne Live Server funktionieren externe CSS- und JS-Dateien nicht (Sicherheitsbeschränkung des Browsers).

Klicke links in VS Code auf das Erweiterungs-Symbol (vier Quadrate)
Suche nach: Live Server
Installiere die Erweiterung von Ritwick Dey

Nach der Installation siehst du unten rechts in der Statusleiste einen Button: „Go Live“.

4. Projektordner öffnen – NICHT nur eine Datei!

⚠️ Fehler Nr. 1 im Unterricht: Nur eine HTML-Datei öffnen → CSS/JS funktionieren nicht!
✅ Richtig: Den gesamten Ordner html-css-tutorial öffnen!

Klicke in VS Code auf „Datei“ → „Ordner öffnen“
Wähle den Ordner html-css-tutorial aus (dein gesamtes Projekt!)
Jetzt siehst du alle Dateien im Explorer links
Klicke auf eine HTML-Datei → unten rechts auf „Go Live“
Der Browser öffnet mit der korrekten URL (z. B. http://127.0.0.1:5500/index.html)

💡 Merke: Wenn du nur eine Datei öffnest, zeigt der Browser file:// in der Adresszeile.
Bei Live Server steht http:// – das ist der Unterschied!

5. Dateiendungen sichtbar machen (Windows)

Unter Windows sind Dateiendungen oft versteckt – das führt zu Fehlern wie seite.html.txt.

💡 So geht’s: Explorer → „Ansicht“ → „Optionen“ → „Ordner und Suchoptionen“ → Reiter „Ansicht“ → Haken bei „Erweiterungen bei bekannten Dateitypen ausblenden“ entfernen.