Schnellstart für GitHub Codespaces

Starten Sie schnell mit GitHub Codespaces.

In diesem Artikel

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. Sie werden in der Browserversion von Visual Studio Code arbeiten, die zunächst der Standard-Editor für GitHub Codespaces ist. Nach dem Ausprobieren dieser Schnellstartanleitung können Sie in anderen Editoren verwenden Codespaces 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 GitHub Codespaces Funktionsweise finden Sie im Begleithandbuch Ausführliche Informationen zu GitHub Codespaces.

Erstellen Ihres 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 erweiterten Dropdownmenüs, um die Option In Codespace öffnen anzuzeigen.

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.

    Screenshot des Terminals in VS Code mit eingegebenem Befehl „npm run dev“

    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 Popupmeldung an, um dir mitzuteilen, dass der Port weitergeleitet wurde.

    Screenshot der Popupmeldung „Deine auf Port 3000 ausgeführte Anwendung ist verfügbar.“, unter dieser befindet sich die grüne Schaltfläche „In Browser öffnen“.

  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 Sie die Browserregisterkarte geschlossen haben, klicken Sie auf die Registerkarte "Ports" VS Code, zeigen Sie auf den Wert " Lokale Adresse " für den ausgeführten Port, und klicken Sie auf das Symbol " Im Browser öffnen ".

Screenshot des Panels „Ports“, die Registerkarte „Ports“ und ein Globussymbol, durch das der weitergeleitete Port in einem Browser geöffnet wird, sind orange umrandet.

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.

    Screenshot der VS Code-Aktivitätsleiste mit orange umrandeter Schaltfläche „Quellcodeverwaltung“.

  2. Um Ihre Änderungen zum Staging hinzuzufügen, klicken Sie neben der Datei haikus.json auf oder auf Changes, wenn Sie mehrere Dateien geändert haben und alle zum Staging hinzufügen möchten.

    Screenshot: Seitenleiste „Quellcodeverwaltung“, bei der die Schaltfläche zum Staging (ein Pluszeichen) rechts neben „Änderungen“ dunkelorange umrandet ist.

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

    Screenshot der Seitenleiste „Quellcodeverwaltung“, Die Nachricht „Haiku Text und Stile ändern“ und die Schaltfläche „Commit“ sind orange umrandet.

  4. Klicke auf Branch veröffentlichen.

    Screenshot: Seitenleiste „Quellcodeverwaltung“ mit Anzeige der Schaltfläche „Branch veröffentlichen“.

  5. Geben Sie in der Dropdownliste "Repositoryname" einen Namen für Ihr neues Repository ein, und wählen Sie dann "Im privaten Repository veröffentlichenGitHub" oder "Im öffentlichen Repository veröffentlichen" GitHub aus.

    Screenshot der Dropdownliste für den Repository-Namen in VS Code. zwei Optionen zum Veröffentlichen in einem privaten oder öffentlichen Repository werden angezeigt.

    Der Besitzer des neuen Repositorys ist das GitHub Konto, mit dem Sie den Codespace erstellt haben.

  6. Klicken Sie im Popup, das in der unteren rechten Ecke des Editors angezeigt wird, auf "Öffnen" GitHub , um das neue Repository anzuzeigen GitHub. 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: Bestätigungsmeldung für ein erfolgreich veröffentlichtes Repository mit der Schaltfläche „In GitHub öffnen“

Personalisieren mit einer Erweiterung

Wenn Sie über den Browser oder die Visual Studio Code Desktopanwendung eine Verbindung mit einem Codespace herstellen, können Sie direkt über den Editor auf den Visual Studio Code Marketplace zugreifen. In diesem Beispiel installieren Sie eine VS Code Erweiterung, die das Design ändert, aber Sie können jede Erweiterung installieren, die für Ihren Workflow nützlich ist.

  1. Klicke auf das Erweiterungssymbol in der Aktivitätsleiste.

    Screenshot der Aktivitätsleiste, Das Symbol für Erweiterungen ist orange umrandet.

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

    Screenshot: „Extensions: Marketplace“ Im Suchfeld wird „fairyfloss“ angezeigt. Die Ergebnisse zeigen die Erweiterung „fairyfloss“ mit einer Schaltfläche „Install“ an.

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

    Screenshot: Dropdownmenü „Farbschema auswählen“ mit ausgewähltem Schema „fairyfloss“

Informationen zur Einstellungssynchronisierung

Sie können die Synchronisierung der Einstellungen aktivieren, um Erweiterungen und andere Einstellungen geräteübergreifend und zwischen Instanzen von VS Code zu synchronisieren. Deine synchronisierten Einstellungen werden in der Cloud zwischengespeichert. Wenn die Einstellungssynchronisierung in einem Codespace aktiviert ist, werden alle Updates, die du an deinen Einstellungen im Codespace vornimmst, in die Cloud gepusht, und alle Updates, die du von einem anderen Ort in die Cloud pushst, werden in deinen Codespace gepullt. Weitere Informationen finden Sie unter Personalisieren GitHub Codespaces für Ihr 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 sind einige hilfreiche Ressourcen zum Ausführen der nächsten Schritte mit GitHub Codespaces.

Weiterführende Lektüre