Entwicklungsumgebung einrichten

Für unseren Web Developer Lehrgang verwenden wir Visual Studio Code (VS Code) als primären Code-Editor. VS Code bietet hervorragende Unterstützung für HTML, CSS und JavaScript-Entwicklung und lässt sich optimal für unsere Anforderungen anpassen.

Visual Studio Code einrichten

Installation

1. Laden Sie VS Code von der offiziellen Website herunter
2. Folgen Sie den Installationsanweisungen für Ihr Betriebssystem
3. Starten Sie VS Code nach der Installation
4. Installieren Sie diese Erweiterungen über das Extensions-Panel (Tastenkürzel: Ctrl+Shift+X oder Cmd+Shift+X auf Mac):

Empfohlene Erweiterungen

Produktivität

• Liveserver: Lokaler Webserver für effizientes Arbeiten mit HTML/CSS Link zur Extension

• Auto Rename Tag: Automatisches Umbenennen von HTML/XML-Tags Link zur Extension

• Prettier: Code-Formatter für automatische Formatierung Ihres Codes Link zur Extension Wichtig: Befolgen Sie die Installationsanleitung in der Beschreibung der Erweiterung. In den VS Code Einstellungen muss der Codeeditor aktiviert werden.

  {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

  Prettier Konfiguration über settings.json in VS Code hinterlegen:

1. Öffnen Sie die VS Code-Einstellungen: Drücken Sie Strg+Shift+P (Windows/Linux) oder Cmd+Shift+P (Mac)
2. Geben Sie “Preferences: Open Settings (JSON)” ein und wählen Sie es aus
3. In der geöffneten settings.json Datei fügen Sie die Prettier-Einstellungen hinzu:
4. Speichern Sie die Datei mit Strg+S (Windows/Linux) oder Cmd+S (Mac)

Grundlegende Einstellungen anpassen

Öffnen Sie die Einstellungen mit Ctrl+, (Cmd+, auf Mac):

Empfohlene Einstellungen:

• Aktivieren Sie “Format On Save” für automatische Formatierung
• Setzen Sie die Tab-Grösse auf 2 Spaces (typisch für HTML/CSS-Projekte)
• Aktivieren Sie “Auto Save” für kontinuierliches Speichern

Terminal einrichten

Öffnen Sie das integrierte Terminal mit Ctrl+` oder über das Menü Terminal > New Terminal:

Projektordner erstellen

1. Wählen Sie in VS Code “Open Folder” oder nutzen Sie Ctrl+K Ctrl+O

2. Erstellen Sie einen neuen Ordner für Ihr Projekt und öffnen Sie diesen

   

Nächste Schritte

Mit VS Code sind wir für die HTML/CSS-Entwicklung gerüstet. Wir werden mit der Erstellung von statischen Webseiten beginnen und schrittweise JavaScript-Funktionalitäten hinzufügen. Der Live Server wird uns dabei helfen, unsere Änderungen sofort im Browser zu sehen.

Tipp

Immer im VS Code den Ordner öffnen um mit Dateien zu arbeiten. Nur so funktioniert der Live Server korrekt und aktualisiert automatisch den Browser bei jeder Änderung. Dadurch spart man sich das manuelle Neuladen der Seite nach jeder Code-Änderung, was den Entwicklungsprozess erheblich beschleunigt. Für maximale Effizienz empfiehlt es sich, das VS Code Fenster und den Browser nebeneinander anzuordnen. So behält man beide Ansichten gleichzeitig im Blick und kann die Auswirkungen der Codeänderungen sofort sehen, ohne zwischen Fenstern wechseln zu müssen.