Vue-Entwicklung aus der Ferne Remote programmieren mit VS Code unter WSL

Visual Studio Code ist der beliebteste Code-Editor für JavaScript und somit auch für Angular- oder Vue-Projekte. Der Editor birgt einige innovative Features. Eines davon ist die Möglichkeit, den Quellcode remote zu bearbeiten – auf anderen Maschinen, in Containern oder im Windows Subsystem for Linux.

Der Remote-Ansatz von Visual Studio (VS) Code klingt erst mal kompliziert, bietet aber gewisse Vorteile. Beispielsweise kann man so auf dem Betriebssystem entwickeln und testen, auf dem die Software später auch laufen wird. Außerdem lassen sich liebgewonnene Werkzeuge und Programmiersprachen aus der Linux-Welt benutzen.

Vielleicht am spannendsten ist aber die Möglichkeit, für jedes Projekt eine frische Umgebung aufsetzen zu können – mit einem frischen Betriebssystem ohne zahlreiche Versionen veralteter Software, ohne Registry-Einträge und Umgebungsvariablen. Und das noch sehr schnell und ohne viel Overhead. Mit diversen Virtualisierern geht das natürlich auch, komplette virtuelle Betriebssysteme sind aber eine eher schwergewichtige und ressourcenfressende Lösung.

Einrichten von WSL

Einen anderen Weg geht WSL, das Windows Subsystem für Linux, aktuell in der Version 2. Es handelt sich dabei um einen unter Windows laufenden echten Linux-Kernel, der auf dem Stable-Branch von kernel.org basiert.

Aktuelle Voraussetzung für die Nutzung des WSL ist Windows 10 (Version 2004 bzw. Build 19041 und höher) oder Windows 11. Um herauszufinden, ob die Bedingungen erfüllt sind, öffnet man ein Ausführen-Fenster (Windows-Taste + R) und gibt dort das Kommando …

… ein. Ist das Betriebssystem jung genug, erfolgt die Installation des Subsystems für Linux in der Windows-Power-Shell mit folgendem Kommando:

Nach erfolgter Installation kann man sich mit „wsl --help“ die möglichen WSL-Kommandos ausgeben lassen. Mit ihnen ist es beispielsweise möglich, die installierten Distributionen aufzulisten oder zwischen ihnen zu wechseln. Auch ohne erfolgte wsl-Installation ist es möglich, mittels …

… abzufragen, welche Distros zur Verfügung stehen.

Die Linux-Distributionen lassen sich aber auch bequem über den Microsoft-Store laden. Dort stehen zum Beispiel Ubuntu, Debian oder SuSE zur Verfügung. Der Start der installierten Distribution erfolgt über das Windows Startmenü. Im sich öffnenden Fenster wählt man zunächst die Sprache aus und legt einen Benutzer an. Ist das geschehen, kann nach einem Neustart die Arbeit mit der Distribution beginnen.

Node und Vite in der Linux-Distribution

Als Beispiel soll hier ein Vue-Projekt remote bearbeitet werden. Dazu wird in Ubuntu zunächst eine aktuelle Version (hier 14) von node und npm installiert.

Der Erfolg der Operation lässt sich danach mit den beiden folgenden Kommandos überprüfen:

Das Anlegen des Vue 3-Projekts erfolgt mit Vite:

Danach wird mit cd ins Projektverzeichnis gewechselt, die Abhängigkeiten geladen und der Entwicklungsserver gestartet:

Das Projekt ist danach im (Windows!)-Browser unter http://localhost:5173/ erreichbar.

Das Öffnen des Projekts mit Visual Studio Code erfolgt am einfachsten aus dem Ubuntu-Fenster durch die Eingabe des folgenden Befehls, ausgeführt im Projektverzeichnis:

Nach der darauffolgenden Installation der Server-Komponente von VS Code öffnet sich das Projekt im (unter Windows laufenden!) VSC-Editor. Einen Hinweis auf die Remote-Funktionalität findet man in der linken unteren Ecke von Visual Studio Code, dort wird als Remote Host WSL: Ubuntu-22.04 aufgeführt. Bewegt man den Mauszeiger über eine Datei wird im Popover ein Linux-Pfad angezeigt.

Wer immer noch zweifelt, kann ein Terminal in VSCode öffnen und dort beispielsweise …

…zur Ausgabe der Linux-Version eingeben. Der Quellcode befindet sich ohne Zweifel im Ubuntu-Linux unter WSL und wird vom unter Windows laufenden Visual Studio Code bearbeitet. Das ist wohl noch keine Magie, aber schon irgendwie cool.

Klickz man in Visual Studio Code eine der .vue-Dateien an, empfiehlt VSCode die nützliche Erweiterung Volar in wsl zu installieren. Aus Performance-Gründen läuft die Erweiterung auf dem Remote-Host, also unter Ubuntu. Die Einrichtung ist damit abgeschlossen, es darf programmiert werden.

Versionsverwaltung mit Git

Der Code auf dem Remote-Host sollte natürlich gesichert werden. Wird das Host-Betriebssystem deinstalliert, ist er sonst verloren. Das fühlt sich noch ein wenig heikler an, als wenn er direkt im Windows-Dateisystem liegen würde. Ubuntu kommt aber defaultmäßig mit Git, so dass das die Anbindung an ein entsprechendes Repository schnell erledigt ist. Für Github etwa wird dafür ein ssh-Key erzeugt:

Den kann man dann kopieren und bei Github hinterlegen. Das Anlegen des Git-Repositories im Projektverzeichnis entspricht dem üblichen Vorgehen:

Anschließend lässt sich Git ohne Probleme auch direkt aus VSCode heraus benutzen. Auch wenn Linux-Fans nun fragen werden, warum man nicht gleich unter Linux arbeitet: In den meisten Unternehmen ist Windows immer noch erste Wahl (zumindest auf dem Desktop). WSL ermöglicht aber das Beste aus zwei Welten: Das am meisten verbreitete Desktop-Betriebssystem mit der größten Anwendungsauswahl und dazu die leistungsstarke Linux-Umgebung, auf der die fertigen Anwendungen in vielen Fällen später ja auch produktiv laufen sollen.

(ID:48548633)