Dieser Artikel ist Teil unserer Serie zur modernen WSL 2 Webentwicklung.

Du möchtest VS Code WSL 2 einrichten und endlich die volle Performance deiner Hardware nutzen? Hand aufs Herz: Früher war Webentwicklung unter Windows oft ein fauler Kompromiss. Wir kämpften mit trägen virtuellen Maschinen oder halbgaren Toolchains. Mit der Einführung von WSL 2 hat Microsoft das Spielfeld jedoch fundamental verändert.

Heute ist Windows eine vollwertige Plattform für Cloud-native Entwicklung. In diesem Teil zeige ich dir Schritt für Schritt, worauf du achten musst, wenn du VS Code WSL 2 einrichten willst, damit sich dein Setup anfühlt wie ein nativer Linux-Rechner.

Das Konzept verstehen: Client vs. Server

Bevor wir tippen, müssen wir kurz die Motorhaube öffnen. Viele Anfänger machen beim VS Code WSL 2 einrichten den Fehler, den Editor einfach als Linux-App zu installieren. Doch VS Code arbeitet in diesem Setup am besten nach einem cleveren Client-Server-Prinzip:

Der Client (Windows): Die grafische Oberfläche läuft nativ auf Windows. Sie ist für deine Grafikkarte und Maus optimiert.
Der Server (WSL): In deiner Linux-Distribution läuft ein kleiner VS Code Server. Er führt die Befehle aus und indiziert Dateien.

Warum ist das wichtig? Installiere VS Code niemals direkt als GUI-App in der WSL. Installiere es unter Windows. Die Extension verbindet beide Welten.

Schritt 1: Die Basis-Installation

Wir setzen voraus, dass WSL 2 bereits läuft (siehe Teil 1-5 der Serie). Um VS Code WSL 2 einrichten zu können, benötigst du auf Windows-Seite:

Visual Studio Code (ganz normaler Windows-Installer).
Die Extension "WSL" (ehemals "Remote - WSL") von Microsoft aus dem Marketplace.

Schritt 2: Der Dateisystem-Fehler (Performance-Killer Nr. 1)

Das ist der wichtigste Punkt beim VS Code WSL 2 einrichten: Dein Code gehört in das Linux-Dateisystem.

Viele Entwickler legen ihre Projekte unter C:\Users\Name\Projects ab und greifen via WSL darauf zu. Tu das nicht. Der Zugriff über die Dateisystemgrenzen hinweg (9p-Protokoll) bremst Dateioperationen massiv aus.

Richtig ist: Speichere deine Projekte im Home-Verzeichnis von Linux: \\wsl.localhost\Ubuntu\home\DeinUser\projects

Praxis-Beispiel: Projekt korrekt starten

Lass uns das VS Code WSL 2 einrichten in der Praxis testen. Wir erstellen ein kleines Projekt direkt in der Linux-Umgebung.

1. Terminal öffnen & navigieren

Öffne dein Windows Terminal (Ubuntu-Profil) und gehe in dein Linux-Home (nicht /mnt/c!):

cd ~
mkdir projects
cd projects
mkdir mein-wsl-test
cd mein-wsl-test

2. Die Magie des `code .` Befehls

Tippe nun:

code .

Was passiert? WSL weist Windows an, VS Code zu starten, und installiert automatisch den Server-Teil in Linux. Schau unten links in die Statusleiste: Dort muss >< WSL: Ubuntu stehen. Das ist der Beweis, dass wir das VS Code WSL 2 einrichten erfolgreich gemeistert haben.

Die Remote-Erweiterung arbeitet nahtlos mit Containern zusammen, vorausgesetzt du hast Docker unter WSL 2 korrekt eingerichtet.

Extensions: Wo läuft was?

Ein Fallstrick beim VS Code WSL 2 einrichten sind die Erweiterungen. Das Extensions-Menü unterscheidet nun:

Local (Windows): Themes, Icons, Keymaps.
WSL: Ubuntu: Hier müssen Tools wie ESLint, Python oder PHP Intelephense installiert sein.

Achte im Marketplace immer auf den Button "Install in WSL: Ubuntu", damit deine Tools direkten Zugriff auf den Code haben.

VS Code bietet eine tolle Git-Integration. Für die tiefergehende Konfiguration (SSH-Keys, Signing) empfehlen wir unseren Git Workflow Guide.

Fazit: Das Beste aus zwei Welten

Wenn du dich an diese Anleitung hältst und korrekt VS Code WSL 2 einrichten konntest, arbeitest du ab sofort:

Schnell: Dank nativem ext4-Dateisystem.
Kompatibel: Mit echten Linux-Toolchains.
Komfortabel: Mit gewohnter Windows-UI.

#vscode

VS Code WSL 2 einrichten: Der Goldstandard für Webentwicklung