Visual Studio Code für das Web

Visual Studio Code für das Web bietet eine kostenlose, ohne Installation lauffähige Microsoft Visual Studio Code-Erfahrung, die vollständig in Ihrem Browser läuft. Damit können Sie schnell und sicher Quellcode-Repositorys durchsuchen und leichte Codeänderungen vornehmen. Um zu beginnen, gehen Sie in Ihrem Browser zu https://vscode.dev.

VS Code für das Web bietet viele der Funktionen von VS Code Desktop, die Sie lieben, einschließlich Suche und Syntaxhervorhebung beim Durchsuchen und Bearbeiten, zusammen mit Erweiterungsunterstützung für Ihre Codebasis und einfachere Bearbeitungen. Zusätzlich zum Öffnen von Repositorys, Forks und Pull-Requests von Quellcode-Anbietern wie GitHub und Azure Repos können Sie auch mit Code arbeiten, der auf Ihrem lokalen Rechner gespeichert ist.

VS Code für das Web läuft vollständig in Ihrem Webbrowser, daher gibt es bestimmte Einschränkungen im Vergleich zur Desktop-Erfahrung, über die Sie weiter unten mehr erfahren können.

Das folgende Video gibt einen kurzen Überblick über Visual Studio Code für das Web.

Verhältnis zu VS Code Desktop

VS Code für das Web bietet eine browserbasierte Erfahrung zum Navigieren von Dateien und Repositorys sowie zum Übertragen von leichten Codeänderungen. Wenn Sie jedoch Zugriff auf eine Laufzeitumgebung zum Ausführen, Erstellen oder Debuggen Ihres Codes benötigen, Plattformfunktionen wie ein Terminal nutzen möchten oder Erweiterungen ausführen möchten, die im Web nicht unterstützt werden, empfehlen wir Ihnen, Ihre Arbeit auf die Desktop-Anwendung, GitHub Codespaces, zu verschieben oder Remote – Tunnels für die vollen Fähigkeiten von VS Code zu verwenden. Darüber hinaus ermöglicht Ihnen VS Code Desktop die Verwendung eines vollständigen Satzes von Tastenkombinationen, die nicht durch Ihren Browser eingeschränkt sind.

Wenn Sie bereit sind zu wechseln, können Sie mit wenigen Klicks zur vollständigen VS Code-Erfahrung "upgraden".

Sie können auch zwischen der Stable- und der Insiders-Version von VS Code für das Web wechseln, indem Sie das Zahnradsymbol auswählen und dann Insiders-Version wechseln... wählen oder direkt zu https://insiders.vscode.dev navigieren.

Ein Projekt öffnen

Durch die Navigation zu https://vscode.dev können Sie eine neue lokale Datei oder ein neues Projekt erstellen, an einem vorhandenen lokalen Projekt arbeiten oder auf Quellcode-Repositorys zugreifen, die anderswo gehostet werden, z. B. auf GitHub und Azure Repos (Teil von Azure DevOps).

Sie können eine neue lokale Datei im Web genauso erstellen wie in einer VS Code Desktop-Umgebung, indem Sie im Befehlsmenü (F1) **Datei** > **Neue Datei** verwenden.

GitHub-Repositorys

Sie können ein GitHub-Repository direkt über eine URL in VS Code für das Web öffnen, indem Sie dem Schema folgen: https://vscode.dev/github/<organization>/<repo>. Am Beispiel des VS Code-Repositorys würde dies wie folgt aussehen: https://vscode.dev/github/microsoft/vscode.

Diese Erfahrung wird über eine benutzerdefinierte vscode.dev/github-URL bereitgestellt, die durch die Erweiterung GitHub Repositories (Teil der größeren Erweiterung Remote Repositories) angetrieben wird.

GitHub Repositories ermöglicht es Ihnen, ein Repository direkt aus dem Editor heraus remote zu durchsuchen und zu bearbeiten, ohne Code auf Ihren lokalen Rechner herunterladen zu müssen. Sie können mehr über die Erweiterung und ihre Funktionsweise in unserem GitHub Repositories-Leitfaden erfahren.

