So verwenden Sie den VS Code Agent-Modus für Anfänger

Haben Sie schon von VS Code Agent Mode gehört?

Wenn Sie Visual Studio Code (VS Code) verwenden, wird diese Funktion bald Ihr neuer bester Freund sein. Stellen Sie sich vor, Sie hätten einen KI-Sidekick, der nicht nur Code vorschlägt, sondern tatsächlich die schwere Arbeit erledigt – Dateien bearbeitet, Befehle ausführt und Fehler behebt – während Sie Ihren Kaffee trinken und zustimmend nicken.

Das ist Agent Mode in aller Kürze, und heute führe ich Sie Schritt für Schritt durch die Verwendung, mit einer unterhaltsamen, anfängerfreundlichen Atmosphäre. Tauchen wir ein in die Welt des VS Code Agent Mode und sehen wir, wie er Ihr Coding-Spiel auf Hochtouren bringen kann!

Was ist VS Code Agent Mode? Eine kurze Einführung

Also, worum geht es bei diesem VS Code Agent Mode? Stellen Sie sich GitHub Copilot – den KI-gestützten Assistenten von VS Code – vor, der sich von einem „hilfreichen Vorschlager“ zu einem „autonomen Coder“ entwickelt. Im Agent Mode sitzt Copilot nicht einfach nur da und wartet darauf, dass Sie tippen; er übernimmt die Führung. Sie geben ihm eine übergeordnete Aufgabe – wie „Erstelle mir eine To-Do-App“ – und er findet die zu ändernden Dateien heraus, schreibt den Code, führt Befehle aus und behebt sogar Fehler, alles von selbst. Es ist wie Pair Programming mit einem Roboter, der nie schläft!

Ab dem 10. April 2025 wird der Agent Mode aktiv entwickelt und ausgerollt, vollgepackt mit Goodies wie Model Context Protocol (MCP)-Unterstützung, was bedeutet, dass er auf externe Tools und Daten zugreifen kann. Egal, ob Sie ein Neuling oder ein Profi sind, dies ist ein Game-Changer. Bereit, es auszuprobieren? Lassen Sie uns es einrichten!

Warum Sie die Verwendung von VS Code Agent Mode lieben werden

Bevor wir uns der Praxis zuwenden, wollen wir darüber sprechen, warum VS Code Agent Mode so gut ist:

• Hands-Off-Coding: Sagen Sie ihm, was Sie wollen, und er erledigt die Arbeit – perfekt für Aufgaben mit mehreren Schritten.
• Intelligente Korrekturen: Er fängt Fehler (wie Syntaxfehler oder fehlgeschlagene Tests) ab und kehrt zurück, um sie zu beheben.
• Tool-Power: Er verwendet integrierte Tools, MCP-Server und Erweiterungen, um über einfache Bearbeitungen hinauszugehen.
• Sie haben die Kontrolle: Sie genehmigen jede Änderung, also keine Schurken-KI-Katastrophen.

Stellen Sie es sich als Ihren persönlichen Coding-Assistenten vor, der immer einen Schritt voraus ist. Nun, lassen Sie uns es zum Laufen bringen!

So richten Sie den VS Code Agent Mode ein: Schritt für Schritt

Der Einstieg in den VS Code Agent Mode ist ein Kinderspiel. So schalten Sie den Schalter um und entfesseln die Magie:

Schritt 1: Aktualisieren Sie VS Code

Zuerst einmal – stellen Sie sicher, dass Sie eine aktuelle Version von VS Code verwenden, die den Agent Mode unterstützt. Gehen Sie zu code.visualstudio.com, laden Sie die Stable-Version herunter oder verwenden Sie Insiders für hochmoderne Funktionen.

Schritt 2: Agent Mode aktivieren

Der Agent Mode ist möglicherweise nicht standardmäßig aktiviert, je nach Ihrer Version und Ihrem Rollout-Status. So können Sie ihn möglicherweise einschalten:

Öffnen Sie VS Code.

Drücken Sie Strg + , (oder Cmd + , auf dem Mac), um die Einstellungen zu öffnen.

Suchen Sie nach chat.agent.enabled und stellen Sie sicher, dass es angekreuzt ist.

Wenn Sie es nicht sehen, laden Sie VS Code nach der Aktualisierung neu – es könnte auftauchen, wenn es in Ihrem Build verfügbar ist. Suchen Sie nach Updates über Hilfe > Nach Updates suchen.

Profi-Tipp: Dieser Schritt wird möglicherweise überflüssig, da der Agent Mode breiter ausgerollt wird. Im Moment bringt Sie dieser Schalter (falls vorhanden) frühzeitig rein!

Schritt 3: Melden Sie sich bei GitHub an

Der VS Code Agent Mode läuft auf GitHub Copilot, daher benötigen Sie ein aktives Abonnement.

Klicken Sie in VS Code auf das Copilot-Symbol in der Seitenleiste (oder verwenden Sie die entsprechende Verknüpfung, z. B. Strg+Umschalt+I / Cmd+Umschalt+I für den Copilot-Bereich).

