# Entwicklungsumgebung mit VS Code, Docker und Dev Containers Diese Anleitung beschreibt die Schritte zur Installation von Visual Studio Code, Docker und der Dev-Container-Erweiterung. --- ## 1. Visual Studio Code installieren **Download:** [https://code.visualstudio.com/](https://code.visualstudio.com/) **Schritte:** 1. Webseite öffnen. 2. Betriebssystem auswählen. 3. Installationsdatei herunterladen. 4. Installation ausführen. 5. VS Code starten. --- ## 2. Docker installieren **Download:** [https://www.docker.com/products/docker-desktop](https://www.docker.com/products/docker-desktop) **Schritte:** 1. Webseite öffnen. 2. Betriebssystem auswählen. 3. Docker Desktop herunterladen. 4. Installation ausführen. 5. Docker starten. 6. Überprüfen in Terminal oder Kommandozeile mit: ```bash docker --version ``` --- ## 3. Dev-Container-Erweiterung installieren **Schritte:** 1. VS Code öffnen. 2. Erweiterungsansicht (_Extensions_) öffnen (`Strg+Shift+X`). 3. Nach **"Dev Containers"** suchen. 4. Erweiterung von Microsoft installieren. --- ## 4. Dev-Container starten **Entwicklungsumgebung in Dev-Container öffnen:** 0. *Nur falls Git noch nicht vorhanden*: Git herunterladen und installieren über https://git-scm.com/ 1. Repository aus Gitty lokal klonen, z. B. über Terminal, Git-Client oder Gitty-Weboberfläche ("In VS Code clonen") ```bash git clone https://gitty.informatik.hs-mannheim.de/WEB-IB-WS2526/lab-development-ib.git ``` *Beachte*: Clonen Sie das Repository in ein Verzeichnis Ihrer Wahl und merken Sie sich dieses für die folgenden Schritte. Späteres Verschieben ist nicht ratsam. 2. VS Code starten. 3. Den geklonten Projektordner über „Datei → Ordner öffnen…“ auswählen. 4. Befehlspalette öffnen (`Strg+Shift+P`). 5. Folgenden Befehl eingeben: ``` Dev Containers: Open Folder in Container... ``` 6. Die Container-Umgebung wird automatisch erkannt und gestartet. 7. Das Projekt öffnet sich im Container und ist einsatzbereit. --- ## 5. Funktionstest 1. Wechseln Sie in den Ordner `web/01/demos/`` 2. Öffnen Sie `HalloWelt.html` im Editor 3. Testen Sie die Browser-Preview: 1. Klicken Sie auf das Icon rechts oben: ``` Open Preview ``` → es sollte eine Vorschau der geöffneten HTML-Datei erscheinen. 4. Testen Sie die Go-Installation: 1. Öffnen Sie einen Terminal 2. Geben Sie folgenden Befehl ein: ```go go version ``` → es sollte `go version go1.24.5 linux/arm64` erscheinen ## Hinweise - Docker muss aktiv sein, bevor VS Code mit Containern arbeitet. - Bei Problemen: VS Code und Docker neu starten. - Weitere Informationen: - [VS Code Dokumentation](https://code.visualstudio.com/docs) - [Docker Dokumentation](https://docs.docker.com/) - [Dev Containers](https://containers.dev/)