Tutorials

Gemeinsam Coden: Der ultimative Guide für VS Code Live Share bei Gruppenarbeiten

Melden

Visual Studio Code (VS Code) ist einer der beliebtesten Code-Editoren weltweit. Das beste Feature für Teamprojekte, Pair Programming oder Gruppenarbeiten im Studium und Beruf ist VS Code Live Share.

Im Gegensatz zur einfachen Bildschirmübertragung ermöglicht Live Share das gleichzeitige, interaktive Arbeiten im selben Code – ähnlich wie in Google Docs, aber direkt in eurer gewohnten Entwicklungsumgebung. In diesem Guide erfährst du Schritt für Schritt, wie du und dein Team Live Share optimal nutzt.

1. Voraussetzungen

Bevor es losgeht, sollten alle Gruppenmitglieder Folgendes bereithalten:

  • Ein installiertes Visual Studio Code.
  • Ein GitHub- oder Microsoft-Konto (wird für die Anmeldung benötigt).
  • Eine stabile Internetverbindung.

2. Installation der Erweiterung

Jedes Gruppenmitglied muss die Erweiterung in VS Code installieren.

  1. Öffne VS Code.
  2. Klicke links in der Seitenleiste auf das Symbol für Erweiterungen (oder drücke Strg + Umschalt + X bzw. Cmd + Shift + X auf dem Mac).
  3. Suche nach „Live Share“ (herausgegeben von Microsoft).
  4. Klicke auf Installieren.
    • Tipp: Es empfiehlt sich, direkt das „Live Share Extension Pack“ zu installieren, da es nützliche Audio-Features für die Kommunikation enthält.

Nach der Installation erscheint ein neues Live-Share-Symbol in der linken Aktivitätsleiste sowie unten in der Statusleiste.

3. Als Host: Eine Sitzung starten

Die Person, auf deren Computer das Projekt liegt, fungiert als Host.

  1. Projekt öffnen: Öffne den Projektordner in VS Code (Datei > Ordner öffnen...).
  2. Sitzung starten:
    • Klicke ganz unten in der blauen/lila Statusleiste auf „Live Share“ oder gehe in das Live-Share-Menü links und wähle „Zusammenarbeitssitzung starten (Host)“.
  3. Anmelden: Falls noch nicht geschehen, fordert VS Code dich auf, dich mit deinem GitHub- oder Microsoft-Konto anzumelden. Bestätige dies im Browser.
  4. Link teilen: Sobald die Sitzung aktiv ist, wird automatisch ein Einladungslink in deine Zwischenablage kopiert (sieht z. B. so aus: https://vsls.info/...).
  5. Teile diesen Link mit deiner Gruppe (z. B. via Discord, Teams oder Slack).

4. Als Teilnehmer: Einer Sitzung beitreten

Die übrigen Gruppenmitglieder können nun beitreten:

  1. Klicke einfach auf den geteilten Einladungslink im Chat.
  2. Der Browser fragt, ob VS Code geöffnet werden soll – bestätige dies.
  3. Alternativ direkt in VS Code:
    • Klicke auf das Live-Share-Symbol in der linken Leiste.
    • Wähle „Zusammenarbeitssitzung beitreten...“.
    • Füge den Link aus der Zwischenablage ein und drücke Enter.

(Hinweis: Man kann sogar über den Browser via vscode.dev beitreten, falls jemand gerade keinen Rechner mit installiertem VS Code zur Hand hat!)

5. Die wichtigsten Features für erfolgreiche Gruppenarbeit

Sobald alle verbunden sind, könnt ihr nicht nur gleichzeitig tippen. Live Share bietet mächtige Werkzeuge:

A. Gemeinsames Editieren & „Folgen“ (Focus Mode)

  • Gleichzeitig schreiben: Ihr seht die Cursor der anderen Personen mit Namen und unterschiedlichen Farben in Echtzeit.
  • Jemandem folgen: Klicke in der Live-Share-Seitenleiste auf den Namen eines Teammitglieds, um dessen Cursor zu folgen. Nützlich, wenn jemand etwas erklärt.
  • Fokus erzwingen (Host-Feature): Klicke oben im Live-Share-Menü auf das Megafon-Symbol („Teilnehmer fokussieren“), damit alle sofort zu deiner aktuellen Datei und Zeile springen.

B. Geteilte Terminals (Shared Terminals)

Der Host kann sein Terminal freigeben, damit Befehle (z. B. npm test oder python main.py) ausgeführt werden können:

  1. Öffne das Terminal in VS Code.
  2. Klicke im Live-Share-Bereich auf das Terminal-Icon mit dem Pluszeichen.
  3. Wähle zwischen:
    • Read-only (Nur Lesen): Das Team sieht die Ausgaben, kann aber nichts eintippen (empfohlen!).
    • Read/Write (Schreiben & Lesen): Das Team kann eigene Befehle auf dem PC des Hosts ausführen (Vorsicht: Nur bei vollem Vertrauen nutzen!).

C. Lokale Server teilen (Port Forwarding)

Arbeitet ihr an einer Web-App (z. B. auf localhost:3000)?

  • Der Host kann unter dem Reiter Ports in der Live-Share-Ansicht einen Port teilen (z. B. 3000).
  • Alle Gruppenmitglieder können nun in ihrem eigenen Browser http://localhost:3000 aufrufen und die Website sehen – ohne die Server-App selbst lokal auszuführen!

D. Gemeinsames Debugging

Startet der Host eine Debugging-Sitzung, wird diese für alle synchronisiert. Jeder kann Breakpoints setzen, Variablen inspizieren und Einzelschritte durch den Code gehen.

6. Sicherheit und Berechtigungen verwalten

  • Schreibschutz (Read-only): Wenn du nur deinen Code präsentieren möchtest, kannst du die Sitzung schreibgeschützt starten (über die Befehlspalette: Strg + Umschalt + P > „Live Share: Start Read-Only Collaboration Session“).
  • Gäste genehmigen: In den VS Code-Einstellungen kannst du festlegen, dass du jeden Beitritt erst manuell bestätigen musst (liveshare.guestApprovalRequired).
  • Dateien ausschließen: Erstelle eine .vsls.json-Datei im Projekt, um sensible Daten (wie .env-Dateien mit Passwörtern) vor den Gästen zu verbergen.

7. Best Practices für Teamarbeit

  1. Kommunikation nebenbei laufen lassen: Nutzt parallel Sprach-Chat (Discord, Teams, Zoom), um euch abzusprechen, wer an welcher Funktion arbeitet.
  2. Git-Verwaltung dem Host überlassen: Zwar können alle tippen, aber Git-Commits und Pushes sollte in der Regel der Host ausführen, um Konflikte zu vermeiden.
  3. Aufgabenteilung einhalten: Nutzt Kommentare im Code (z. B. // TODO: Sarah kümmert sich um diese Funktion), damit ihr euch nicht gegenseitig im selben Block überschreibt.

Fazit

VS Code Live Share nimmt Gruppenarbeiten im Bereich Softwareentwicklung den Schrecken. Keine fehlerhaften Datei-Zips per Mail, kein mühsames Git-Rebasen bei winzigen Fehlern: Ihr sitzt virtuell am selben Rechner und löst Probleme gemeinsam in Rekordzeit.

0