GitHub Codespaces
GitHub Codespaces bietet Cloud-basierte Entwicklungsumgebungen für jede Aktivität – sei es ein Langzeitprojekt oder eine kurzfristige Aufgabe wie die Überprüfung einer Pull-Anfrage. Sie können mit diesen Umgebungen von Visual Studio Code oder in einem browserbasierten Editor arbeiten.
Umgebungen
Eine Umgebung ist die "Backend"-Hälfte von GitHub Codespaces. Hier findet die gesamte Rechenleistung statt, die mit der Softwareentwicklung verbunden ist: Kompilieren, Debuggen, Wiederherstellen usw. Wenn Sie an einem neuen Projekt arbeiten, eine neue Aufgabe übernehmen oder eine PR überprüfen müssen, können Sie einfach eine Cloud-gehostete Umgebung hochfahren, und GitHub Codespaces kümmert sich um die korrekte Konfiguration. Es konfiguriert automatisch alles, was Sie für die Arbeit an Ihrem Projekt benötigen: den Quellcode, die Laufzeitumgebung, den Compiler, den Debugger, den Editor, benutzerdefinierte Dotfile-Konfigurationen, relevante Editorerweiterungen und mehr.
Anpassung
GitHub Codespaces sind pro Projekt vollständig anpassbar. Dies wird durch die Aufnahme einer devcontainer.json-Datei im Repository des Projekts erreicht, ähnlich wie bei der Dev Containers-Entwicklung in VS Code.
Beispiele für Anpassungen umfassen:
- Festlegen des zu verwendenden Linux-basierten Betriebssystems.
- Automatisches Installieren verschiedener Tools, Laufzeitumgebungen und Frameworks.
- Weiterleiten häufig verwendeter Ports.
- Festlegen von Umgebungsvariablen.
- Konfigurieren von Editor-Einstellungen und Installieren bevorzugter Erweiterungen.
Siehe die Dokumentation Codespaces konfigurieren für codespace-spezifische devcontainer.json-Einstellungen.
Dotfile pro Benutzerkonfiguration
Dotfiles sind Dateien, deren Dateiname mit einem Punkt (.) beginnt. Sie enthalten typischerweise Konfigurationsinformationen für Anwendungen und können das Verhalten von Terminals, Editoren, Quellcodeverwaltung und verschiedenen anderen Tools steuern. .bashrc, .gitignore und .editorconfig sind Beispiele für Dotfiles, die von Entwicklern häufig verwendet werden.
Sie können ein GitHub-Repository mit Ihren Dotfiles, einen Zielort für die Dateien sowie Installationsbefehle bei der Erstellung eines Codespace angeben.
Siehe die Dokumentation Codespaces personalisieren, um zu erfahren, wie Sie Ihre Dotfile-Konfigurationen zu einem Codespace hinzufügen.
Erste Schritte
Es gibt Einführungsressourcen für beide GitHub Codespaces-Clients. Diese führen Sie schnell durch die Anmeldung bei GitHub Codespaces, die Erstellung Ihres ersten Codespace und die Verbindung damit mit Ihrem bevorzugten Client.
- Codespaces in VS Code - Verwenden Sie die GitHub Codespaces-Erweiterung, um sich mit Ihrer Umgebung zu verbinden und darin zu arbeiten.
- Codespaces im Browser - Verbinden Sie sich mit Ihrem Codespace über einen browserbasierten Editor.
Erweiterungsautoren
Die VS Code-Erweiterungs-API verbirgt die meisten Implementierungsdetails der Fernausführung, sodass viele Erweiterungen in GitHub Codespaces-Umgebungen ohne Änderungen funktionieren. Wir empfehlen jedoch, Ihre Erweiterung in einem Codespace zu testen, um sicherzustellen, dass alle Funktionen wie erwartet funktionieren. Im Artikel Remote-Entwicklung und GitHub Codespaces unterstützen finden Sie weitere Details.
Browserbasierter Editor
Sie haben auch eine kostenlose, leichtgewichtige Visual Studio Code-Erfahrung vollständig im Browser. Der webbasierte Editor ermöglicht es Ihnen, Quellcode-Repositories von GitHub sicher und schnell zu durchsuchen und kleinere Codeänderungen vorzunehmen. Sie können jedes Repository, jeden Fork oder jede Pull-Anfrage im Editor öffnen, der viele der Funktionen von VS Code enthält, einschließlich Suche und Syntaxhervorhebung. Wenn Sie Ihren Code ausführen oder debuggen möchten, können Sie zur Cloud-gehosteten Umgebung oder zum VS Code-Desktop wechseln.
Um auf diesen browserbasierten Editor zuzugreifen, können Sie zu Ihrem Repo auf github.com navigieren und die Taste . (Punkt-Taste) drücken oder die URL Ihres Repositories in github.dev/org/repo ändern, wobei Sie github.com durch github.dev ersetzen.
Einschränkung: Möglicherweise können Sie den webbasierten Editor nicht verwenden, wenn Sie Ihren Browser im Inkognito-Modus ausführen oder Ad-Blocker aktiviert haben.
Hinweis: Dieser Editor befindet sich derzeit in der technischen Vorschau. Sie können ihn noch heute ausprobieren und Feedback unter https://github.co/browser-editor-feedback geben.
Bekannte Einschränkungen und Anpassungen
Bei der Arbeit mit Codespaces und insbesondere VS Code im Web sind bestimmte Einschränkungen zu beachten. Einige dieser Einschränkungen haben Workarounds oder Anpassungen, um ein konsistentes Entwicklungserlebnis zu bieten.
Bei mehreren Problemen (insbesondere Tastenkombinationen oder solchen, die mit einem Workaround für den Desktop aufgeführt sind) können Sie einen Codespace als progressive Webanwendung (PWA) installieren und verwenden.
| Problem | Grund | Workaround |
|---|---|---|
| Ctrl+Shift+P startet die Befehlspalette in Firefox nicht. | Ctrl+Shift+P ist in Firefox reserviert. | Verwenden Sie F1, um die Befehlspalette zu starten. |
| Bestimmte Standard-Tastenkombinationen (für das Debuggen) sind im Web anders. | Da der Browser möglicherweise bereits eine Aktion für diese Tastenkombinationen registriert hat, passen wir die Standardwerte für VS Code im Web an. | Verwenden Sie die angepassten Standardwerte. Sie werden als Tooltip-Hinweise bei den Debug-Aktionen angezeigt.
|
| F11 zum Debuggen funktioniert unter macOS im Web oder Desktop nicht. | Dies ist eine bekannte, nicht browserabhängige Einschränkung. Weitere Informationen finden Sie in Issue #5102. | Deaktivieren Sie F11, um den Desktop unter macOS anzuzeigen.
|
| Ctrl+N für neue Datei funktioniert im Web nicht. | Ctrl+N öffnet stattdessen ein neues Fenster. | Ctrl+N für neue Datei funktioniert im Desktop. |
| Ctrl+W zum Schließen eines Editors funktioniert im Web nicht. | Ctrl+W schließt den aktuellen Tab in Browsern. | Ctrl+W funktioniert im Desktop. |
| Ctrl+Shift+B schaltet die Favoritenleiste im Browser nicht um. | Codespaces überschreibt dies und leitet zum Menü "Build" in der Befehlspalette weiter. | Keine aktuellen Workarounds. |
| Das Ziehen und Ablegen von Dateien von VS Code in einen Codespace (und umgekehrt) funktioniert nicht. | Weitere Kontexte finden Sie in Issue #115535. | Es gibt ein paar Optionen
|
| Das Debugging von Angular-Apps wird im Web nicht unterstützt. | Aus Sicherheitsgründen kann Code, der in einem Browser ausgeführt wird, keine weitere Browserinstanz im Debug-Modus starten. | Sie haben ein paar Optionen
|
| Das Herunterladen einer Datei ohne Erweiterung aus dem Browser fügt automatisch ".txt" hinzu. | So verhalten sich Chrome und Edge. | Kontext und potenzielle zukünftige Lösungen in Issue #118436. |
| Wenn Sie eine Datei von einem Remote-System (einschließlich Codespaces) herunterladen, werden Attribute wie das ausführbare Bit entfernt. | Kontext und potenzielle zukünftige Lösungen finden Sie in Issue #112099. | Keine aktuellen Workarounds. |
Sie sehen möglicherweise die Aufforderung "Ihr_Codespace_Name kann diesen Ordner nicht öffnen, da er Systemdateien enthält", wenn Sie versuchen, bestimmte Ordner aus einem Codespace herunterzuladen. |
Ein User-Agent kann die Einschränkungen für sensible Verzeichnisse frei festlegen. Weitere Informationen finden Sie in dieser Spezifikation und in der Blockierliste von Chromium. | Keine zusätzlichen Workarounds über die Spezifikation und Blockierliste hinaus. |
Das manuelle Aufrufen von https://:weitergeleiteter_Port funktioniert nicht, um einen weitergeleiteten Port von einem Codespace im Web zu erreichen. |
Dies basiert darauf, wie Codespaces die Portweiterleitung handhabt und die richtige URL für das Web generiert. | Klicken Sie auf den Link in der Benachrichtigung zur Portweiterleitung, um Ihre App zu öffnen, oder auf das Globus-Symbol in der Portansicht. Beide liefern den korrekt generierten Link. Weitere Informationen finden Sie in der Codespaces-Dokumentation. |
Einige Erweiterungen verhalten sich im Web anders.
| Erweiterung | Problem / Grund | Workaround |
|---|---|---|
| Erweiterungen mit Tastenkombinationen, die mit Browser-Tastenkombinationen kollidieren, z. B. Git Graph, das Ctrl+R zum Aktualisieren verwendet. | Die Tastenkombination kann mit einer vorhandenen Browser-Tastenkombination kollidieren, z. B. Ctrl+R aktualisiert das Fenster in Safari. | Sie können einen desktop-basierten anstelle eines webbasierten Codespace verwenden, um Ihre Tastenkombinationen vollständig zu nutzen. Verschiedene Browser können sich auch unterschiedlich verhalten (Sie können Git Graph in Chrome aktualisieren). |
| Sprachpakete, z. B. das japanische Sprachpaket für Visual Studio Code | Sprachpaket-Erweiterungen werden derzeit in webbasierten Codespaces nicht unterstützt. | Sie können einen desktop-basierten Codespace verwenden, um Sprachpakete zu nutzen und die Anzeigesprache zu konfigurieren. |
| Bracket Pair Colorizer 2 | Es funktioniert nicht im Browser, da es eine Abhängigkeit vom Installationsort einführt, die nicht leicht zu beheben ist. | Verwenden Sie Bracket Pair Colorizer. |
| Browser-Debugger, wie z. B. Debugger for Firefox. | Erweiterungen, die einen UI/Desktop-Erweiterungshost erfordern, werden im Browser nicht geladen. | Sie können diese Erweiterungen in lokalem VS Code (nicht mit Codespaces verbunden) verwenden. Oder, während Ihre App von einem Codespace aus ausgeführt wird, können Sie eine Alternative wie Chrome DevTools verwenden, um Elemente zu inspizieren und Haltepunkte zu setzen. |
| Erweiterungen zum Öffnen eines Browsers, z. B. Open in Browser. | Erweiterungen, die einen UI/Desktop-Erweiterungshost erfordern, werden im Browser nicht geladen. | Verwenden Sie, wenn möglich, eine alternative Erweiterung wie Live Server. |
| Projektmanager | Projektmanager stützt sich auf die Synchronisierung einer benutzerdefinierten projects.json-Datei, die derzeit nicht unterstützt wird. |
Sie können die Erweiterung in Desktop-Codespaces oder lokalem VS Code verwenden, um Ihre Projekte zu speichern und zu verwalten, da diese Optionen keine Synchronisierung einer benutzerdefinierten Datei erfordern. |
| Erweiterungen, die von Chrome abhängen, wie z. B. Protractor Test Runner und Browser Preview. | Chrome ist nicht in einem Codespace enthalten. | Versuchen Sie, alternative Erlebnisse zu finden, oder Sie können diese Erweiterungen für Ihr Projekt in lokalem VS Code (nicht mit Codespaces verbunden) verwenden. |
| Flutter (und Flutter-Entwicklung im Allgemeinen) | Mehrere Aspekte des Flutter-Workflows sind aufgrund der Natur von Docker-Containern und Codespaces eingeschränkt.
|
Sie können lokales VS Code für die Flutter-Entwicklung verwenden. |
| LaTeX Workshop | Die Erweiterung bietet drei Arten von Funktionen zur Unterstützung der LaTeX-Erstellung: 1) eine Reihe von Ansichten, die gängige Befehle anzeigen, 2) eine PDF-Vorschau und 3) Sprachfunktionen wie Snippets und IntelliSense. Die Erweiterung kann weitgehend funktionsfähig genutzt werden, es gibt jedoch einige Einschränkungen im Web und bei der Sicherheit. | Die folgenden Workarounds adressieren Einschränkungen in den Bereichen Ansicht und Vorschau.
|
| Git Graph | Einige Webview-Funktionen von Git Graph können in Codespaces eingeschränkt sein. Zum Beispiel kann das Umschalten zwischen einer Datei aus einem Commit und dem Git Graph-Webview das Webview leeren. | Sie können Git Graph vollständig in VS Code Desktop verwenden. |
| Andere Remote Development-Erweiterungen (WSL, Dev Containers, Remote - SSH) können nicht in einem Codespace installiert werden. | Der Codespace ist bereits ein Remote-Kontext. | Wenn Sie in einem anderen Remote-Kontext (z. B. WSL oder einem entfernten SSH-Computer) ausführen möchten, öffnen Sie VS Code Desktop (nicht mit einem Codespace verbunden) und starten Sie eine der anderen Remote-Erweiterungen. Wenn Sie einen benutzerdefinierten Dev-Container verwenden möchten, können Sie denselben .devcontainer sowohl in Codespaces als auch in Dev Containers verwenden. |
| Meine_Lieblingserweiterung funktioniert nicht und ist oben nicht aufgeführt. | Es gibt ein paar andere Probleme, die verhindern können, dass Funktionen in Remote-Kontexten wie erwartet funktionieren. | In einigen Fällen können Sie einen anderen Befehl als Workaround verwenden, in anderen Fällen muss die Erweiterung möglicherweise geändert werden. Schauen Sie sich die Remote-Erweiterungstipps für häufige Remote-Probleme und Tipps zur Behebung an. |
Häufig gestellte Fragen
Warum ist eine Erweiterung im Browser nicht installierbar?
Es gibt eine kleine Anzahl von Erweiterungen, die interne Annahmen haben oder auf dem Desktop ausgeführt werden müssen. Beispiele hierfür sind, wenn eine Erweiterung auf Dateien aus der VS Code-Installation auf dem Desktop zugreift oder wenn eine Erweiterung von einer ausführbaren Datei abhängt, die in einer Desktop-Umgebung ausgeführt werden muss. Wenn Sie versuchen, eine solche Erweiterung im Browser zu installieren, werden Sie darüber informiert, dass die Erweiterung nicht verfügbar ist.
Hinweis: Eine solche Erweiterung kann immer noch verwendet werden, wenn Sie sich von VS Code, das auf dem Desktop ausgeführt wird, mit einem Codespace verbinden.
Wie erlaube ich VS Code den Zugriff auf meine Zwischenablage zum Lesen?
In bestimmten Fällen fordert VS Code Sie möglicherweise zur Berechtigung auf, auf die Zwischenablage zuzugreifen, wenn Sie daraus lesen. Sie sollten in der Lage sein, den Zugriff auf die Zwischenablage von Ihrem Browser entweder über die Einstellungen (suchen Sie nach "Website-Berechtigungen") oder indem Sie nach dieser Option in der Adressleiste auf der rechten Seite suchen.
Sobald Sie VS Code Zugriff auf die Zwischenablage gewährt haben, können Sie den Vorgang wiederholen.
Wie erlaube ich VS Code, immer neue Tabs und Fenster zu öffnen?
Manchmal blockieren Browser aus Sicherheitsgründen VS Code daran, neue Tabs oder Fenster zu öffnen. Wenn dies geschieht, erkennt VS Code die blockierende Aktion und fordert den Benutzer explizit auf. Sie können VS Code jedoch erlauben, immer neue Fenster und Tabs zu öffnen, indem Sie die Website-Einstellungen über das Kontextmenü in der Navigationsleiste des Browsers öffnen und das Öffnen von Pop-up-Fenstern zulassen.
Wie erlaube ich VS Code im Browser den Zugriff auf lokale Dateien und Ordner?
Das Öffnen lokaler Dateien und Ordner in VS Code von einem Browser aus erfordert, dass der Browser die File System Access API unterstützt. Aktuell bieten sowohl Microsoft Edge als auch Google Chrome dieses Maß an Unterstützung. Wenn Sie auf lokale Dateien und Ordner zugreifen möchten, wenn Sie VS Code in einem Browser verwenden, erwägen Sie bitte den Wechsel zu einem dieser beiden Browser.
Fragen oder Feedback
Wenn Sie Fragen haben, können Sie die Fehlerbehebungsanleitung von GitHub Codespaces konsultieren. Wenn Sie Feedback geben möchten, können Sie Probleme in den GitHub Codespaces Diskussionen melden.