Verwenden von VS Code für das Web aus GitHub

Sie können ein Repository oder einen Pull Request in VS Code for the Web direkt aus GitHub öffnen, um Code zu durchsuchen, Dateien zu bearbeiten und Ihre Änderungen zu committen.

In diesem Artikel

Hinweis

Wenn Sie ein Repository in github.dev öffnen, wird es in VS Code for the Web geöffnet, der browserbasierten Version von VS Code. Weitere Informationen finden Sie VS Code for the Web in der VS Code Dokumentation.

Informationen zu VS Code for the Web

VS Code for the Web ist eine einfache Bearbeitungsoberfläche, die vollständig in Ihrem Browser ausgeführt wird. Mit VS Code for the Web können Sie durch Dateien und Quellcode-Repositorys von GitHub aus navigieren sowie Codeänderungen vornehmen und committen. Du kannst ein beliebiges Repository, eine Fork oder einen Pull Request im Editor öffnen.

VS Code for the Web ist auf GitHub.com für alle kostenlos verfügbar.

VS Code for the Web bietet viele vorteile von Visual Studio Code, z. B. Suche, Syntaxmarkierung und eine Quellcodeverwaltungsansicht. Sie können die Einstellungssynchronisierung auch verwenden, um Ihre eigenen VS Code Einstellungen für den Editor zu teilen. Weitere Informationen finden Sie unter "Einstellungen synchronisieren " in der VS Code Dokumentation.

VS Code for the Web wird vollständig im Sandkasten Ihres Browsers ausgeführt. Der Editor klont das Repository nicht, sondern verwendet stattdessen die Erweiterung GitHub Repositorys, um die meisten funktionen auszuführen, die Sie verwenden werden. Deine Arbeit wird im lokalen Speicher des Browsers gespeichert, bis du sie committest. Du solltest deine Änderungen regelmäßig committen, um sicherzustellen, dass sie immer zugänglich sind.

Sie müssen bei GitHub angemeldet sein, um VS Code for the Web zu verwenden.

Öffnen VS Code for the Web von GitHub

Sie können jedes GitHub Repository in VS Code for the Web auf eine der folgenden Arten öffnen:

  • Um das Repository auf derselben Browserregisterkarte zu öffnen, drücken Sie .. beim Durchsuchen eines Repositorys oder einer Pull-Anforderung auf GitHub.

    Um das Repository in einem neuen Tab zu öffnen, drücken Sie >.

  • Ändere die URL von „github.com“ in „github.dev“.

  • Wählen Sie beim Anzeigen einer Datei das Dropdownmenü aus, und klicken Sie auf github.dev.

    Screenshot des Dropdownmenüs für das Bearbeitungssymbol. Die Option „github.dev“ ist zur Hervorhebung dunkelorange umrandet.

Codespaces und VS Code for the Web

Sowohl VS Code for the Web als auch GitHub Codespaces ermöglichen es Ihnen, Ihren Code direkt in Ihrem Repository zu bearbeiten. Beide Optionen haben jedoch leicht unterschiedliche Vorteile, je nach Anwendungsfall.

VS Code for the WebGitHub Codespaces
KostenFrei.Informationen zum kostenlosen monatlichen Nutzungskontingent für persönliche Konten findest du unter GitHub Codespaces Abrechnung.
VerfügbarkeitVerfügbar für alle Benutzer auf GitHub.com.Verfügbar für alle Benutzer auf GitHub.com.
StartVS Code for the Web wird sofort mit einem Tastendruck geöffnet, und Sie können sofort mit der Verwendung beginnen, ohne auf zusätzliche Konfiguration oder Installation warten zu müssen.Wenn du einen Codespace erstellst oder fortsetzt, wird dem Codespace eine VM zugewiesen, und der Container wird basierend auf dem Inhalt einer Datei devcontainer.json konfiguriert. Diese Einrichtung kann einige Minuten dauern, bis die Umgebung erstellt wurde. Weitere Informationen findest du unter Erstellen eines Codespaces für ein Repository.
BerechnenEs gibt keine zugeordnete Berechnung, sodass Sie ihren Code nicht erstellen und ausführen oder ein integriertes Terminal verwenden können.Mit GitHub Codespaces, erhalten Sie die Leistung einer dedizierten VM, auf der Sie Ihre Anwendung ausführen und debuggen können, und Sie können das Terminal genau wie in Ihrer lokalen Umgebung verwenden.
ErweiterungenNur eine Teilmenge von Erweiterungen, die im Web ausgeführt werden können, wird in der Erweiterungsansicht angezeigt und kann installiert werden. Weitere Informationen findest du unter Verwenden von Erweiterungen.Mit GitHub Codespaces können Sie die meisten Erweiterungen von Visual Studio Code Marketplace verwenden.