Hinweis: Die Erweiterung GitHub Repositories funktioniert auch in VS Code Desktop, um schnelles Durchsuchen und Bearbeiten von Repositorys zu ermöglichen. Sobald Sie die Erweiterung installiert haben, können Sie ein Repository mit dem Befehl GitHub Repositories: Open Repository... öffnen.

Sie können GitHub-Repositorys auch über die Suchleiste Ihres Browsers (auch Omnibox genannt) in vscode.dev öffnen, indem Sie die vscode.dev Erweiterung für Chrome und Edge installieren. Geben Sie dann code ein, um die Omnibox zu aktivieren, gefolgt vom Namen Ihres Repositorys. Vorschläge werden aus Ihrem Browserverlauf gefüllt. Wenn das gewünschte Repository nicht angezeigt wird, können Sie auch den vollständig qualifizierten Namen <owner>/<repo> eingeben, um es zu öffnen, z. B. microsoft/vscode.

Wenn Sie sich bereits in VS Code für das Web unter https://vscode.dev befinden, können Sie alternativ über die Befehle der Remote Repositories-Erweiterung zu verschiedenen Repositorys navigieren. Wählen Sie den Remote-Indikator unten links in der Statusleiste aus, und Sie erhalten den Befehl Remote Repository öffnen....

Azure Repos

Sie können Azure Repos genau wie GitHub-Repositorys in VS Code für das Web öffnen.

Wenn Sie zu einer URL mit dem Schema https://vscode.dev/azurerepos/<organization>/<project>/<repo> navigieren, können Sie die Dateien im Repository lesen, durchsuchen und Ihre Änderungen in Azure Repos übertragen. Sie können Änderungen abrufen, ziehen und synchronisieren sowie Branches anzeigen.

Sie können jedes Repository, jeden Branch oder jedes Tag von Azure Repos in VS Code für das Web öffnen, indem Sie vscode.dev vor die Azure Repos-URL setzen.

Alternativ können Sie auf einem Azure DevOps-Repository oder einem Pull-Request (.) drücken, um es in VS Code für das Web zu öffnen.

Weitere benutzerdefinierte URLs

Wie in der Desktop-Version können Sie VS Code für das Web über ein reichhaltiges Ökosystem von Erweiterungen anpassen, die so gut wie jedes Backend, jede Sprache und jeden Dienst unterstützen. vscode.dev enthält URLs, die Verknüpfungen zu gängigen Erlebnissen bieten.

Wir haben bereits ein paar URLs behandelt (vscode.dev/github und vscode.dev/azurerepos). Hier ist eine vollständigere Liste

Bitte beachten Sie, dass einige URLs auf eine bestimmte Weise eingegeben werden müssen (z. B. erfordert vscode.dev/editor/liveshare eine aktive Live Share-Sitzung). Bitte lesen Sie die Dokumentation für jeden Dienst, um spezifische Zugriffs- und Nutzungsinformationen zu erhalten.

Es gibt weitere Informationen zu einigen dieser URLs unten.

Themen

Sie können Farbthemen über VS Code für das Web über das URL-Schema teilen und erleben: https://vscode.dev/editor/theme/<extensionId>.

Zum Beispiel können Sie zu https://vscode.dev/editor/theme/sdras.night-owl navigieren, um das Night Owl Theme zu erleben, ohne den Download- und Installationsprozess durchlaufen zu müssen.

Hinweis: Das URL-Schema für Farbthemen funktioniert für Themen, die vollständig deklarativ sind (ohne Code).

Eine Erweiterung kann mehrere Themen definieren. Sie können das Schema /editor/theme/<extensionId>/<themeName> verwenden. Wenn kein themeName angegeben ist, wählt VS Code für das Web das erste Thema aus.

