forked from WEB-IB-WS2526/lab-development-ib
95 lines
2.7 KiB
Markdown
95 lines
2.7 KiB
Markdown
# 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/) |