Skip to main content
We publish frequent updates to our documentation, and translation of this page may still be in progress. For the most current information, please visit the English documentation.

Schnellstartanleitung für GitHub Codespaces

Teste GitHub Codespaces in fünf Minuten.

Einführung

In diesem Leitfaden erstellst du einen Codespace aus einem Vorlagenrepository und erkundest einige der wesentlichen Features, die dir im Codespace zur Verfügung stehen. Du arbeitest in der Browserversion von Visual Studio Code, die zunächst der Standard-Editor für GitHub Codespaces ist. Nachdem du diesen Schnellstart ausprobiert hast, kannst du Codespaces in anderen Editoren verwenden und den Standard-Editor ändern. Die Links findest du am Ende dieses Leitfadens.

In diesem Schnellstart erfährst du, wie du einen Codespace erstellst, eine Verbindung mit einem weitergeleiteten Port herstellst, um deine ausgeführte Anwendung anzuzeigen, deinen Codespace in einem neuen Repository veröffentlichst und dein Setup mit Erweiterungen personalisierst.

Weitere Informationen zur genauen Funktionsweise von GitHub Codespaces findest du im Begleitleitfaden Fundierte Einblicke in GitHub Codespaces.

Erstellen des Codespace

  1. Navigiere zum Vorlagenrepository github/haikus-for-codespaces.

  2. Klicke auf Diese Vorlage verwenden und dann auf In einem Codespace öffnen.

    Screenshot der Schaltfläche „Diese Vorlage verwenden“ und des Dropdownmenüs

Ausführen der Anwendung

Sobald dein Codespace erstellt ist, wird dein Vorlagenrepository automatisch hinein geklont. Jetzt kannst du die Anwendung ausführen und in einem Browser starten.

  1. Sobald das Terminal geöffnet wird, gib den Befehl npm run dev ein. In diesem Beispiel wird ein Node.js-Projekt verwendet, und dieser Befehl führt das Skript mit der Bezeichnung „dev“ in der Datei package.json aus, die die im Beispielrepository definierte Webanwendung startet.

    „npm run dev“ im Terminal

    Wenn du mit einem anderen Anwendungstyp arbeitest, gib den entsprechenden Startbefehl für dieses Projekt ein.

  2. Wenn deine Anwendung gestartet wird, erkennt der Codespace den Port, auf dem die Anwendung ausgeführt wird, und zeigt eine Eingabeaufforderung an, um dir mitzuteilen, dass sie weitergeleitet wurde.

    Popupbenachrichtigung für Portweiterleitung

  3. Klicke auf Im Browser öffnen, um deine ausgeführte Anwendung auf einer neuen Registerkarte anzuzeigen.

Bearbeiten der Anwendung und Anzeigen von Änderungen

  1. Wechsle zurück zu deinem Codespace, und öffne die Datei haikus.json, indem du im Explorer darauf klickst.

  2. Bearbeite das text-Feld des ersten Haikus, um die Anwendung mit deinem eigenen Haiku zu personalisieren.

  3. Gehe zurück zur Registerkarte der ausgeführten Anwendung in deinem Browser und aktualisiere sie, um deine Änderungen zu sehen.

    Wenn du die Registerkarte geschlossen hast, öffne den Bereich „Ports“, und klicke auf das Symbol Im Browser öffnen für den ausgeführten Port.

    Portweiterleitungsbereich

Commit und Push deiner Änderungen

Nachdem du nun einige Änderungen vorgenommen hast, kannst du das integrierte Terminal oder die Quellansicht verwenden, um deine Arbeit in einem neuen Repository zu veröffentlichen.

  1. Klicke in der Aktivitätsleiste auf die Ansicht Quellcodeverwaltung. Ansicht „Quellcodeverwaltung“

  2. Klicke zum Sagen einer Änderungen auf + neben der Datei haikus.json oder neben Änderungen, wenn du mehrere Dateien geändert hast und sie alle stagen möchtest.

    Randleiste der Quellcodeverwaltung mit hervorgehobener Stagingschaltfläche

  3. Gib eine Commitnachricht ein, die die von dir vorgenommene Änderung beschreibt, und klicke dann auf Commit, um deine gestageten Änderungen zu committen.

    Seitenleiste der Quellcodeverwaltung mit einer Commitnachricht

  4. Klicke auf Branch veröffentlichen.

    Screenshot: Schaltfläche „Branch veröffentlichen“ in VS Code

  5. Gib in der Dropdownliste „Repositoryname“ einen Namen für dein neues Repository ein, und wähle dann Im privaten Repository GitHub veröffentlichen oder Im öffentlichen Repository GitHub veröffentlichen aus.

    Screenshot: Dropdownliste „Repositoryname“ in VS Code

    Der Besitzer des neuen Repositorys ist das GitHub-Konto, mit dem du den Codespace erstellt hast.

  6. Klicke im Popupfenster, das in der unteren rechten Ecke des Editors angezeigt wird, auf In GitHub öffnen, um das neue Repository für GitHub.com anzuzeigen. Zeige die Datei haikus.json im neuen Repository an, und überprüfe, ob die in deinem Codespace vorgenommene Änderung erfolgreich in das Repository gepusht wurde.

    Screenshot: Popupfenster „In GitHub öffnen“ in VS Code

Personalisieren mit einer Erweiterung

Wenn du über den Browser oder die Visual Studio Code-Desktopanwendung eine Verbindung mit einem Codespace herstellst, kannst du direkt über den Editor auf den Visual Studio Code-Marketplace zugreifen. In diesem Beispiel installierst du eine VS Code-Erweiterung, die das Design ändert. Du kannst jedoch jede Erweiterung installieren, die für deinen Workflow nützlich ist.

  1. Klicke auf der linken Randleiste auf das Symbol „Erweiterungen“.

  2. Gib in der Suchleiste ein fairyfloss, und klicke auf Installieren.

    Hinzufügen einer Erweiterung

  3. Wähle das fairyfloss-Design aus, indem du es in der Liste auswählst.

    Auswählen des Fairyfloss-Designs

Informationen zur Einstellungssynchronisierung

Du kannst die Einstellungssynchronisierung aktivieren, um Erweiterungen und andere Einstellungen auf mehreren Geräten und Instanzen von VS Code zu synchronisieren. Wenn du die Einstellungssynchronisierung in einer Instanz von VS Code aktivierst, z. B. in der Desktopanwendung VS Code auf deinem Laptop, werden deine Einstellungen für diese Instanz in der Cloud gespeichert. Aus der Cloud werden die Einstellungen zum Zeitpunkt der Erstellung in alle neuen Codespaces gepullt und kontinuierlich mit allen vorhandenen Codespaces synchronisiert, in denen die Einstellungssynchronisierung aktiviert ist.

Ob die Einstellungssynchronisierung in einem Codespace standardmäßig aktiviert ist, hängt von deinen vorhandenen Einstellungen ab und davon, ob du den Codespace im Browser oder in der VS Code-Desktopanwendung öffnest. Weitere Informationen findest du unter Personalisieren von GitHub Codespaces für dein Konto.

Nächste Schritte

Du hast deine erste Anwendung in einem Codespace erfolgreich erstellt, personalisiert und ausgeführt, aber es gibt so viel mehr zu entdecken! Hier findest du einige hilfreiche Ressourcen für deine nächsten Schritte mit GitHub Codespaces.

Weitere nützliche Informationen