GitHub Codespaces
GitHub Codespaces bietet cloudbasierte Entwicklungsumgebungen für jede Aktivität – egal ob es sich um ein langfristiges Projekt oder eine kurzfristige Aufgabe wie das Überprüfen eines Pull Requests handelt. Sie können diese Umgebungen von Visual Studio Code aus oder in einem browserbasierten Editor nutzen.
Umgebungen
Eine Umgebung ist das „Backend“-Gegenstück zu 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 einen PR überprüfen müssen, können Sie einfach eine cloudgehostete Umgebung starten, 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 Editor-Erweiterungen und mehr.
Anpassung
GitHub Codespaces sind pro Projekt vollständig anpassbar. Dies wird durch das Hinzufügen einer devcontainer.json-Datei zum Repository des Projekts erreicht, ähnlich der Dev Containers-Entwicklung in VS Code.
Beispiele für Anpassungen:
- 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.
Weitere Informationen zu codespace-spezifischen devcontainer.json-Einstellungen finden Sie in der Dokumentation unter Configuring Codespaces.
Dotfile-Konfiguration pro Benutzer
Dotfiles sind Dateien, deren Dateiname mit einem Punkt (.) beginnt. Sie enthalten typischerweise Konfigurationsinformationen für Anwendungen und können das Verhalten von Terminals, Editoren, Versionskontrollsystemen und verschiedenen anderen Tools steuern. .bashrc, .gitignore und .editorconfig sind Beispiele für Dotfiles, die häufig von Entwicklern verwendet werden.
Sie können beim Erstellen eines Codespaces ein GitHub-Repository angeben, das Ihre Dotfiles enthält, sowie einen Zielspeicherort für die Dateien und Installationsbefehle festlegen.
Siehe die Dokumentation zu Personalizing Codespaces, um zu erfahren, wie Sie Ihre Dotfile-Konfigurationen zu einem Codespace hinzufügen.
Erste Schritte
Es gibt Themen für den Einstieg in beide GitHub Codespaces-Clients. Diese führen Sie schnell durch die Anmeldung bei GitHub Codespaces, das Erstellen Ihres ersten Codespaces und das Verbinden mit Ihrem bevorzugten Client.
- Codespaces in VS Code – Verwenden Sie die GitHub Codespaces-Erweiterung, um eine Verbindung herzustellen und in Ihrer Umgebung zu arbeiten.
- Codespaces im Browser – Stellen Sie über einen browserbasierten Editor eine Verbindung zu Ihrem Codespace her.
Erweiterungsautoren
Die VS Code-Erweiterungs-API verbirgt die meisten Implementierungsdetails der Remote-Ausführung, sodass viele Erweiterungen ohne Änderungen direkt in GitHub Codespaces-Umgebungen funktionieren. Wir empfehlen jedoch, Ihre Erweiterung in einem Codespace zu testen, um sicherzustellen, dass die gesamte Funktionalität wie erwartet funktioniert. Details dazu finden Sie im Artikel Supporting Remote Development and GitHub Codespaces.
Browserbasierter Editor
Sie erhalten außerdem eine kostenlose, schlanke Visual Studio Code-Erfahrung direkt im Browser. Der webbasierte Editor ermöglicht es Ihnen, Quellcode-Repositorys von GitHub sicher und schnell zu durchsuchen und leichte Codeänderungen vorzunehmen. Sie können jedes Repository, jeden Fork oder Pull Request im Editor öffnen, der viele Funktionen von VS Code bietet, einschließlich Suche und Syntax-Hervorhebung. Wenn Sie Ihren Code ausführen oder debuggen möchten, können Sie zur cloudgehosteten Umgebung oder zur VS Code-Desktopanwendung wechseln.
Um auf diesen browserbasierten Editor zuzugreifen, können Sie zu Ihrem Repository auf github.com gehen und . (Punkt-Taste) drücken oder die URL Ihres Repositorys 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 Werbeblocker aktiviert haben.
Hinweis: Dieser Editor befindet sich derzeit in der technischen Vorschau (Technical Preview). 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 mit VS Code im Web gibt es bestimmte Einschränkungen zu beachten. Einige dieser Einschränkungen haben Workarounds oder Anpassungen, um ein konsistentes Entwicklungserlebnis zu gewährleisten.
Für verschiedene Probleme (insbesondere Tastenkombinationen oder solche, die einen Workaround für den Desktop erfordern) können Sie einen Codespace als Progressive Web App (PWA) installieren und nutzen.
| Problem | Ursache | Workaround |
|---|---|---|
| Strg+Umschalt+P startet die Befehlspalette in Firefox nicht. | Strg+Umschalt+P ist in Firefox reserviert. | Verwenden Sie F1, um die Befehlspalette zu starten. |
| Bestimmte Standard-Tastenkombinationen (für das Debugging) sind im Web anders. | Da der Browser möglicherweise bereits Aktionen für diese Tastenkombinationen registriert hat, passen wir den Standard für VS Code im Web an. | Verwenden Sie die angepassten Standards. Sie werden in Tooltips angezeigt, wenn Sie mit der Maus über die Debug-Aktionen fahren.
|
| F11 zum Debuggen funktioniert unter macOS weder im Web noch auf dem Desktop. | Dies ist eine bekannte, nicht browserspezifische Einschränkung. Weitere Informationen finden Sie in Issue #5102. | Deaktivieren Sie F11 für „Schreibtisch anzeigen“ unter macOS.
|
| Strg+N für eine neue Datei funktioniert im Web nicht. | Strg+N öffnet stattdessen ein neues Fenster. | Strg+N für eine neue Datei funktioniert auf dem Desktop. |
| Strg+W zum Schließen eines Editors funktioniert im Web nicht. | Strg+W schließt den aktuellen Tab in Browsern. | Strg+W funktioniert auf dem Desktop. |
| Strg+Umschalt+B schaltet die Lesezeichenleiste im Browser nicht um. | Codespaces überschreibt dies und leitet zum Menü „Build“ in der Befehlspalette um. | Derzeit keine Workarounds. |
| Das Ziehen und Ablegen von Dateien von VS Code in einen Codespace (und umgekehrt) funktioniert nicht. | Mehr Kontext finden Sie in Issue #115535. | Es gibt ein paar Optionen:
|
| Das Debuggen von Angular-Apps wird im Web nicht unterstützt. | Code, der in einem Browser ausgeführt wird, kann aus Sicherheitsgründen keine weitere Browserinstanz im Debug-Modus starten. | Sie haben einige Optionen:
|
| Das Herunterladen einer Datei ohne Erweiterung aus dem Browser fügt automatisch ".txt" hinzu. | So verhalten sich Chrome und Edge. | Kontext und mögliche zukünftige Lösungen finden Sie in Issue #118436. |
| Wenn Sie eine Datei von einem Remote-System (einschließlich Codespaces) herunterladen, werden Attribute wie das Ausführungs-Bit entfernt. | Kontext und mögliche zukünftige Lösungen finden Sie in Issue #112099. | Derzeit keine Workarounds. |
Möglicherweise sehen Sie die Meldung „Your_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 Einschränkungen für sensible Verzeichnisse festlegen. Weitere Informationen finden Sie in dieser Spezifikation und der Chromium-Blockliste. | Keine zusätzlichen Workarounds über die Spezifikation und Blockliste hinaus. |
Das manuelle Aufrufen von https://:forwarded_port funktioniert nicht, um im Web auf einen weitergeleiteten Port eines Codespaces zuzugreifen. |
Dies basiert darauf, wie Codespaces die Portweiterleitung handhaben und die korrekte URL für das Web generieren. | Klicken Sie auf den Link in der Portweiterleitungs-Benachrichtigung, um Ihre App zu öffnen, oder auf das Weltkugel-Symbol in der Ports-Ansicht. Beides liefert 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 sich mit Browser-Kürzeln überschneiden, zum Beispiel Git Graph, das Strg+R zum Aktualisieren verwendet. | Die Tastenkombination kann sich mit einem bestehenden Browser-Kürzel überschneiden, zum Beispiel aktualisiert Strg+R das Fenster in Safari. | Sie können einen desktopbasierten statt eines webbasierten Codespaces verwenden, um Ihre Tastenkombinationen vollständig zu nutzen. Verschiedene Browser können sich ebenfalls unterschiedlich verhalten (Git Graph lässt sich in Chrome aktualisieren). |
| Sprachpakete, zum Beispiel das Japanische Sprachpaket für Visual Studio Code | Sprachpaket-Erweiterungen werden in webbasierten Codespaces derzeit nicht unterstützt. | Sie können einen desktopbasierten Codespace verwenden, um Sprachpakete zu nutzen und die Anzeigesprache zu konfigurieren. |
| Bracket Pair Colorizer 2 | Es funktioniert im Browser nicht, da es eine Abhängigkeit zum Installationsort einführt, die nicht leicht zu beheben ist. | Verwenden Sie Bracket Pair Colorizer. |
| Browser-Debugger, wie der Debugger for Firefox. | Erweiterungen, die einen UI/Desktop-Erweiterungshost benötigen, werden im Browser nicht geladen. | Sie können diese Erweiterungen in einer lokalen VS Code-Instanz (nicht mit Codespaces verbunden) verwenden. Alternativ können Sie, während Ihre App in einem Codespace läuft, Alternativen wie Chrome DevTools nutzen, um Elemente zu untersuchen und Breakpoints zu setzen. |
| Erweiterungen zum Öffnen eines Browsers, zum Beispiel open in browser. | Erweiterungen, die einen UI/Desktop-Erweiterungshost benötigen, werden im Browser nicht geladen. | Verwenden Sie nach Möglichkeit eine alternative Erweiterung wie Live Server. |
| Project Manager | Project Manager stützt sich auf die Synchronisierung einer benutzerdefinierten projects.json-Datei, was derzeit nicht unterstützt wird. |
Sie können die Erweiterung in Desktop-Codespaces oder einer lokalen VS Code-Instanz verwenden, um Ihre Projekte zu speichern und zu verwalten, da diese Optionen keine Synchronisierung einer benutzerdefinierten Datei erfordern. |
| Erweiterungen, die sich auf Chrome stützen, wie Protractor Test Runner und Browser Preview. | Chrome ist nicht in einem Codespace enthalten. | Versuchen Sie, alternative Lösungen zu finden, oder verwenden Sie diese Erweiterungen für Ihr Projekt in der lokalen VS Code-Instanz (nicht mit Codespaces verbunden). |
| Flutter (und die Flutter-Entwicklung insgesamt) | Mehrere Aspekte des Flutter-Workflows sind aufgrund der Natur von Docker-Containern und Codespaces eingeschränkt.
|
Sie können für die Flutter-Entwicklung die lokale VS Code-Instanz verwenden. |
| LaTeX Workshop | Die Erweiterung bietet drei Arten von Funktionen zur Unterstützung beim LaTeX-Authoring: 1) eine Reihe von Ansichten für häufige Befehle, 2) einen PDF-Vorschau-Betrachter und 3) Sprachfunktionen wie Snippets und IntelliSense. Die Erweiterung kann weitgehend genutzt werden, aber es gibt einige Web- oder Sicherheitseinschränkungen. | Die folgenden Workarounds adressieren Einschränkungen in den Ansichts- und Vorschau-Funktionsbereichen:
|
| Git Graph | Einige Git Graph Webview-Funktionen können in Codespaces eingeschränkt sein. Zum Beispiel kann das Wechseln zwischen einer Datei aus einem Commit und der Git Graph-Webview die Webview leeren. | Sie können Git Graph vollständig in der VS Code-Desktopanwendung 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 Remote-SSH-Computer) ausführen möchten, öffnen Sie VS Code auf dem 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 einige andere Probleme, die verhindern können, dass Funktionen in Remote-Kontexten wie erwartet funktionieren. | In einigen Fällen können Sie einen anderen Befehl verwenden, um das Problem zu umgehen, in anderen Fällen muss die Erweiterung möglicherweise geändert werden. Überprüfen Sie die Remote-Erweiterungstipps für häufige Remote-Probleme und Tipps zu deren Lösung. |
Häufig gestellte Fragen
Warum ist eine Erweiterung nicht im Browser installierbar?
Es gibt eine kleine Anzahl von Erweiterungen, die integrierte Annahmen treffen oder auf dem Desktop ausgeführt werden müssen. Beispiele sind Fälle, in denen eine Erweiterung auf Dateien von der VS Code-Installation auf dem Desktop zugreift oder wenn eine Erweiterung von einem ausführbaren Programm abhängt, das in einer Desktop-Umgebung laufen 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 weiterhin verwendet werden, wenn Sie sich von einer VS Code-Instanz auf dem Desktop aus mit einem Codespace verbinden.
Wie erlaube ich VS Code den Zugriff auf meine Zwischenablage zum Lesen?
In bestimmten Fällen fragt VS Code möglicherweise nach einer Erlaubnis, auf die Zwischenablage zuzugreifen, wenn daraus gelesen wird. Sie sollten in der Lage sein, den Zugriff auf die Zwischenablage über Ihren Browser zu gewähren, 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 den Zugriff auf die Zwischenablage gewährt haben, können Sie den Vorgang erneut versuchen.
Wie erlaube ich VS Code, immer neue Tabs und Fenster zu öffnen?
Manchmal blockieren Browser aus Sicherheitsgründen das Öffnen neuer Tabs oder Fenster durch VS Code. Wenn dies geschieht, erkennt VS Code die Blockierung und fordert den Benutzer explizit dazu 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 Browser-Navigationsleiste öffnen und Pop-up-Fenster zulassen.
Wie erlaube ich VS Code im Browser den Zugriff auf lokale Dateien und Ordner?
Das Öffnen lokaler Dateien und Ordner in VS Code über einen Browser 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 beim Verwenden von VS Code in einem Browser auf lokale Dateien und Ordner zugreifen möchten, ziehen Sie bitte einen Wechsel zu einem dieser beiden Browser in Betracht.
Fragen oder Feedback
Wenn Sie Fragen haben, können Sie den GitHub Codespaces Fehlerbehebungsleitfaden konsultieren. Wenn Sie Feedback geben möchten, können Sie Issues in den GitHub Codespaces Diskussionen eintragen.