Erste Schritte mit Visual Studio Codespaces – Cloud IDE
Die webbasierte IDE Visual Studio Codespaces (ehemals Visual Studio Online / VSO) kann jetzt verwendet werden. Basierend auf dem beliebten Visual Studio-Code-Editor bietet es ein vertrautes Gefühl und einen Arbeitsbereich zum Schreiben und Arbeiten mit Quellcode.. Dies bietet auch die Erweiterbarkeit der Unterstützung von Visual Studio Code-Erweiterungen, obwohl wir derzeit nicht wissen, wie viele oder welche VS Code-Erweiterungen unterstützt werden.
- Erstellen Ihres ersten Visual Studio Codespace & Abrechnungsplan
- Bearbeiten, Festschreiben und Synchronisieren von Codeänderungen mit Visual Studio Codespaces
- Installieren von Erweiterungen in Visual Studio Codespaces
- Visual Studio Codespaces-Ressourcen in Ihrem Azure-Abonnement
- Wrap Up
- Über den Autor
Erstellen Ihres ersten Visual Studio Codespace & Abrechnungsplan
Hier finden Sie eine Übersicht über die Anmeldung bei Visual Studio Codespaces (der cloudbasierten IDE von Microsoft) und die ersten Schritte mit den Tools.
- Öffnen Sie zunächst einen Webbrowser und navigieren Sie zu https://online.visualstudio.com
- Sobald Sie zum ersten Mal angemeldet sind, wird auf einem Bildschirm angezeigt, dass Sie keine Umgebungen haben.
- Klicken Sie auf die Schaltfläche Codespace erstellen.
- Dadurch wird der Bereich Abrechnungsplan erstellen geöffnet. Sie verwenden dies, um einen neuen Visual Studio Codespaces-Abrechnungsplan anzugeben, der in Ihrem Azure-Abonnement erstellt werden soll.
Geben Sie in diesem Bereich die folgenden Werte an:- Abonnement: Wählen Sie das Azure-Abonnement aus, auf das Ihr Login Zugriff hat und in dem Sie den neuen Abrechnungsplan erstellen möchten.
- Standort: Wählen Sie die Azure-Region aus, in der der Abrechnungsplan gehostet werden soll.
- Optional können Sie Erweiterte Optionen erweitern, um die folgende Konfiguration anzuzeigen:
- Planname: Geben Sie den Namen des Abrechnungsplans an, der in Ihrem Azure-Abonnement erstellt werden soll.
- Ressourcengruppe: Geben Sie den Namen der Ressourcengruppe an, in der der neue Abrechnungsplan platziert werden soll.
- Geben Sie die gewünschten Werte ein und klicken Sie auf Erstellen.
- Wenn der Abrechnungsplan neu erstellt wurde, wird automatisch der Bereich Codespace erstellen geöffnet.
- Um Ihren ersten Codespace zu erstellen, geben Sie die erforderlichen Werte ein und klicken Sie dann auf Erstellen. Sie können die folgenden Werte verwenden, um dies zum ersten Mal zu versuchen.
- Codespace-Name: Geben Sie einen Namen für den neuen Codespace an. Sie sollten einen Namen verwenden, der dem Projekt oder der Aufgabe ähnelt, für die Sie diese Umgebung verwenden.
- Git-Repository: Geben Sie optional ein Git-Repository für diesen zu klonenden Codespace an. Dies kann in zwei verschiedenen Formaten angegeben werden:
- GitHub-Projekt-URL: Sie können die vollständige URL der Homepage für ein GitHub-Projekt angeben. Wie
https://github.com/build5nines/az-kung-fu. - GitHub-Kurzform: Sie können einen durch Schrägstriche getrennten formatierten GitHub-Repository-Namen im Format
organization/repoangeben, z. B.build5nines/az-kung-fu.
- GitHub-Projekt-URL: Sie können die vollständige URL der Homepage für ein GitHub-Projekt angeben. Wie
- Instanztyp: Geben Sie die CPU-Kern- und Arbeitsspeicherkonfiguration an, die für den Visual Studio-Codespace bereitgestellt wird.
- Leerlauf-Codespace nach … anhalten: Geben Sie die Zeitspanne an, bis der Codespace automatisch angehalten wird, wenn er nicht verwendet wird.
- Der soeben erstellte Visual Studio-Codespace wird nun für den Online-Codeeditor / die IDE geöffnet.
Bearbeiten, Festschreiben und Synchronisieren von Codeänderungen mit Visual Studio Codespaces
Hier finden Sie eine Übersicht über das Öffnen des Visual Studio Codespaces-Editors, das Vornehmen einiger Codeänderungen und das Zurückschreiben dieser Änderungen an das GitHub-Repository für einen Codespace.
-
Klicken Sie im Arbeitsbereich auf der linken Seite des Bildschirms auf eine Datei im Projekt, um sie im Editor zu öffnen.
-
Nehmen Sie einige Änderungen an der Datei vor und speichern Sie sie, indem Sie oben links auf das Hamburger-Menü klicken und Datei und dann Speichern auswählen.
Hinweis: Sie können sehen, dass im Visual Studio-Codespace-Editor mehrere Menüoptionen verfügbar sind und dass es sich um dieselbe VS-Code-Erfahrung handelt, die Sie lieben gelernt haben.
-
Um Ihre Änderungen in das “lokale” Git-Repository von Visual Studio Online (das von GitHub geklont wurde) zu übernehmen, klicken Sie auf die Registerkarte Quellcodeverwaltung auf der linken Seite des Fensters.
-
Sobald die Änderungen festgeschrieben sind, können Sie sie mit dem GitHub-Repository synchronisieren, indem Sie auf die Ellipse (…) auf der Registerkarte Quellcodeverwaltung klicken und dann die Option Synchronisieren auswählen.
-
Sie werden mit einer Bestätigung aufgefordert, dass Sie “Push-and-Pull-Commits zu und von ‘origin / Master'” ausführen möchten. Klicken Sie auf OK, um mit der Synchronisierungsaktion fortzufahren.
-
Wenn Sie dies zum ersten Mal tun, öffnet Visual Studio Online eine neue Browserregisterkarte für die GitHub-Autorisierungsseite, sodass Sie Visual Studio-Codespaces mit den erforderlichen Berechtigungen für GitHub für Ihr Konto autorisieren können.
-
Durch Klicken auf die Schaltfläche Autorisieren wird Visual Studio Codespaces autorisiert, auf Ihr GitHub-Konto zuzugreifen.
-
Nachdem Visual Studio Codespaces autorisiert wurde, wird der Synchronisierungsvorgang mit dem GitHub-Repository abgeschlossen. Sie können jetzt zu GitHub navigieren, um zu sehen, dass das Commit tatsächlich synchronisiert wurde.
Installieren von Erweiterungen in Visual Studio Codespaces
Der webbasierte Visual Studio Codespaces-Editor basiert auf der Grundlage von Visual Studio Code (VS Code). Als solches teilt es viele Dinge, einschließlich einer vertrauten Benutzeroberfläche / Erfahrung und der Möglichkeit, VS-Code-Erweiterungen zu installieren. Auf diese Weise können Sie im Wesentlichen denselben VS-Code-Editor mit Erweiterungen verwenden, die in Ihrem Webbrowser auf jedem Gerät installiert sind!
Sie können Erweiterungen in Visual Studio-Codespaces auf dieselbe Weise installieren wie Erweiterungen in VS Code.
- Öffnen Sie die Registerkarte Erweiterungen, indem Sie auf das Symbol auf der linken Seite des Editors klicken
- Suchen und suchen Sie die gewünschte (n) Erweiterung (en).
- Klicken Sie auf die Schaltfläche Installieren für die Erweiterung, um sie im Visual Studio-Codespaces-Editor zu installieren.
Visual Studio Codespaces-Ressourcen in Ihrem Azure-Abonnement
Wenn Sie einen Visual Studio Codespaces-Abrechnungsplan erstellen, wird dieser Plan mit Ihrem Azure-Abonnement abgerechnet. Dies bedeutet, dass der Abrechnungsplan in Ihrem Azure-Abonnement erstellt wird und sich neben allen anderen Azure-Ressourcen befindet.
-
VS Codespaces-Abrechnungsplan in Azure -
VS Codespaces-Abrechnungsplan innerhalb der Ressourcengruppe
Wrap Up
Wie Sie sehen können, ist Visual Studio Codespaces (früher Visual Studio Online) ziemlich einfach zu beginnen. Durch die Verwendung der Visual Studio Code IDE-Benutzeroberfläche und -Erfahrung ist der VS Codespaces-Editor mit der Verwendung vertraut. Sie können sogar Erweiterungen in Visual Studio-Codespaces installieren!
Viel Spaß beim Codieren!
PS Ursprünglich im Mai 2019 als Visual Studio Online (VSO) angekündigt, ist es erstaunlich, endlich öffentlichen Zugang zu Visual Studio-Codespaces zu erhalten und diese ausprobieren / verwenden zu können.
Über den Autor
Chris ist der Gründer von Build5Nines.com und Microsoft MVP in Azure & IoT mit 20 Jahren Erfahrung im Design und Aufbau von Cloud & Enterprise-Systemen. Er ist außerdem Microsoft Certified: Azure Solutions Architect, Entwickler, Microsoft Certified Trainer (MCT) und Cloud Advocate. Er hat eine Leidenschaft für Technologie und teilt das, was er lernt, mit anderen, um ihnen zu helfen, schneller zu lernen und produktiver zu sein.
