Visual Studio Code und GitHub Copilot

30. März 2023 von Chris Dias, @chrisdias

KI hat diesen Blogbeitrag nicht geschrieben, aber sie wird Ihre Entwicklungserlebnisse unglaublich machen.

Hinweis: Wenn Sie mehr über die neuesten GitHub Copilot-Erlebnisse in Visual Studio Code erfahren möchten, besuchen Sie das Thema GitHub Copilot in VS Code, wo Sie Details zur Copilot-Editor-Integration und zu Copilot Chat-Funktionen wie Inline-Chat, der dedizierten Chat-Ansicht und dem Schnelldialog finden.

Es gibt heute viel Gerede, Aufregung und einige Bedenken rund um Künstliche Intelligenz. Fortschritte geschehen fast täglich, es ist schwer Schritt zu halten. Aber wenn man es erst einmal ausprobiert hat, erkennt man schnell, was mehr als eine Million Copilot-Nutzer täglich sehen: Diese Technologie enttäuscht nicht, besonders mit großen Sprachmodellen (LLMs) wie dem GPT-3.5/4 von OpenAI.

In diesem Beitrag möchten wir einen kleinen Hintergrund zu KI in VS Code geben, Ihnen einige spannende neue Erlebnisse mit GitHub Copilot zeigen und einen Ausblick darauf geben, wohin und wie wir die Dinge in Zukunft sehen.

GitHub Copilot "V1"

Microsofts Entwickler-KI-Dienst ist GitHub Copilot, und wenn Sie sich noch nicht mit GitHubs Vision für den gesamten Entwicklungslebenszyklus vertraut gemacht haben, schauen Sie sich diesen großartigen Blogbeitrag an.

Es ist über ein Jahr her, seit die Copilot-Erweiterung erstmals veröffentlicht wurde. Oege De Moor und sein Team bei GitHub haben mit OpenAI zusammengearbeitet, um das erste groß angelegte Beispiel für die Verwendung von LLMs für die Entwicklung, insbesondere das Codex-Modell von OpenAI, zu liefern.

Copilot bietet Echtzeit-Hinweise für den Code, den Sie schreiben, indem es Vorschläge als "Geistertext" basierend auf dem Kontext des umgebenden Codes bereitstellt. Wenn Sie Ihre Absichten als Kommentare schreiben oder beschreibende Funktionsnamen verwenden, kann Copilot diese Hinweise verwenden, um Code automatisch zu generieren, Wort für Wort, Zeile für Zeile oder sogar Block für Block.

Dies ist ein überraschend effektives Erlebnis, oft funktioniert der Geistertext einfach, und Sie schreiben schnell Code in einem flüssigen "Tab-Tab-Tab"-Entwicklungsfluss.

Es stellt sich heraus, dass dies erst der Anfang war.

In-Editor-Chat

Wir wussten, dass es nur eine Frage der Zeit war, bis KI den Entwicklungsprozess durchdringen würde. Wir hatten mit dem GitHub Next-Team an Copilot und der Copilot Labs-Erweiterung gearbeitet, aber die Veröffentlichung von ChatGPT im November 2022 beschleunigte den Zeitplan erheblich.

Das VS Code-Team veranstaltete einen internen Hackathon, um zu untersuchen, wie KI tiefer in VS Code integriert werden kann, und kam auf viele coole Ideen wie verbesserte Umbenennungen und Refactorings, Code-Transformationen basierend auf Beispielen und Möglichkeiten, Dateimuster oder Regex-Ausdrücke mithilfe natürlicher Sprache zu erstellen.

So interessant diese Ideen auch waren, wir kreisten immer wieder um das Chat-Erlebnis. Wir hatten eine gesunde Portion Skepsis. Brauchten wir wirklich noch ein Chat-Erlebnis in unserem Leben? VS Code ist ein Editor, unsere Aufgabe ist es, Sie in die "Zone" zu bringen und Ihnen zu helfen, dort zu bleiben, indem wir Ablenkungen beseitigen, während Sie das nächste Einhorn ausarbeiten.

Eine interessante Erkundung war die Idee, Chat direkt in den Editor zu integrieren. Hier ist der allererste Prototyp

