Erste Schritte mit Chat in VS Code

Dieses Tutorial führt Sie durch die Verwendung von Chat in Visual Studio Code. Sie verwenden KI-gestützte Chat-Konversationen, um Ihren Code zu refaktorieren, Ihr Code-Verständnis zu verbessern und sich in der Konfiguration von VS Code zurechtzufinden.

Wenn Sie neu in der Verwendung von Copilot in VS Code sind, lesen Sie die Copilot-Übersicht oder richten Sie es ein und entdecken Sie die wichtigsten Funktionen im Copilot-Quickstart.

Voraussetzungen

Um GitHub Copilot in VS Code zu verwenden, benötigen Sie Folgendes:

• Zugang zu GitHub Copilot
• Installierte GitHub Copilot-Erweiterungen in VS Code

Folgen Sie den Schritten im GitHub Copilot-Einrichtungsleitfaden, um Zugang zu GitHub Copilot zu erhalten und die Copilot-Erweiterungen in VS Code zu installieren.

Führen Sie Ihre erste Chat-Konversation

Chat ermöglicht es Ihnen, über natürliche Sprache mit GitHub Copilot zu interagieren, um Fragen zu Code-bezogenen Themen zu stellen und Antworten zu erhalten.

In diesem Tutorial erstellen Sie eine einfache Node.js-Webanwendung.

1. Öffnen Sie ein neues VS Code-Fenster. Sie erstellen einen neuen Arbeitsbereich in einem nachfolgenden Schritt.

2. Wählen Sie im Chat-Menü in der Titelleiste Chat öffnen oder verwenden Sie die Tastenkombination ⌃⌘I (Windows, Linux Ctrl+Alt+I).

   

   Beachten Sie, dass sich die Chat-Ansicht in der sekundären Seitenleiste öffnet. Wenn die Chat-Ansicht an der Seite ist, können Sie die Konversation fortsetzen, während Sie an Ihrem Code arbeiten.

3. Wählen Sie in der Chat-Ansicht im Dropdown-Menü für den Chat-Modus Fragen aus.

   Verwenden Sie den Fragemodus, um Fragen zu Coding- und Technologiethemen zu stellen, Code zu erklären oder Ideen zu sammeln.

   

4. Fragen wir nach beliebten Web-Frameworks. Geben Sie "Was sind die beliebtesten Web-Frameworks?" in das Chat-Eingabefeld ein.

   VS Code gibt eine Liste beliebter Web-Frameworks zurück. Experimentieren Sie, indem Sie Folgefragen stellen, um mehr Informationen zu einem bestimmten Framework zu erhalten oder Frameworks zu vergleichen. Sie können zum Beispiel fragen: "Was sind die Unterschiede zwischen Express und Fastify?" oder "Wie macht man serverseitiges Rendering?".

5. Um eine neue Web-App zu erstellen, geben Sie "neue Express-App mit TypeScript und Pug" in das Chat-Eingabefeld ein.

   Beachten Sie, wie VS Code einen Dateibaum zurückgibt, der die neuen Arbeitsbereichsdateien darstellt. Wählen Sie eine beliebige Datei im Dateibaum aus, um deren Inhalt in der Vorschau anzuzeigen.

   

6. Wählen Sie Arbeitsbereich erstellen, um die App zu erstellen, und wählen Sie einen Ordner auf der Festplatte aus, in dem der Arbeitsbereich erstellt werden soll.

   Wählen Sie im Dialogfeld Öffnen, um den neu erstellten Arbeitsbereich in VS Code zu öffnen.

   Hinweis

   VS Code fragt möglicherweise, ob Sie den neuen Arbeitsbereich vertrauen möchten. Wählen Sie Ja, ich vertraue dem Inhalt, um dem Arbeitsbereich zu vertrauen. Erfahren Sie mehr über Arbeitsbereichsvertrauen.

Bleiben Sie im Fluss mit Inline-Chat

Während die Chat-Ansicht hervorragend für die Fortführung einer Konversation geeignet ist, ist der Inline-Chat im Editor für Situationen optimiert, in denen Sie Copilot zu dem Code fragen möchten, an dem Sie gerade im Editor arbeiten. Zum Beispiel, um ein bestimmtes Codefragment zu refaktorieren oder einen komplexen Algorithmus zu erklären.

Sehen wir uns an, wie man den Inline-Chat im Editor für das Refactoring von Code verwendet.

1. Öffnen Sie die Datei app.ts und verwenden Sie die Tastenkombination ⌘I (Windows, Linux Ctrl+I), um den Inline-Chat im Editor aufzurufen. Alternativ können Sie im Chat-Menü in der Titelleiste Inline-Chat öffnen auswählen.

   Ein Chat-Eingabefeld erscheint inline im Editor, wo Sie Ihre Chat-Anfrage eingeben und Copilot zu dem Code im Editor befragen können.

   

2. Geben Sie "Unterstützung für JSON-Ausgabe hinzufügen" in das Chat-Eingabefeld ein und drücken Sie Enter.

   Beachten Sie, wie Copilot einen Code-Vorschlag zur Unterstützung der JSON-Ausgabe in Express anbietet.

   

