Die vielen Gesichter von VS Code im Browser

VS Code wird mit Webtechnologien (HTML, CSS und JavaScript) erstellt, aber ich wage zu behaupten, dass es heute hauptsächlich als lokale App verwendet wird, die auf Ihrem Rechner installiert ist. Das beginnt sich jedoch zu ändern, da es eine absolute Explosion von Orten gibt, an denen VS Code im Web verfügbar wird. Ich würde sagen, das ist eine ziemlich große Sache, da VS Code nicht nur ein Editor ist; es ist der vorherrschende Editor, der von Webentwicklern verwendet wird. Die Verfügbarkeit im Web bedeutet, dass Sie ihn verwenden können, ohne Software installieren zu müssen, was für Orte wie Schulen, an denen die Verwaltung all dessen eine Qual ist, und für Computer wie Chromebooks, auf denen Sie keine lokale Software installieren können, von Bedeutung ist.

Es ist eigentlich etwas verwirrend, wo all dies auftaucht, also schauen wir uns die Landschaft an, wie ich sie heute sehe.

vscode.dev

Es ist erst ein paar Wochen her, als ich schreibe, dass Microsoft vscode.dev herausgebracht hat. Chris Dias

Moderne Browser, die die File System Access API unterstützen (heute Edge und Chrome), ermöglichen Webseiten den Zugriff auf das lokale Dateisystem (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 Zero-Installation-Tool für die lokale Entwicklung.

Es sind derzeit nur Edge und Chrome, die diese API haben, aber selbst wenn Sie sie nicht bekommen können, können Sie immer noch Dateien hochladen oder, was vielleicht nützlicher ist, ein Repository öffnen. Wenn es funktioniert, ist es im Grunde… VS Code im Browser. Es kann Ihre lokalen Ordner öffnen und verhält sich größtenteils genauso wie Ihre lokale VS Code-App.

Ich habe noch keinen ganzen Tag damit gearbeitet oder so etwas, aber die grundlegende Nutzung scheint dieselbe zu sein. Es gibt eine sehr explizite Berechtigungsverwaltung, die Sie durchführen müssen, und Tastenkombinationen sind etwas seltsam, da Sie gegen die Tastenkombinationen des Browsers ankämpfen müssen. Außerdem gibt es kein funktionierendes Terminal.

Abgesehen davon fühlt es sich ungefähr gleich an. Selbst Dinge wie „In Projekt suchen“ scheinen genauso schnell wie lokal zu sein, selbst bei großen Websites.

GitHub.dev: Die ganze Sache mit dem „Punkt (.) auf jedem GitHub-Repository drücken“

Sie erhalten VS Code auch im Browser, wenn Sie zu github.dev gehen, aber es ist nicht ganz gleich verdrahtet.

Sie haben hier nicht die Möglichkeit, einen lokalen Ordner zu öffnen. Stattdessen können Sie sich schnell ein GitHub-Repository ansehen.

Aber vielleicht noch bemerkenswerter ist, dass Sie Änderungen vornehmen, die Dateien speichern und dann das Source Control Panel direkt verwenden können, um den Code zu committen oder einen Pull Request zu erstellen.

Man könnte meinen, vscode.dev und github.dev würden irgendwann zusammengeführt, aber wer weiß.

Oh, und hey, wenn man das umgekehrt betrachtet, kann man auch GitHub-Repositories direkt auf Ihrem lokal installierten VS Code öffnen (auch ohne sie zu klonen).

In den ersten beiden gibt es kein Terminal oder eine Vorschau, aber bei GitHub Codespaces schon.

GitHub Codespaces ist auch VS Code im Browser, aber schicker. Zum einen sind Sie bei der Nutzung in Microsoft-Land angemeldet, was bedeutet, dass alle Ihre lokal ausgeführten VS Code-Erweiterungen laufen. Aber vielleicht noch wichtiger ist, dass Sie ein funktionierendes Terminal erhalten. Wenn Sie es starten, sehen Sie

Willkommen bei Codespaces! Sie sind auf unserem Standard-Image.

• Es enthält Laufzeiten und Tools für Python, Node.js, Docker und mehr. Die vollständige Liste finden Sie hier: https://aka.ms/ghcs-default-image
• Möchten Sie stattdessen ein benutzerdefiniertes Image verwenden? Erfahren Sie mehr hier: https://aka.ms/configure-codespace

🔍 Um VS Code in seiner vollen Pracht zu erkunden, suchen Sie über die Befehlspalette (Cmd/Ctrl + Shift + P oder F1).

📝 Bearbeiten Sie nach Belieben, führen Sie Ihre Anwendung wie gewohnt aus, und wir machen sie Ihnen automatisch zugänglich.

Bei einem typischen npm-gesteuerten Projekt können Sie npm run Ihre Skripte ausführen und Sie erhalten eine URL, auf der das Projekt als Vorschau läuft.

Das ist im gleichen Revier wie Gitpod.

Gitpod ist sehr ähnlich wie GitHub CodeSpaces, da es VS Code im Browser ist, aber mit einem funktionierenden Terminal. Dieses Terminal ist wie eine vollwertige Docker/Linux-Umgebung, sodass Sie dort viel Leistung haben. Es könnte sogar Ihre Produktionsumgebung nachahmen, vorausgesetzt, Sie verwenden alles, was Gitpod unterstützt.

Es ist auch erwähnenswert, dass Gitpod „Workspaces“ integriert, die Dienste ausführen. Auf dem obigen Demo-Projekt läuft eine MongoDB-Instanz auf einem Port und ein Vorschau-Server ist auf einem anderen Port geöffnet, den Sie in einer simulierten Browseroberfläche sehen können. Die Möglichkeit, das Projekt, an dem Sie arbeiten, in der Vorschau anzuzeigen, ist ein absolutes Muss, und sie handhaben das elegant.

Vielleicht erinnern Sie sich, dass wir Gitpod in einem Video über DataStax Astra verwendet haben (jumplink), was sehr gut funktioniert hat.

Meine (absolute) Vermutung ist, dass Gitpod von Microsoft übernommen werden könnte. Es scheint, dass Microsoft genau in diese Richtung geht und gekauft zu werden ist sicherlich besser, als von dem Unternehmen überrollt zu werden, das die Kerntechnologie herstellt, die Sie verwenden. Sie müssen eine Weile die „Nein – das ist gut! Es validiert den Markt! Wir haben Ihnen einen unbeholfenen Kuchen gebacken!“-Haltung einnehmen, aber ich kann mir nicht vorstellen, dass es gut endet.

Das ist auch sehr ähnlich wie CodeSandbox oder Stackblitz.

Ganz offen gesagt, CodeSandbox und Stackblitz führen auch VS Code im Browser aus. Oder… etwas, das zumindest Teile von VS Code nutzt (eine aktuelle Folge von Syntax geht ein wenig auf den StackBlitz-Ansatz ein).

Sie können VS Code auch auf Ihrem eigenen Server installieren.

Das ist, was Coder's code-server ist. Anstatt also die Webversion von VS Code eines anderen zu verwenden, verwenden Sie Ihre eigene.

Sie könnten VS Code auf einem lokalen Server ausführen, aber ich stelle mir vor, dass der große Vorteil darin besteht, dass Sie es auf Live-Cloud-Webservern ausführen, die Sie kontrollieren. Vielleicht Server, auf denen Ihr Code läuft, damit Sie dies verwenden können, um die Dateien auf dem Server buchstäblich zu bearbeiten. Wer braucht VIM, wenn man vollwertiges VS Code hat (lolz).

Wir haben den Anwendungsfall Schule angesprochen, und ich stelle mir vor, dass dies auch hier überzeugend ist, da die Schule sich möglicherweise nicht einmal auf einen Drittanbieterdienst verlässt, sondern ihn selbst hostet. Die Anwendungsfälle für iPad/Chromebook sind auch hier relevant, und vielleicht sogar noch mehr. Die Dokumentation besagt: „Sparen Sie Akkulaufzeit unterwegs; alle intensiven Aufgaben werden auf Ihrem Server ausgeführt“, was bedeutet, dass im Gegensatz zu vscode.dev Aufgaben wie „In Projekt suchen“ (vermutlich) auf Ihrem lokalen Rechner ausgeführt werden, sie aber vom Server ausgeführt werden (vielleicht langsamer, aber nicht langsamer als ein 200-Dollar-Laptop?).

---

Es ist eindeutig etwas in der Luft bei all dem. Ich bin optimistisch für webbasierte IDEs. Schauen Sie sich einfach an, was mit Figma passiert (das den Markt erobert), was meiner Meinung nach zu einem Drittel auf den Produktbesprechungen beruht, die Screen-Designer benötigen, mit wenig Bloat, zu einem Drittel auf dem einfachen Team- und Berechtigungsmodell und zu einem Drittel auf der Tatsache, dass es web-first entwickelt wurde.