Während wir das Design weiterentwickelten, erkannten wir, dass dieses Benutzermodell Vorteile hat. Es ist einfach über die Tastatur aufzurufen, Sie bleiben in Ihrem Code, und die Ausgabe ist Code (und nur Code).

Im folgenden Beispiel haben wir zuerst das Array users ausgewählt und dann Cmd+I unter macOS (oder Ctrl+I unter Windows/Linux) gedrückt, um die Chat-Eingabe aufzurufen. Dann haben wir Copilot gebeten, das Feld username in sowohl firstName als auch lastName aufzuteilen, und schließlich haben wir auf Inline Diff geklickt, um die von Copilot vorgenommenen Änderungen anzuzeigen.

Sie müssen Ihre Absichten Copilot nicht mehr mit einem Kommentar oder einem übermäßig beschreibenden Funktionsnamen mitteilen, drücken Sie einfach Cmd+I und beschreiben Sie, was Sie tun möchten. Bleiben Sie in der Zone, während Copilot die Arbeit erledigt.

Die Chat-Ansicht nutzen

Mit wachsender Begeisterung für ChatGPT stieg auch die Anzahl interner und externer Erweiterungen mit benutzerdefinierten Chat-Ansichten. Wir befürchteten, dass diese nicht skalierbar wären. Es ist schwierig, Grundlagen wie Tastenkombinationen und Themen in einer Webansicht zu unterstützen, und für diejenigen, die den Monaco-Editor für Codeblöcke verwenden, ist es sehr schwierig, auf Hunderte von Instanzen zu skalieren, ganz zu schweigen davon, dass in diesen Editor-Instanzen keine Erweiterungsunterstützung vorhanden ist. Daher haben wir eng mit dem GitHub Copilot-Team zusammengearbeitet, um eine Chat-Ansicht in den Kern von VS Code zu integrieren.

Im Laufe der Zeit und trotz unseres anfänglichen Zögerns begann die vollständige Chat-Ansicht-Erfahrung uns zu überzeugen. Wer möchte schließlich nicht mit einem Gruß wie diesem in den Tag starten?

Wir erkannten immer mehr Vorteile einer Chat-Ansicht.

Der offensichtlichste Vorteil einer integrierten Erfahrung gegenüber einem browserbasierten Chat ist, dass wir dem Modell Kontext liefern können, um die Konversation zu verankern und bessere Antworten zu geben. Sie können beispielsweise das browserbasierte ChatGPT nicht einfach bitten, Code zu optimieren, der sich über mehrere Dateien erstreckt. VS Code weiß bereits viel über den Arbeitsbereich, da hier Refactorings dateiübergreifend, Alle Referenzen finden, Zur Definition springen und mehr möglich sind. Wichtige Informationen können verantwortungsvoll in den Prompt eingebettet werden, damit das Modell relevantere Antworten geben kann, was Ihnen letztendlich ermöglicht, Copilot zu bitten, Code zu optimieren oder zu refaktorieren, der Abhängigkeiten dateiübergreifend hat.

Antworten auf viele Programmierfragen beinhalten oft mehrere Schritte. Denken Sie daran, wie viele Blogbeiträge Sie durch einen Prozess führen – eine Chat-Ansicht eignet sich gut für diese Art von Interaktion. Ein gutes Beispiel ist das Debugging. Wenn wir ehrlich sind (und das sind wir), ist es nicht einfach, launch.json und tasks.json für das Debugging zu konfigurieren. Anstatt weitere Dokumentationen zu schreiben oder Dialoge und Assistenten im Editor hinzuzufügen, können Sie einfach "/vscode eine launch.json und eine tasks.json hinzufügen" fragen, was dann Anweisungen zur Erstellung der Dateien, einzufügender Inhalte usw. liefert, bis Sie Breakpoints erreichen und Variablen wie ein Profi inspizieren.

Aber vielleicht der wichtigste Grund für die Integration von Chat ist, dass ein beidseitiges Gespräch Ihnen hilft zu entscheiden, was richtig und was falsch ist. Große Sprachmodelle sind nicht perfekt und sie "denken" nicht. Sie ermitteln einfach das nächstbeste Wort als Antwort (zugegebenermaßen sind sie ziemlich gut darin).