3. Wählen Sie Akzeptieren oder Schließen, um die Änderungen zu übernehmen oder zu verwerfen.

   Wenn Sie mit den vorgeschlagenen Codeänderungen nicht zufrieden sind, können Sie die Steuerung Anfrage erneut ausführen auswählen oder eine Folgefrage stellen, um einen weiteren Vorschlag zu erhalten.

Bearbeiten Sie mehrere Dateien

Mit dem Inline-Chat haben Sie Änderungen an einer einzelnen Datei vorgenommen. Sie können Copilot auch verwenden, um Änderungen in mehreren Dateien Ihres Arbeitsbereichs vorzunehmen, indem Sie in der Chat-Ansicht zum Bearbeitungsmodus wechseln.

Lassen Sie uns den Bearbeitungsmodus verwenden, um eine .env-Datei zur Speicherung der Konfiguration für Ihre Web-App zu verwenden.

1. Öffnen Sie die Chat-Ansicht und wählen Sie im Dropdown-Menü für den Chat-Modus Bearbeiten aus.

   

2. Damit Copilot den Umfang Ihrer Anfrage versteht, fügen wir package.json und app.ts als Kontext zur Eingabeaufforderung hinzu.

   1. Wählen Sie in der Chat-Ansicht Kontext hinzufügen aus, geben Sie package in das Suchfeld ein und wählen Sie die Datei package.json aus der Liste der Dateien aus. Beachten Sie, dass viele Arten von Kontext hinzugefügt werden können.

   2. Öffnen Sie die Datei app.ts im Editor und beachten Sie, dass Copilot automatisch die aktive Datei zum Chat-Kontext hinzufügt.

3. Geben Sie "Verwende eine .env-Datei für die Konfiguration" in das Chat-Eingabefeld ein und drücken Sie Enter.

4. Beachten Sie, wie Copilot Aktualisierungen über mehrere Dateien hinweg vornimmt und eine neue .env-Datei zu Ihrem Arbeitsbereich hinzufügt.

   Die Chat-Ansicht zeigt die geänderten Dateien in Fettschrift in der Chat-Ansicht an.

   

5. Wählen Sie in der Chat-Ansicht Beibehalten, um alle vorgeschlagenen Änderungen zu bestätigen.

   Verwenden Sie die Überlagerungssteuerelemente im Editor, um die einzelnen Änderungen über Ihre Dateien hinweg einfach zu navigieren und zu überprüfen.

Starten Sie einen agentenbasierten Coding-Flow

Für komplexere Anfragen können Sie den Agentenmodus verwenden, damit Copilot autonom die notwendigen Aufgaben zur Erfüllung Ihrer Anfrage plant und ausführt. Diese Aufgaben können Codebearbeitungen beinhalten, aber auch das Ausführen von Befehlen im Terminal. Im Agentenmodus kann Copilot verschiedene Werkzeuge aufrufen, um die Aufgabe zu erfüllen.

Lassen Sie uns den Agentenmodus verwenden, um die Web-App zur Weitergabe von Reisetipps zu machen und Tests hinzuzufügen.

1. Öffnen Sie die Chat-Ansicht und wählen Sie im Dropdown-Menü für den Chat-Modus Agent aus.

   

2. Geben Sie "Machen Sie die App zu einem Reise-Blog. Fügen Sie Tests hinzu, um Code-Regression zu vermeiden." in das Chat-Eingabefeld ein und drücken Sie Enter.

   Beachten Sie, dass Sie Ihrer Eingabeaufforderung keinen Kontext hinzufügen müssen. Der Agentenmodus analysiert automatisch den Code in Ihrem Arbeitsbereich.

3. Copilot iteriert, um Codeänderungen anzuwenden und Befehle wie das Ausführen von Tests auszuführen. Bestätigen Sie Terminalbefehle, indem Sie in der Chat-Ansicht Fortfahren auswählen.

   

   Abhängig von der Komplexität Ihrer Anfrage kann Copilot einige Minuten dauern, um alle Aufgaben abzuschließen. Wenn es dabei auf Probleme stößt, iteriert es, um diese zu beheben.

4. Sobald Copilot die Aufgaben abgeschlossen hat, überprüfen Sie die Änderungen und testen Sie die App.

   Sie können Copilot auch bitten, die App auszuführen, indem Sie eine Eingabeaufforderung wie "Führe die App aus" oder "Starte den Server" geben.

Glückwunsch

Herzlichen Glückwunsch, Sie haben Copilot Chat in VS Code erfolgreich verwendet, um Fragen zu stellen und Codeänderungen in Ihrem gesamten Arbeitsbereich vorzunehmen. Experimentieren Sie weiter mit verschiedenen Eingabeaufforderungen und Chat-Modi, um das Beste aus Copilot Chat herauszuholen.

Zusätzliche Ressourcen

• Erhalten Sie einen Überblick über Copilot Chat in VS Code