Melden Sie sich mit Ihren GitHub-Anmeldeinformationen an. Wenn Sie kein Copilot-Abonnement haben, müssen Sie sich möglicherweise über GitHub anmelden.

Schritt 4: Öffnen Sie die Chat-Ansicht & wählen Sie den Agent Mode aus

Nun, kommen wir zum Spaß:

Öffnen Sie die Copilot Chat-Ansicht (Strg+Umschalt+I / Cmd+Umschalt+I).

Suchen Sie nach dem Modus-Dropdown-Menü am unteren Rand des Chat-Eingabebereichs – es könnte „Fragen“, „Bearbeiten“ oder „Agent“ anzeigen.

Wählen Sie Agent. Boom – Sie sind im VS Code Agent Mode!

So verwenden Sie den VS Code Agent Mode: Bauen wir etwas!

Okay, das Setup ist erledigt – Zeit, den Agent Mode in Aktion zu sehen! Bauen wir gemeinsam eine einfache React-To-Do-App. Schnappen Sie sich einen leeren VS Code-Arbeitsbereich und machen Sie mit.

Schritt 1: Geben Sie ihm eine Aufgabe

Geben Sie in der Chat-Ansicht (mit ausgewähltem Agent Mode) eine klare, übergeordnete Aufgabe ein. Zum Beispiel:

>> Erstellen Sie eine einfache React-To-Do-Anwendung. Sie sollte ein Eingabefeld zum Hinzufügen von Aufgaben haben und die Liste der Aufgaben anzeigen.

Drücken Sie die Eingabetaste. Sie müssen keine Dateien angeben – der Agent Mode findet das heraus!

Schritt 2: Beobachten Sie, wie sich der Plan entfaltet

Copilot beginnt, zurückzuchatten und seinen Denkprozess zu streamen. Es könnte sagen:

"Okay, dabei kann ich helfen. Hier ist der Plan:

1. Richten Sie eine grundlegende React-Projektstruktur ein (falls erforderlich).
2. Erstellen Sie die Hauptkomponente App.js, um den Zustand zu verwalten.
3. Erstellen Sie eine TodoForm.js-Komponente für das Eingabefeld.
4. Erstellen Sie eine TodoList.js-Komponente, um die Aufgaben anzuzeigen. Ich beginne mit der Erstellung der erforderlichen Dateien..."

Es ist, als würde man einem Freund beim Live-Codieren zusehen! Es wird auch Terminalbefehle vorschlagen – wie npm init react-app, wenn Ihr Projekt neu ist.

Schritt 3: Genehmigen Sie die Tools

Der Agent Mode muss möglicherweise Tools verwenden – z. B. npm install ausführen oder integrierte Dateioperationen verwenden. Sie sehen Eingabeaufforderungen wie:

"Ausführen

npm install react react-dom

#terminal

#filesystem

src/App.js

Klicken Sie auf „Weiter“, um dies zu genehmigen (oder den Befehl zuerst zu optimieren). Möglicherweise können Sie Tools für die Sitzung über ein Dropdown-Menü automatisch genehmigen – praktisch, aber verwenden Sie es mit Bedacht!

Schritt 4: Überprüfen Sie die Bearbeitungen

Während der Agent Mode arbeitet, werden Code-Streams mit Überlagerungen, die Änderungen anzeigen (Diff-Ansichten), in Ihren Editor übertragen. Für unsere To-Do-App könnten Sie Folgendes sehen:

App.js aktualisiert mit Zustandsverwaltung (useState) für Aufgaben.

Eine neue Datei src/TodoForm.js mit einem Formular und einem Eingabeelement.

Eine neue Datei src/TodoList.js, die die Listenelemente rendert.

Navigieren Sie mit den Auf-/Abwärtspfeilen in der Überlagerung oder im Diff-Viewer durch die Bearbeitungen und klicken Sie dann auf „Akzeptieren“ (oder eine ähnliche Schaltfläche), um Änderungen beizubehalten, oder auf „Verwerfen“, um sie abzulehnen. Die Chat-Ansicht listet normalerweise geänderte Dateien auf, wodurch es einfach ist, den Überblick zu behalten.

Schritt 5: Iterieren und verfeinern

Nicht perfekt? Sagen Sie dem Agent Mode, was als Nächstes behoben oder hinzugefügt werden soll:

>> Fügen Sie jetzt Funktionalität hinzu, um Aufgaben als erledigt zu markieren, wenn darauf geklickt wird, und ändern Sie die Schriftfarbe für Aufgaben, die der To-Do-Liste hinzugefügt wurden, in Schwarz.

Der Agent Mode kehrt zurück, analysiert die Anfrage, schlägt Änderungen vor, führt Tests aus (falls in tasks.json konfiguriert) und aktualisiert den Code. Er wird so lange weitermachen, bis er es geschafft hat – oder Sie ihn pausieren.

VS Code Agent Mode meistern: Tipps und Tricks