Als Pilot haben Sie immer die Kontrolle und entscheiden, welche der Vorschläge von Copilot Sie annehmen und welchen Code Sie in Ihren Arbeitsbereich übernehmen. Die Möglichkeit, klärende Fragen zu stellen oder zusätzliche Details anzugeben, hilft Ihnen bei diesen wichtigen Entscheidungen.

Das Beste aus Copilot herausholen

Benennung ist schwierig (wir sollten es wissen, unser Produkt heißt "Code"). "GitHub Copilot" ist jedoch ein großartiger Name. Anstatt "Paarprogrammierer" oder "Autopilot" oder einfach nur "Chat" zu sagen, vermittelt "Copilot" mehrere wichtige Konzepte in einem Wort.

Wenn Sie sich also als Pilot von VS Code und GitHub Copilot als... nun ja... Copilot betrachten, bekommen Sie eine Vorstellung davon, wie Sie den Dienst betrachten und mit ihm interagieren können, um das Beste aus Ihrem Sitznachbarn herauszuholen.

• Wir können es nicht oft genug wiederholen: Als Pilot haben Sie die Kontrolle. Sie entscheiden, welche Vorschläge Sie annehmen und welcher Code in Ihren Arbeitsbereich integriert wird.
• Die Hauptaufgabe von Copilot ist es, Sie zu unterstützen und sich um alltägliche oder repetitive Aufgaben zu kümmern. Lassen Sie ihn Testfälle schreiben, Beispieldaten erstellen oder Code basierend auf bestehenden Mustern erstellen.
• Copilot kann mit mehr Kontext mehr leisten. Wir sind alle an schnelle schlüsselwortbasierte Webservices gewöhnt, aber je mehr Details Sie angeben, desto bessere Ergebnisse erhalten Sie. Anstatt "Node Express TypeScript" zu fragen, bitten Sie Copilot, "eine Node.js-Website unter Verwendung des Express.js-Frameworks und von TypeScript zu erstellen" und iterieren Sie dann!
• Sie können Interaktionen auf bestimmte Themen beschränken, indem Sie im Chat-Eingabefeld / drücken. Um beispielsweise zu erfahren, wie Brotkrümel im Editor ein- oder ausgeschaltet werden, geben Sie /vscode Brotkrümel ausschalten ein.

• Sie können Themen auch als Verknüpfungen verwenden. Anstatt "diesen Code erklären" in den Inline-Chat einzugeben, geben Sie einfach "/" + Tab (eine Verknüpfung zu /explain) ein und drücken Sie Enter. Die Chat-Ansicht wird mit einer Erklärung des ausgewählten Codes geöffnet.
• Seien Sie sich bewusst, dass Copilot nicht perfekt ist und falsche Antworten gibt. Stellen Sie klärende Fragen, um zu entscheiden, welche richtig und welche falsch sind, und verwenden Sie die Schaltflächen Hoch/Runter, um uns bei der Verbesserung des Erlebnisses zu helfen.
• Zuletzt und fast genauso wichtig wie der erste Tipp: Begrüßen Sie Ihren Copiloten immer mit einem freundlichen "Hallo" oder "Guten Morgen", das stimmt Sie beide besser auf Ihre Stimmung ein.

Heute loslegen

Um Copilot in Aktion zu sehen und weitere Tipps zu erhalten, wie Sie das Beste aus Copilot herausholen, schauen Sie sich dieses fantastische Einführungsvideo an oder tauchen Sie in die vollständige VS Code Copilot-Serie auf YouTube ein.

Das oben beschriebene Inline-Vervollständigungserlebnis ist ab sofort verfügbar. Wenn Sie Copilot nicht über Ihre Organisation erhalten, können Sie sich hier anmelden und eine kostenlose Testversion starten. Von dort aus:

• Öffnen Sie VS Code (noch besser, verwenden Sie Insiders).
• Öffnen Sie die Erweiterungsansicht (⇧⌘X (Windows, Linux Ctrl+Shift+X)), suchen Sie nach GitHub Copilot und installieren Sie die Erweiterung.
• Authentifizieren Sie sich bei der Aufforderung mit Ihrer GitHub-ID.
• Öffnen Sie eine Code-Datei und lassen Sie die Magie wirken!

