vscode.dev(!)
20. Oktober 2021 von Chris Dias, @chrisdias
Im Jahr 2019, als die Top-Level-Domain .dev geöffnet wurde, haben wir vscode.dev registriert und schnell reserviert, wobei wir auf unsere Website code.visualstudio.com verwiesen haben (oder, wenn Sie aus der Gegend von Boston kommen wie ich, haben wir sie „pahked“). Wie viele Leute, die eine .dev-Domain kaufen, hatten wir keine Ahnung, was wir damit anfangen sollten. Und wir haben sicherlich nicht erwartet, dass sie zur Erfüllung einer über ein Jahrzehnt dauernden Mission führen würde.
VS Code im Browser
Schnell ins Heute gespult. Wenn Sie jetzt https://vscode.dev aufrufen, sehen Sie eine leichtgewichtige Version von VS Code, die vollständig im Browser läuft. Öffnen Sie einen Ordner auf Ihrem lokalen Rechner und beginnen Sie mit dem Programmieren.
Keine Installation erforderlich.
Mit der Verfügbarkeit von vscode.dev beginnen wir endlich, unsere ursprüngliche Vision zu verwirklichen, ein Entwicklungswerkzeug zu bauen, das vollständig serverlos im Browser laufen kann. Für eine vollständige Geschichtsstunde schauen Sie sich Erich Gammas VS Code Day Vortrag "VS Code An Overnight Success…10 Years in the Making" an.
Was können Sie also mit VS Code für das Web machen? Ziemlich viel eigentlich...
Lokale Entwicklung mit Cloud-Tools
Moderne Browser, die die File System Access API unterstützen (derzeit Edge und Chrome), ermöglichen es Webseiten, auf das lokale Dateisystem zuzugreifen (mit Ihrer Erlaubnis). Dieses einfache Tor zur lokalen Maschine eröffnet schnell einige interessante Szenarien für die Verwendung von VS Code für das Web als lokales Entwicklungswerkzeug ohne Installation, wie z. B.:
- Lokales Anzeigen und Bearbeiten von Dateien. Machen Sie sich schnell Notizen (und Vorschau!) in Markdown. Selbst wenn Sie sich auf einer eingeschränkten Maschine befinden, auf der Sie nicht das vollständige VS Code installieren können, können Sie vscode.dev möglicherweise dennoch zum Anzeigen und Bearbeiten lokaler Dateien verwenden.
- Erstellen Sie clientseitige HTML-, JavaScript- und CSS-Anwendungen in Verbindung mit den Browser-Tools zum Debuggen.
- Bearbeiten Sie Ihren Code auf leistungsschwächeren Maschinen wie Chromebooks, auf denen Sie VS Code nicht (oder nur schwer) installieren können.
- Entwickeln Sie auf Ihrem iPad. Sie können Dateien hoch- und herunterladen (und sie sogar mit der Files-App in der Cloud speichern) sowie Repositories remote mit der integrierten GitHub Repositories-Erweiterung öffnen.
Und wenn Ihr Browser keine lokalen Dateisystem-APIs unterstützt, können Sie immer noch einzelne Dateien öffnen, indem Sie sie über den Browser hoch- und herunterladen.
Eine leichtere Erfahrung
Da VS Code für das Web vollständig im Browser läuft, werden einige Erfahrungen natürlich stärker eingeschränkt sein im Vergleich zu dem, was Sie in der Desktop-Anwendung tun können. Zum Beispiel sind der Terminal und der Debugger nicht verfügbar, was Sinn ergibt, da Sie eine Rust- oder Go-Anwendung nicht innerhalb der Browser-Sandbox kompilieren, ausführen und debuggen können (obwohl aufkommende Technologien wie Pyodide und Webcontainer dies eines Tages ändern könnten).
Etwas nuancierter sind die Code-Bearbeitungs-, Navigations- und Browsing-Erfahrungen, die auf dem Desktop generell durch Sprachdienste und Compiler angetrieben werden, die ein Dateisystem, eine Laufzeitumgebung und eine Rechenumgebung erwarten. Im Browser werden diese Erfahrungen durch Sprachdienste angetrieben, die *vollständig im Browser laufen* (kein Dateisystem, keine Laufzeiten) und Quellcode-Tokenisierung, Syntax-Hervorhebung, Vervollständigungen und viele Einzelfalloperationen bieten.
Als Ergebnis fallen die Erfahrungen im Browser im Allgemeinen in die folgenden Kategorien:
Gut: Für die meisten Programmiersprachen bietet vscode.dev Syntax-Hervorhebung, textbasierte Vervollständigungen und Klammerpaar-Hervorhebung. Mithilfe eines Tree-sitter-Syntaxbaums können wir zusätzliche Funktionen wie Outline/Go to Symbol und Symbolsuche für gängige Sprachen wie C/C++, C#, Java, PHP, Rust und Go anbieten.
Besser: Die Erfahrungen mit TypeScript, JavaScript und Python werden durch Sprachdienste angetrieben, die nativ im Browser laufen. Mit diesen Programmiersprachen erhalten Sie die "Gute"-Erfahrung plus umfangreiche Einzelfall-Vervollständigungen, semantische Hervorhebung, Syntaxfehler und mehr.
Am besten: Für viele "web-typische" Sprachen wie JSON, HTML, CSS und LESS ist die Code-Bearbeitung in vscode.dev fast identisch mit der Desktop-Version (einschließlich Markdown-Vorschau!).
Erweiterungen
Die meisten UI-Anpassungs-Erweiterungen wie Themes, Keymaps und Snippets funktionieren in vscode.dev und Sie können sogar das Roaming zwischen Browser, Desktop und GitHub Codespaces über Settings Sync aktivieren.
Erweiterungen, die Node.js-Code ausführen und OS-spezifische Module verwenden oder Shell-Befehle an lokale ausführbare Dateien senden, werden immer noch in den Suchergebnissen angezeigt, sind aber klar als nicht verfügbar gekennzeichnet.
Dennoch gibt es eine wachsende Anzahl von Erweiterungen, die aktualisiert wurden, um im Browser zu funktionieren, und täglich kommen mehr hinzu.
Hinweis: Wenn Sie ein Erweiterungsautor sind und Ihre Erweiterung im Browser verfügbar machen möchten (wir tun es!), lesen Sie bitte unseren Leitfaden für Web-Erweiterungen.
Zum Beispiel ermöglicht die Luna Paint - Image Editor-Erweiterung die Bearbeitung von Rasterbildern direkt in VS Code. Die Erweiterung bringt umfangreiche Design-Tools (z. B. Ebenen- und Mischwerkzeuge) nach VS Code, und natürlich können Sie Bilder auf Ihre lokale Festplatte speichern.
Die GitHub Issue Notebooks-Erweiterung bringt die Notebook-Erfahrung zu GitHub Issues. Damit können Sie Abfragen, Ergebnisse und sogar Markdown, das den Zweck der Abfragen beschreibt, in einem einzigen Editor kombinieren.
GitHub
Viele Erweiterungen für VS Code arbeiten mit Quellcode, der auf GitHub gespeichert ist. Zum Beispiel ermöglicht die CodeTour-Erweiterung das Erstellen von geführten Rundgängen durch eine Codebasis, und die WikiLens-Erweiterung verwandelt VS Code und Ihr Repository in ein leistungsfähiges Notizwerkzeug (mit bidirektionaler Verknüpfung). Um den Zugriff auf Ihren Code auf GitHub zu erleichtern, ist VS Code für das Web mit den integrierten Erweiterungen GitHub Repositories, Codespaces und Pull Request ausgestattet. Sie können schnelle Bearbeitungen vornehmen, PRs überprüfen und **Weiterleiten** zu einem lokalen Klon oder noch besser, zu einem GitHub Codespace, wenn Sie leistungsfähigere Sprachfunktionen wünschen oder Änderungen kompilieren, ausführen und testen müssen, bevor Sie die Commits zusammenführen.
Wow, klingt doch sehr nach github.dev, oder? Sind sie unterschiedlich? Dasselbe? Warum zwei??!!
Gute Frage(n)! github.dev ist eine angepasste Instanz von VS Code für das Web, die tief in GitHub integriert ist. Die Anmeldung ist automatisch, das URL-Format folgt dem /organization/repo-Modell von github.com, sodass Sie einfach .com durch .dev ersetzen können, um ein Repository zu bearbeiten, und es ist für GitHub mit hellen und dunklen Themes angepasst.
Zusätzlich zu Repositories auf GitHub unterstützt VS Code für das Web Azure Repos (Teil von Azure DevOps). Um beides zu nutzen, unterstützt VS Code für das Web zwei Routen: vscode.dev/github und vscode.dev/azurerepos. Das müssen Sie sich aber nicht merken, präfixen Sie einfach die URL, die Sie haben, mit "vscode.dev".
Ändern Sie zum Beispiel https://github.com/microsoft/vscode zu 'https://vscode.dev/github.com/Microsoft/vscode'.
Machen Sie dasselbe für Azure Repos. Ändern Sie https://dev.azure.com/... zu 'https://vscode.dev/dev.azure.com/...'.
Derzeit befindet sich die Unterstützung für Azure Repos im Vorschau-Modus für das Lesen von Repositories, aber wir arbeiten hart daran, so schnell wie möglich vollständige Lese-/Schreibfunktionen bereitzustellen.
Wenn Sie nicht auf GitHub oder Azure DevOps sind, kann die Unterstützung für zusätzliche Repository-Hosting-Dienste über Erweiterungen bereitgestellt werden, genau wie auf dem Desktop. Diese Erweiterungen müssen, wie oben erwähnt, vollständig im Browser laufen können.
Apropos URLs…
Ähnlich wie auf dem Desktop können Sie VS Code für das Web über ein reiches Ökosystem von Erweiterungen anpassen, die so gut wie jedes Backend, jede Sprache und jeden Dienst unterstützen. Im Gegensatz zum Desktop ist es für uns einfach, angepasste Erfahrungen mit vorinstallierten Erweiterungen über eindeutige vscode.dev-URLs (wie die oben genannten vscode.dev/github und vscode.dev/azurerepos) bereitzustellen.
Versuchen Sie zum Beispiel, zu https://vscode.dev/theme/sdras.night-owl zu browsen.
Hier können Sie das beliebte Night Owl-Farbthema von @sarah_edo "live" erleben, ohne den Download- und Installationsprozess durchlaufen zu müssen, nur um zu sehen, ob es Ihnen gefällt. Keine Installation notwendig! Wenn Sie ein Theme-Autor sind, können Sie sogar einen Badge in Ihrer README.md erstellen, damit Benutzer Ihr Theme direkt aus dem Marketplace ausprobieren können (mehr dazu im Benutzerhandbuch VS Code für das Web).
Fühlen Sie sich frei, diese URL zu verwenden, um Ihre Lieblingsthemes mit Freunden zu teilen. Persönlich bin ich ein großer Fan von @wesbos' Cobalt2-Theme, schauen Sie sich https://vscode.dev/theme/wesbos.theme-cobalt2 an. Beachten Sie, dass die theme-URL nur mit Themes funktioniert, die vollständig deklarativ sind (kein Code).
Wie Sie sehen können, sind vscode.dev-URLs eine leistungsstarke Möglichkeit für uns, neue, leichtgewichtige Erfahrungen bereitzustellen. Ein weiteres Beispiel ist, dass Live Share-Gast-Sessions auch im Browser über die URL https://vscode.dev/liveshare verfügbar sein werden. Die sessionId wird an die Erweiterung übergeben, um das Beitreten nahtlos zu gestalten.
Die Möglichkeiten mit vscode.dev-URLs sind endlos, und wir haben viele Ideen, die wir in den kommenden Monaten mit Ihnen teilen werden.
Wo geht es als Nächstes hin?
VS Code im Browser zu realisieren, ist die Erfüllung der ursprünglichen Vision für das Produkt. Es ist auch der Beginn einer völlig neuen. Ein flüchtiger Editor, der für jeden mit einem Browser und einer Internetverbindung verfügbar ist, ist die Grundlage für eine Zukunft, in der wir wirklich alles von überall aus bearbeiten können.
Bleiben Sie dran für mehr… 😉
Viel Spaß beim Programmieren,
Chris
PS: Falls Sie es verpasst haben, können Sie unseren VS Code für das Web-Livestream ansehen.