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 LinuxEin Betriebssystem wie Windows oder macOS. Die CS50-Umgebung und die Prüfungslaptops laufen mit Linux. Glossar →; 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 DebuggerWerkzeug, mit dem Sie ein Programm Zeile für Zeile ablaufen lassen und dabei die Werte der Variablen ansehen. In CS50 startet debug50 ./programm den Debugger von VS Code. Glossar → von VS CodeVisual Studio Code, der kostenlose Code-Editor von Microsoft, in dem Sie im Kurs programmieren. Glossar → im Dev-ContainerEin Container, mit dem sich VS Code verbindet. Sie bedienen VS Code wie gewohnt, aber die Befehle im Terminal laufen im Container. Glossar → 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” (WSLDas „Windows-Subsystem für Linux“, eine Funktion von Windows, mit der ein Linux im Hintergrund läuft. Docker Desktop braucht sie unter Windows. Glossar →) aktiviert sind und aktivieren Sie diese, falls nötig.

2. WSL installieren.

   1. Öffnen Sie die EingabeaufforderungDas Zeichen am Anfang der Zeile im Terminal, etwa $ oder me/ $. Es zeigt, dass das Terminal auf Ihren nächsten Befehl wartet. Steht davor ein Ordnername wie me/, befinden Sie sich gerade in diesem Ordner. Glossar → (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-ErweiterungZusatzmodul, das VS Code um Funktionen ergänzt, etwa „Dev Containers“ oder „GitHub Codespaces“. Sie installieren es im Extensions-Panel (Strg+Shift+X). Glossar → 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-ContainerAbgeschottete Umgebung mit einem eigenen kleinen Linux und fertig installierten Programmen, die auf Ihrem Rechner läuft, ohne Ihr System zu verändern. Glossar → 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!