Um auf die Chat-Erlebnisse (In-Editor, Chat-Ansicht, Schnelldialog) zuzugreifen, müssen Sie die Erweiterung GitHub Copilot Chat installieren.

• Öffnen Sie die Erweiterungsansicht (⇧⌘X (Windows, Linux Ctrl+Shift+X)), suchen Sie nach der GitHub Copilot Chat-Erweiterung.
• Authentifizieren Sie sich bei der Aufforderung mit Ihrer GitHub-ID.
• Um den In-Editor-Chat zu öffnen, wählen Sie optional einen Codeblock aus und drücken Sie ⌘I (Windows, Linux Ctrl+I). Bitten Sie Copilot, eine Quicksort-Funktion zu schreiben.
• Ein "Chat"-Symbol wird in der Aktivitätsleiste angezeigt, klicken Sie darauf, um die Chat-Ansicht zu öffnen. Legen Sie los und bitten Sie Copilot, "ein Programm zu schreiben, um die Fluggeschwindigkeit eines unbeladenen Schwalben zu berechnen".
• Um den Schnelldialog auszuprobieren, können Sie Chat: Schnelldialog öffnen ausführen oder die Tastenkombination ⇧⌥⌘L (Windows, Linux Ctrl+Shift+Alt+L) verwenden.

Mehr über die GitHub Copilot und Copilot Chat-Erweiterungen erfahren Sie im Thema GitHub Copilot in VS Code.

Verantwortungsvolle KI

Monumentale Fortschritte in der Technologie wie diese sind wirklich selten. Auch wir glauben, dass KI der nächste große Wandel ist, der die Art und Weise, wie wir über Entwicklertools nachdenken, sie erstellen und nutzen, revolutionieren wird. Sie wird letztendlich jeden Aspekt des Entwicklungsprozesses auf eine Weise verbessern, die wir uns heute nur erträumen können. Wir erheben keinen Anspruch darauf, die Ersten zu sein, die das sagen, aber bald werden wir uns alle fragen, wie wir jemals Anwendungen und Systeme ohne KI-gestützte Tools erstellt, debuggt, bereitgestellt und gewartet haben.

KI ist nicht perfekt (wir auch nicht!) und sie wird sich im Laufe der Zeit verbessern. Microsoft und GitHub Copilot folgen den Prinzipien der verantwortungsvollen KI und setzen Kontrollen ein, um sicherzustellen, dass Ihre Erfahrungen mit dem Dienst angemessen, angenehm und nützlich sind. Wir verstehen, dass es Zögern und Bedenken hinsichtlich der schnellen Ausweitung der KI-Fähigkeiten gibt, und respektieren voll und ganz diejenigen, die Copilot nicht nutzen möchten oder können.

Die Punkte verbinden

Die Kombination aus einem Chat-Assistenten, In-Editor-Chat und Inline-Vervollständigungen ermöglicht es Ihnen, die Leistung von Copilot zu nutzen, unabhängig davon, in welcher "Zone" Sie sich beim Codieren befinden. Fangen Sie gerade erst an oder haben Sie Fragen? Nutzen Sie die Chat-Ansicht. Schreiben Sie gerade intensiv Code und möchten Refactoring, Aktualisierung oder Scaffolding durchführen? Drücken Sie Ctrl+I und lassen Sie Copilot es für Sie tun. Arbeiten Sie sich Schritt für Schritt durch ein Problem? Nutzen Sie Inline-Vervollständigungen, um sich mit Tab-Tab-Tab zum Erfolg zu navigieren.

Die Integration von Chat in VS Code, angetrieben von GitHub Copilot, ist nur ein Schritt auf einer Reise. Wir werden weiterhin zusätzliche "Inner-Loop"-Szenarien erforschen, wie die Verwendung natürlicher Sprache zur Beschreibung von Suchmustern oder Code-Generierung, die automatische Generierung von Commit-Nachrichten und Pull-Request-Beschreibungen, intelligenteres Code-Umbenennen, Refactoring, Transformationen und mehr.

Folgen Sie uns auf GitHub, Twitter und YouTube. Lassen Sie uns wissen, was Sie denken und welche Ideen Sie für KI in VS Code haben.

Danke,

Chris und das VS Code-Team

Frohes intelligentes Codieren!