Nachdem Sie nun die Grundlagen kennen, wollen wir Ihre VS Code Agent Mode-Fähigkeiten verbessern!

• Verwenden Sie spezifische Eingabeaufforderungen: Vage Aufgaben wie „Erstelle eine App“ können weniger effektiv sein. Versuchen Sie es mit fokussierten Zielen: „Fügen Sie meiner React-App mit der Context-API einen Dark-Mode-Schalter hinzu.“ oder „Refactor dieses Python-Skript utils.py, um Klassen für eine bessere Organisation zu verwenden.“ Klare Ziele = bessere Ergebnisse!
• Nutzen Sie Tools mit # (oder anderer Syntax): Möchten Sie, dass der Agent Mode eine bestimmte Funktion verwendet? Verwenden Sie die dafür vorgesehene Syntax (z. B. #).
• #terminal zum Ausführen von Befehlen.
• #codebase, um Ihr Projekt nach relevantem Kontext zu durchsuchen.
• #fetch, um Daten von einer URL abzurufen. Überprüfen Sie die verfügbaren Tools (oft durch ein Symbol oder einen Befehl gekennzeichnet) im Chat-Eingabebereich.

• Pausieren oder Abbrechen, wenn nötig: Wenn der Agent Mode aus dem Ruder läuft (z. B. die falsche Datei bearbeitet oder stecken bleibt), klicken Sie auf „Pausieren“, um Ihre Eingabeaufforderung zu verfeinern, oder auf „Abbrechen“, um den aktuellen Vorgang zu stoppen. Sie können oft immer noch die nützlichen Änderungen akzeptieren, die bisher vorgenommen wurden.
• Rückgängig machen wie ein Profi: Einen Fehler gemacht, indem Sie Änderungen akzeptiert haben? Verwenden Sie „Letzte Bearbeitung rückgängig machen“ (oder einen ähnlichen Befehl, der sich oft in der Nähe des Chat-Eingabe-/Titelleiste befindet), um einen Rollback durchzuführen. Ihre Meinung geändert? „Letzte Bearbeitung wiederholen“ könnte es zurückbringen. Es ist wie Strg+Z/Cmd+Z für KI!

• Einstellungen optimieren (falls verfügbar): Gehen Sie zu Einstellungen (Strg + ,) und suchen Sie nach relevanten Agent Mode- oder Copilot Chat-Einstellungen. Möglicherweise finden Sie Optionen wie:
• chat.agent.maxRequests: Begrenzen Sie, wie viele Schritte/Iterationen es dauert.
• github.copilot.chat.agent.runTasks: Schalten Sie die automatische Ausführung von Workspace-Aufgaben (wie Builds/Tests, die in tasks.json definiert sind) um.

Agent Mode vs. Edit Mode: Wann was verwenden?

Verwirrt über Agent Mode vs. Edit Mode im Copilot Chat? Hier ist die Erklärung:

• Agent Mode: Am besten für große, mehrstufige Aufgaben, bei denen Sie möchten, dass die KI den Plan herausfindet, Dateien verwaltet und sich möglicherweise selbst korrigiert (z. B. „Erstelle eine Funktion“, „Refactor dieses Moduls“). Es ist autonomer.
• Edit Mode (oder Inline Chat): Perfekt für schnelle, überschaubare Änderungen innerhalb der aktuellen Datei oder Auswahl (z. B. „Beheben Sie diese Funktion“, „Benennen Sie diese Variable um“, „Fügen Sie hier eine Fehlerbehandlung hinzu“). Sie haben mehr direkte Kontrolle über den Umfang.

Wenn Sie sich nicht sicher sind, welche Dateien geändert werden müssen oder wie Sie eine größere Aufgabe angehen sollen, lassen Sie den Agent Mode die Führung übernehmen. Benötigen Sie präzise Änderungen an einer bestimmten Stelle? Bearbeiten ist oft schneller.

Fazit: Ihr KI-Pair-Programmierer ist da

Der VS Code Agent Mode stellt einen bedeutenden Schritt in Richtung KI-gestützter Entwicklung dar. Indem Sie komplexe, mehrstufige Codierungsaufgaben an GitHub Copilot delegieren, können Sie sich mehr auf das übergeordnete Design, die Problemlösung und die Überprüfung des generierten Codes konzentrieren. Sie haben gesehen, wie man es einrichtet, es durch den Aufbau einer einfachen Anwendung führt und die Ergebnisse verfeinert. Obwohl es klare Anweisungen und eine sorgfältige Überprüfung erfordert, hat der Agent Mode das Potenzial, Entwicklungsabläufe drastisch zu beschleunigen und Codierungsherausforderungen effizienter anzugehen.

Bereit, Ihren neuen KI-Pair-Programmierer auszuprobieren? Starten Sie VS Code, stellen Sie sicher, dass Copilot eingerichtet ist, wechseln Sie zum Agent Mode und geben Sie ihm eine echte Aufgabe aus Ihrem aktuellen Projekt. Was werden Sie zuerst erstellen oder refaktorieren?