Offline: Dev Container

Diese Anleitung basiert auf der Anleitung zum Setup von Visual Code bei CS50. Dort finden Sie ausführlichere Erläuterungen.

Betriebssystem

Diese Anleitung geht davon aus, dass Sie Windows verwenden.

Der hier beschriebene Ansatz funktioniert auch unter Linux; hierfür können wir Ihnen jedoch keine vorbereitete Anleitung zur Verfügung stellen.

Auch auf Apple-Geräten können Sie CS50 offline mit Dev-Container verwenden. Die Installation verläuft so ähnlich wie unten dargestellt.

Allerdings ist zu beachten, dass es aus technischen Gründen aktuell (Stand: Oktober 2024) nicht möglich ist, unter macOS den Debugger von VS Code im Dev-Container zu nutzen, wenn ein Gerät mit ARM-Prozessor (Apple M1, M2, …) verwendet wird, da der Dev-Container eine andere Prozessorarchitektur simuliert. Um Programme zu debuggen müssen Sie dann auf GitHub Codespaces ausweichen.

1. Container-Vorlage herunterladen

1. Öffnen Sie cs50.dev/.devcontainer.json und drücken Sie STRG + S, um die Datei zu speichern.
2. Im Speichern-Dialog: Erstellen Sie einen neuen Ordner für den sog. Dev-Container-Workspace. Nennen Sie ihn z.B. “inf”. Der Name kann frei gewählt werden. Wechseln Sie in diesen Ordner und fügen Sie einen Punkt (.) vor den vorgeschlagenen Dateinamen hinzu, sodass die Datei als .devcontainer.json gespeichert wird. Speichern Sie die Datei.
3. Rechtsklicken Sie auf die freie Fläche im Ordner “inf”, wählen Sie “Eigenschaften”, und stellen Sie sicher, dass das Attribut “Versteckt” gesetzt ist. Wählen Sie die Option “Änderungen für diesen Ordner, untergeordnete Ordner und Dateien übernehmen”.

2. Docker installieren

1. Suchen Sie im Windows-Startmenü nach “Windows-Features aktivieren und deaktivieren” und öffnen Sie diesen Einstellungsdialog. Vergewissern Sie sich, dass die Features “VM-Plattform”, “Windows Hypervisor-Plattform” und “Windows-Subsystem für Linux” aktiviert sind und aktivieren Sie diese, falls nötig.

2. WSL installieren.

   1. Öffnen Sie die Eingabeaufforderung (cmd in der Suche eingeben und ENTER drücken). Überprüfen Sie, ob WSL bereits installiert ist. Hierfür kann der Befehl wsl --version genutzt werden.
   2. Wenn WSL noch nicht installiert ist, installieren Sie es mit folgendem Befehl: wsl --install
   3. Überprüfen Sie, ob WSL2 aktiviert ist, indem Sie wsl --version ausführen oder die Ausgabe von Schritt 1 kontrollieren. Die Versionsnummer muss mit einer 2 beginnen (2.x.x.x):
   4. Wenn Version 1 aktiviert ist, stellen Sie WSL auf Version 2 um: wsl --set-default-version 2

3. Laden Sie Docker Desktop für Windows herunter.

   4. Installieren Sie Docker Desktop Installer.exe und folgen Sie den Anweisungen. Belassen Sie alle vorgeschlagenen Einstellungen unverändert. Die Installation wird ein paar Minuten dauern.

   5. Öffnen Sie nach der Installation die App Docker Desktop. Sie müssen sich nicht mit einem Account anmelden und können diesen Schritt überspringen. Warten Sie danach, bis die Docker-Engine gestartet ist. Das erstmalige Starten der Docker-Engine werden ein paar Minuten dauern.

3. Installation und Einrichtung von Visual Studio Code

1. Download: Gehen Sie zur Visual Studio Code-Website und klicken Sie auf “Download for Windows”. Die Website bietet die passende Installationsdatei an.

2. Installation: Führen Sie die geladene .exe-Datei aus und folgen Sie dem Installationsassistenten.

4. Dev Containers-Erweiterung in VS Code installieren

1. Dev Containers-Erweiterung installieren

   • Öffnen Sie Visual Studio Code.
   • Gehen Sie zum Extensions-Panel (Erweiterungen) im linken Seitenmenü oder drücken Sie Ctrl + Shift + X.
   • Suchen Sie nach “Dev Containers” in der Suchleiste.
   • Klicken Sie auf “Install”, um die Erweiterung hinzuzufügen.

2. Befehlspalette öffnen und Container-Vorlage wählen:

   • Drücken Sie Ctrl + Shift + P, um die Befehlspalette zu öffnen.
   • Geben Sie die ersten Buchstaben von “>Dev Containers - Open Folder in Container…” in die Befehlspalette ein und wählen Sie den Befehl aus, wenn er in der Liste vorgeschlagen wird.
   • Navigieren Sie zum Ordner “inf”, den Sie zuvor angelegt hatten. Wenn Sie in diesem Ordner sind bestätigen Sie im Dialogfeld die Auswahl, um es zu schließen.

   VS Code öffnet den Ordner nun im Dev-Container, sodass Sie in der CS50-Umgebung arbeiten können.

3. Hilfreiche Voreinstellungen in VS Code

   • Aktivieren Sie Auto-Save im Menü unter “File” > “Auto Save”, falls nicht bereits aktiviert.
   • Suchen Sie im Extension-Panel nach den Erweiterungen C/C++ Extension Pack und installieren Sie diese. Sie ist für die C-Programmierung nicht notwendig, bietet aber grundlegende Unterstützung für die Entwicklung in C, insbesondere bei der Fehlerbehebung und Formatierung.

5. Erste Schritte in VS Code

Diese Schritte sind im GitHub-Codespaces-Eintrag beschrieben.

6. Verbindung zum Docker-Container schließen und neu aufbauen

In den meisten Fällen wird VS Code den Docker-Container automatisch starten und die Verbindung aufbauen, wenn Sie VS Code starten.

Wenn VS Code beendet wird, wird die Verbindung abgebaut, der Container läuft aber im Hintergrund weiter. Sie können Docker beenden oder den Container in Docker anhalten, um Ressourcen zu sparen.

Falls Sie einmal die Verbindung zum Container manuell schließen oder aufbauen müssen, befolgen Sie dazu diese Schritte:

1. Verbindung schließen: Die Verbindung zum Docker-Container kann im Menü unter “File” > “Close Remote Connection” geschlossen werden.

2. Verbindung aufbauen: Wenn Sie sich erneut verbinden möchten, können Sie dies im linken Seitenmenü unter “Remote Explorer” tun. Hierzu wählen Sie im Unterpunkt “Dev Container” den gewünschten Container aus und klicken auf “Open in Container …”. Der Docker-Container sollte sich erneut öffnen. Für den Fall, dass keine Container angezeigt werden, kann es helfen, “Docker Desktop” zu öffnen, um den aktuellen Startvorgang nachvollziehen zu können.

---

Mit dieser Anleitung sollten Sie VS Code erfolgreich auf einem Windows-Computer installieren und mit der CS50-Umgebung einrichten können. Bei Fragen oder Problemen mit der Einrichtung von VS Code stehen Ihnen die Tutoren gerne zur Verfügung. Viel Erfolg beim Programmieren!