Verwenden von Quellcodeverwaltung

Bei Verwendung VS Code for the Webwerden alle Aktionen über die Ansicht "Quellcodeverwaltung" verwaltet, die sich auf der linken Seite in der Aktivitätsleiste befindet. Weitere Informationen zur Ansicht "Quellcodeverwaltung" finden Sie in der VS Code Dokumentation unter Versionssteuerung.

Da VS Code for the Web die GitHub-Repositories-Erweiterung für seine Funktionalität nutzt, können Sie Branches wechseln, ohne Ihre Änderungen stashen zu müssen. Siehe GitHub Repositorys in der VS Code Dokumentation.

Neuen Zweig erstellen

  1. Wenn der aktuelle Branch nicht in der Statusleiste angezeigt wird, klicke unten im Codespace mit der rechten Maustaste auf die Statusleiste, und wähle dann Quellcodeverwaltung aus.

  2. Klicke auf den Branchnamen in der Statusleiste.

    Screenshot, der den Branchnamen auf der Statusleiste von VS Code anzeigt.

  3. Klicke in der Dropdownliste entweder auf den Branch, zu dem du wechseln möchtest, oder gib den Namen für einen neuen Branch ein, und klicke auf Neuen Branch erstellen.

    Screenshot der Dropdownliste zum Erstellen eines neuen Branchs in VS Code. Alle noch nicht festgeschriebenen Änderungen, die Sie in Ihrem alten Branch vorgenommen haben, sind in Ihrem neuen Branch verfügbar.

Änderungen übernehmen

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

    Screenshot der VS Code-Aktivitätsleiste mit orange umrandeter Schaltfläche „Quellcodeverwaltung“, die mit einem Branchsymbol gekennzeichnet ist

  2. Wenn Sie Ihre Änderungen aufstufen möchten, klicken Sie neben der datei, die Sie geändert haben, oder neben "Änderungen ", wenn Sie mehrere Dateien geändert haben und sie alle stufen möchten.

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

  3. Gib in das Textfeld eine Commitnachricht ein, die die von dir vorgenommene Änderung beschreibt.

    Screenshot der Randleiste „Quellcodeverwaltung“ mit einer Commitnachricht, die in das Textfeld über der Schaltfläche „Commit“ eingegeben wurde.

  4. Klicken Sie auf Übertragen & Pushen.

    Ihre Änderungen werden automatisch an Ihre Verzweigung GitHubübertragen.

Erstellen eines Pull Requests

  1. Klicke nach dem Commit deiner Änderungen in die lokale Kopie des Repositorys oben auf der Randleiste „Quellcodeverwaltung“ auf das Pull Request-Symbol.

    Screenshot der Randleiste „Quellcodeverwaltung“. Das Pull Request-Symbol ist dunkelorange umrandet.

  2. Überprüfe, ob der lokale Branch und das Repository, von wo aus du mergst, und der Remote-Branch und das Repository, wohin du mergst, richtig sind. Gib dem Pull Request dann einen Titel und eine Beschreibung.

    Screenshot der Randleiste „GitHub-Pull Request“ mit einem Formular zum Erstellen eines Pull Requests, einschließlich der Felder „Titel“ und „Beschreibung“.

  3. Klicke auf Erstellen.

Arbeiten mit einem vorhandenen Pull Request

Sie können zum Arbeiten mit einer vorhandenen Pullanforderung verwenden VS Code for the Web .

  1. Navigieren Sie zu dem Pull Request, den Sie in VS Code for the Web öffnen möchten.
  2. Drücken Sie . , um die Pullanforderung in VS Code for the Webzu öffnen.
  3. Nachdem du Änderungen vorgenommen hast, committe sie mit den Schritten unter Committen deiner Änderungen. Deine Änderungen werden direkt in den Branch committet, es ist nicht erforderlich, die Änderungen zu pushen.

Verwenden von Erweiterungen

VS Code for the Web unterstützt VS Code Erweiterungen, die speziell für die Ausführung im Web erstellt oder aktualisiert wurden. Diese Erweiterungen werden als „Weberweiterungen“ bezeichnet. Informationen dazu, wie Sie eine Weberweiterung erstellen oder Ihre vorhandene Erweiterung für das Web aktualisieren können, finden Sie in der VS Code Dokumentation unter "Weberweiterungen".

Erweiterungen, die in VS Code for the Web ausgeführt werden können, werden in der Erweiterungen-Ansicht angezeigt und können installiert werden. Wenn du Einstellungssynchronisierung verwendest, werden auch kompatible Erweiterungen automatisch installiert. Weitere Informationen finden Sie unter "Einstellungen synchronisieren" in der VS Code Dokumentation.