Als Theme-Autor können Sie den folgenden Badge zu Ihrer Erweiterungs-Readme-Datei hinzufügen, um Benutzern den einfachen Test Ihres Themes in VS Code für das Web zu ermöglichen (ersetzen Sie <extensionId> durch die eindeutige Kennung Ihrer Theme-Erweiterung)

[![Preview in vscode.dev](https://img.shields.io/badge/preview%20in-vscode.dev-blue)](https://vscode.dev/editor/theme/<extensionId>)

Visual Studio Live Share

Live Share-Gast-Sitzungen sind im Browser über die URL https://vscode.dev/editor/liveshare verfügbar. Die sessionId wird an die Erweiterung übergeben, um den Beitritt nahtlos zu gestalten.

Weiterarbeiten in einer anderen Umgebung

In einigen Fällen möchten Sie auf eine andere Umgebung zugreifen, die die Ausführung von Code ermöglicht. Sie können zu einer Repository-Arbeit in einer Entwicklungsumgebung wechseln, die Unterstützung für ein lokales Dateisystem und vollständige Sprach- und Entwicklungswerkzeuge bietet.

Die Erweiterung GitHub Repositories macht es Ihnen leicht, das Repository lokal zu klonen, es auf dem Desktop erneut zu öffnen oder einen GitHub Codespace für das aktuelle Repository zu erstellen (wenn Sie die Erweiterung GitHub Codespaces installiert haben und Zugriff auf die Erstellung von GitHub Codespaces haben). Verwenden Sie dazu den Befehl Weiterarbeiten an..., der über die Befehlspalette (F1) verfügbar ist, oder klicken Sie auf den Remote-Indikator in der Statusleiste.

Arbeit speichern und teilen

Wenn Sie an einer lokalen Datei im Web arbeiten, wird Ihre Arbeit automatisch gespeichert, wenn Sie Auto Save aktiviert haben. Sie können auch manuell speichern, wie Sie es beim Arbeiten in VS Code Desktop tun (z. B. **Datei** > **Speichern**).

Wenn Sie an einem Remote-Repository arbeiten, wird Ihre Arbeit im lokalen Speicher des Browsers gespeichert, bis Sie sie committen. Wenn Sie ein Repository oder einen Pull-Request über GitHub Repositories öffnen, können Sie Ihre Änderungen in der Quellcodeverwaltung-Ansicht pushen, um neue Arbeiten beizubehalten.

Sie können auch über Weiterarbeiten an in anderen Umgebungen weiterarbeiten.

Wenn Sie Weiterarbeiten an zum ersten Mal mit nicht committeten Änderungen verwenden, haben Sie die Möglichkeit, Ihre Bearbeitungen mit Cloud-Änderungen in Ihre ausgewählte Entwicklungsumgebung zu übertragen. Dies verwendet einen VS Code-Dienst, um Ihre ausstehenden Änderungen zu speichern. Dies wird im GitHub Repositories-Dokument genauer beschrieben.

Eigene Compute-Instanz mit Remote Tunnels verwenden

Sie können in VS Code für das Web über die Erweiterung Remote – Tunnels gegen eine andere Maschine entwickeln.

Die Remote – Tunnels-Erweiterung ermöglicht es Ihnen, sich über einen sicheren Tunnel mit einer Remote-Maschine wie einem Desktop-PC oder einer virtuellen Maschine (VM) zu verbinden. Sie können sich dann von überall sicher mit dieser Maschine verbinden, ohne SSH zu benötigen. Dadurch können Sie "Ihre eigene Compute-Leistung" in vscode.dev nutzen und zusätzliche Szenarien wie das Ausführen Ihres Codes im Browser ermöglichen.

Sie können mehr über Remote – Tunnels in deren Dokumentation erfahren.

Sichere Erkundung

VS Code für das Web läuft vollständig im Sandbox-Bereich Ihres Webbrowsers und bietet eine sehr eingeschränkte Ausführungsumgebung.

Beim Zugriff auf Code aus Remote-Repositorys "klont" der Web-Editor das Repository nicht, sondern lädt den Code, indem er die APIs der Dienste direkt von Ihrem Browser aus aufruft; dies reduziert weiter die Angriffsfläche beim Klonen von nicht vertrauenswürdigen Repositorys.

Beim Arbeiten mit lokalen Dateien lädt VS Code für das Web diese über die Dateisystem-Zugriffs-APIs Ihres Browsers, die den Umfang dessen, worauf der Browser zugreifen kann, einschränken.

Überall ausführen

Ähnlich wie bei GitHub Codespaces kann VS Code für das Web auf Tablets wie iPads ausgeführt werden.

Sprachunterstützung

Die Sprachunterstützung ist im Web etwas nuancierter und umfasst Codebearbeitung, Navigation und Browsing. Die Desktop-Erfahrungen werden typischerweise von Sprachdiensten und Compilern angetrieben, die ein Dateisystem, eine Laufzeitumgebung und eine Rechenumgebung erwarten. Im Browser werden diese Erfahrungen von Sprachdiensten angetrieben, die im Browser laufen und Quellcode-Tokenisierung, Syntaxfärbung, Vervollständigungen und viele Single-File-Operationen bereitstellen.

Im Allgemeinen fallen die Erfahrungen in die folgenden Kategorien

• Gut: Für die meisten Programmiersprachen bietet VS Code für das Web Code-Syntaxfärbung, textbasierte Vervollständigungen und Klammerpaarfärbung. Unter Verwendung eines Tree-sitter-Syntaxbaums über die Erweiterung anycode können wir zusätzliche Erfahrungen wie **Gliederung/Zu Symbol wechseln** und **Symbolsuche** für gängige Sprachen wie C/C++, C#, Java, PHP, Rust und Go bereitstellen.
• Besser: Die TypeScript-, JavaScript- und Python-Erfahrungen werden alle von Sprachdiensten angetrieben, die nativ im Browser laufen. Mit diesen Programmiersprachen erhalten Sie die "Gute"-Erfahrung plus umfangreiche Single-File-Vervollständigungen, semantische Hervorhebung, Syntaxfehler und mehr.
• Am besten: Für viele "web-spezifische" Sprachen wie JSON, HTML, CSS und LESS usw. ist die Coderfahrung in vscode.dev nahezu identisch mit der Desktop-Version (einschließlich Markdown-Vorschau!).

Sie können den Grad der Sprachunterstützung in Ihrer aktuellen Datei über die Sprachstatusanzeige in der Statusleiste ermitteln

Einschränkungen

Da VS Code für das Web vollständig im Browser läuft, sind einige Erfahrungen naturgemäß eingeschränkter als das, was Sie in der Desktop-App tun können. Zum Beispiel sind das Terminal und der Debugger nicht verfügbar, was Sinn ergibt, da Sie eine Rust- oder Go-Anwendung nicht im Browser-Sandbox kompilieren, ausführen und debuggen können.

Erweiterungen

Nur eine Teilmenge von Erweiterungen kann im Browser ausgeführt werden. Sie können die Erweiterungsansicht verwenden, um Erweiterungen im Web zu installieren. Erweiterungen, die nicht installiert werden können, haben ein Warnsymbol und einen Link **Warum erfahren Sie mehr**. Wir erwarten, dass im Laufe der Zeit mehr Erweiterungen aktiviert werden.

Wenn Sie eine Erweiterung installieren, wird sie im lokalen Speicher des Browsers gespeichert. Sie können sicherstellen, dass Ihre Erweiterungen über VS Code-Instanzen hinweg synchronisiert werden, einschließlich verschiedener Browser und sogar des Desktops, indem Sie Einstellungen synchronisieren aktivieren.

Wenn ein Erweiterungspaket Erweiterungen enthält, die nicht in der Browser-Sandbox ausgeführt werden, erhalten Sie eine Informationsmeldung mit der Option, die im Paket enthaltenen Erweiterungen anzuzeigen.

Wenn Erweiterungen in der Browser-Sandbox ausgeführt werden, sind sie stärker eingeschränkt. rein deklarative Erweiterungen, wie die meisten Themes, Snippets oder Grammatiken, können unverändert ausgeführt werden und sind in VS Code für das Web ohne Änderungen von den Erweiterungsautoren verfügbar. Erweiterungen, die Code ausführen, müssen aktualisiert werden, um die Ausführung in der Browser-Sandbox zu unterstützen. Mehr darüber, was für die Unterstützung von Erweiterungen im Web erforderlich ist, finden Sie im Leitfaden für Web-Erweiterungsautoren.

Es gibt auch Erweiterungen, die im Browser mit nur teilweiser Unterstützung ausgeführt werden. Ein gutes Beispiel ist eine Sprach-Erweiterung, die ihre Unterstützung auf einzelne Dateien oder die aktuell geöffneten Dateien beschränkt.

Dateisystem-API

Edge und Chrome unterstützen heute die File System API, mit der Webseiten auf das lokale Dateisystem zugreifen können. Wenn Ihr Browser die File System API nicht unterstützt, können Sie einen Ordner nicht lokal öffnen, aber Sie können stattdessen Dateien öffnen.

Browserunterstützung

Sie können VS Code für das Web in den neuesten Versionen von Chrome, Edge, Firefox und Safari verwenden. Ältere Versionen der einzelnen Browser funktionieren möglicherweise nicht – wir garantieren nur die Unterstützung der neuesten Version.

Tipp: Eine Möglichkeit, die kompatible Browserversion zu überprüfen, besteht darin, die Version von Playwright zu ermitteln, die derzeit für das Testen von VS Code verwendet wird, und deren unterstützte Browserversionen zu überprüfen. Die aktuell verwendete Playwright-Version finden Sie in der Datei package.json des VS Code-Repositorys unter devDependencies/@playwright/test. Sobald Sie die Playwright-Version kennen, z. B. 1.37, können Sie den Abschnitt Browser-Versionen in deren Versionshinweisen überprüfen.

Webviews können in Firefox und Safari anders aussehen oder unerwartetes Verhalten aufweisen. Sie können sich die Issue-Abfragen im VS Code GitHub-Repository ansehen, um Probleme zu verfolgen, die sich auf bestimmte Browser beziehen, z. B. mit dem Safari-Label und dem Firefox-Label.

Es gibt zusätzliche Schritte, die Sie unternehmen können, um Ihre Browser-Erfahrung mit VS Code für das Web zu verbessern. Sehen Sie sich den Abschnitt Zusätzliche Browser-Einrichtung an, um weitere Informationen zu erhalten.

Mobile Unterstützung

Sie können VS Code für das Web auf mobilen Geräten verwenden, aber kleinere Bildschirme können bestimmte Einschränkungen aufweisen.

Tastenkombinationen

Bestimmte Tastenkombinationen können im Web auch anders funktionieren.

Zusätzliche Browser-Einrichtung

Es gibt zusätzliche Browserkonfigurationsschritte, die Sie bei der Arbeit mit VS Code im Browser durchführen können.

Öffnen neuer Tabs und Fenster

In bestimmten Fällen müssen Sie möglicherweise einen neuen Tab oder ein neues Fenster öffnen, während Sie in VS Code für das Web arbeiten. VS Code kann Sie um Erlaubnis bitten, auf die Zwischenablage zuzugreifen, wenn Sie daraus lesen. Abhängig von Ihrem Browser können Sie den Zugriff auf die Zwischenablage gewähren oder Pop-up-Fenster auf verschiedene Weise zulassen.

• Chrome, Edge, Firefox: Suchen Sie in den Einstellungen Ihres Browsers nach "Site-Berechtigungen" oder suchen Sie in der Adressleiste auf der rechten Seite nach der folgenden Option.

• Safari: Gehen Sie im Safari-Browser zu Einstellungen... > Websites > Pop-up-Fenster > die Domäne, auf die Sie zugreifen (z. B. vscode.dev), und wählen Sie Zulassen aus dem Dropdown-Menü.