So verwenden Sie KI, um Ihre eigenen „Supermakro“-VS-Code-Erweiterungen zu erstellen – Visual Studio Magazine (2023)

Ausführlich

So verwenden Sie KI, um Ihre eigenen „Supermakro“-VS-Code-Erweiterungen zu erstellen

• VonDavid Ramel
• 22.05.2023

Fortschrittliche KI wie ChatGPT macht es selbst dem ahnungslosesten Entwickleranfänger ganz einfach, seine ganz eigenen, personalisierten Visual Studio Code-Erweiterungen zu erstellen. Mit einer Drei-Tasten-Kombination können sie nahezu alle Funktionen bereitstellen, die Sie benötigen.

Nach einigen ersten Experimenten kann ich so ein „Super-Makro“ nun in wenigen Minuten schnell auf die Beine stellen. Ich wollte diese Funktionalität schon lange und habe mich mit der Erstellung solcher Tools beschäftigt, aber einige erwiesen sich als einfach zu komplex zum Programmieren. Ich habe einfache Tools für Dinge wie das Einfügen von HTML-Boilerplate-Code oder das schnelle Umschließen von ausgewähltem Text in URL-Linkcode erstellt. Allerdings wollte ich TypeScript – offenbar die bevorzugte Erweiterungssprache – für komplexere Dinge nicht weiter erlernen müssen.

Ich verwende VS-Code für michVisual Studio MagazinArtikel und habe meine Umgebung angepasst, um dies in HTML-Dateien zu tun, aber ich wollte schon immer schnell einsetzbare Makros, um mühsame Aufgaben zu automatisieren. Das ist ein „Schnellzugriff“ zum Erstellen und Verwenden.

Nachdem ich den Prozess kennengelernt und mindestens einen lästigen Fehler behoben habe, habe ich schnell hilfreiche Supermakros (was ich Erweiterungen nenne, die durch eine Drei-Tasten-Kombination ausgeführt werden) erstellt für:

• Umschließen einer Reihe von Zeilen in HTML-Listenelement-Tags, um Aufzählungslisten zu erstellen
• Erstellen von HTML-Tabellen, Aufforderung an den Benutzer zur Angabe der Anzahl der Spalten und Zeilen (und möglicherweise einer beliebigen anderen Anzahl von HTML-Tabellenfunktionen)

Natürlich gibt es überall im Web Widgets und Dienstprogramme von Drittanbietern, um solche Dinge zu tun, aber ich wollte, dass etwas sofort in meiner Domain ausgeführt wird, ohne dass der Kontext gewechselt werden muss. Für solche Dinge gibt es auch veröffentlichte Tools auf dem Markt, aber ich wollte etwas, das ich bei Bedarf schnell anpassen oder verbessern kann.

Hier erfahren Sie, wie es geht.

Aufstellen
Die von mir verwendete KI war ChatGPT Plus mit GPT-4-Unterstützung und aktivierter neuer Browsing-Funktionalität (Beta).

Um mit der Erstellung Ihrer ersten Erweiterung zu beginnen, gehen Sie zu „Ihre erste Erweiterung" auf der VS Code-Site. Sie benötigen eine Menge Dinge, darunter Node.js, Git und speziell dafür Yeoman und den VS Code Extension Generator zum Erstellen der Erweiterung über die Befehlszeile.

Erstellen einer Erweiterung
Geben Sie nach der Einrichtung am Terminal einfach „yo code“ ein, um ein Skript zu generieren, das eine Barebone-Erweiterung erstellt, um einfach eine Meldung anzuzeigen, die auf Benutzereingaben für die verwendete Sprache, den Namen des Tools und mehr basiert, wie in der Grafik dargestellt über.

Sobald Sie das getan und das neue Tool in einem Popup-Fenster „Extension Development Host“ getestet haben (indem Sie den Befehl aus der Befehlspalette ausführen, um sicherzustellen, dass die Standardmeldung „Hallo Welt“ der Shell generiert wird), kommt die KI ins Spiel.

Wie bereits erwähnt, habe ich ChatGPT verwendet, um den TypeScript-Code bereitzustellen, um Textzeilen in HTML-Aufzählungspunkte zu umbrechen und HTML-Tabellen zu generieren. Anstatt mühsam zu lernen, welcher Code verwendet werden soll, und dann den gesamten Code in TypeScript/JavaScript einzugeben, überlasse ich einfach ChatGPT die Routinearbeit. Ich verwende es in einem Browser-Tab, aber es gibt zahlreiche Tools, die den ChatGPT-Zugriff im Code-Editor ermöglichen.

Für meine Zwecke habe ich den Code im Projekt ersetzen lassenextension.jsDatei (die Programmierung) undpackage.jsonDatei, die Tool-Metadaten wie Anzeigename, Bezeichner, Befehlsname und Titel (was Sie in der Befehlspalette sehen) zusammen mit anderen Informationen wie Abhängigkeiten auflistet.

Feinabstimmung
Bei Letzterem muss man vorsichtig sein. ChatGPT generierte zunächst Code, der alte Versionen von VS-Code und Abhängigkeiten verwendete. Ich musste es anweisen, die Dinge zu modernisieren, indem es seine brandneue Browsing-Funktion nutzt, die letzte Woche in der Betaversion bereitgestellt wurde. Ich bin kein LLM-versierter Prompt-Ingenieur, aber ich habe Folgendes verwendet:

Bitte generieren Sie den gesamten Code mit den neuesten Versionen von node.js, Typescript, Visual Studio-Code und allen anderen Abhängigkeiten oder betroffenen Daten neu. Beispielsweise sollte „@types/vscode“: „^1.55.0“ „@types/vscode“: „^1.78.0“ sein.

Dadurch wurde die Browsing-Funktionalität aktiviert, und ChatGPT hat den Code schnell mit aktuellen Abhängigkeiten neu generiert und mir mitgeteilt, dass die Browsing-Funktionalität verwendet wird.

Interessanterweise sagte ChatGPT nach der Aktualisierung der Abhängigkeiten, wie im Screenshot oben gezeigt:

Bitte beachten Sie, dass die oben genannten„vscode-test“: „^1.7.0“ist hypothetisch, da ich die genaue Versionsnummer auf GitHub nicht finden konnte. Ich habe eine Annahme basierend auf dem letzten Commit-Datum getroffen. Bitte überprüfen Sie dies vor der Verwendung.

Es hat auch noch mehr getan, indem es relevante Informationen wie den verwendeten Prozess bereitgestellt hat und mir (dem Dummy) sogar mitgeteilt hat, dass VS Code 1.78 zwar die neueste Ausgabe sein könnte, diese aber nicht in der enthalten sein musspackage.jsonDatei. Aber warum wurde dann diese Zeile generiert?package.jsonDatei überhaupt?

„@types/vscode“: „^1.55.0“,

Auf jeden Fall lieferte es auch hilfreiche Anleitungen, darunter:

Bevor Sie jedoch fortfahren, ist es wichtig, die Kompatibilität zwischen all diesen Paketen in Ihrem spezifischen Kontext sicherzustellen. Größere Versionsaktualisierungen bringen oft Breaking Changes mit sich, sodass Sie Ihren Code möglicherweise entsprechend anpassen müssen. Führen Sie nach der Aktualisierung dieser Abhängigkeiten nach Möglichkeit Tests durch, um sicherzustellen, dass alles weiterhin wie erwartet funktioniert.

Um Beispiele für den von ChatGPT generierten Code zu geben, finden Sie hier Codeausschnitte zum Generieren von Tabellen:

import * as vscode from 'vscode';export function activate(context: vscode.ExtensionContext) {letavailable = vscode.commands.registerCommand('table-generator.generateHtmlTable', async () = > {const numberOfRows = waiting vscode.window .showInputBox({ prompt: 'Geben Sie die Anzahl der Zeilen ein' });const numberOfColumns = waiting vscode.window.showInputBox({ prompt: 'Geben Sie die Anzahl der Spalten ein' });if (numberOfRows && numberOfColumns) {let table = ' < table > \n';for (let i = 0; i < parseInt(numberOfRows); i++) {table += '\t < tr > \n';for (let j = 0; j < parseInt(numberOfColumns) ; j++) {table += '\t\t < td > < /td > \n';}table += '\t < /tr > \n';}table += ' < /table > ';const activeTextEditor = vscode.window.activeTextEditor;if (activeTextEditor) {const activeDocument = activeTextEditor.document;const edit = new vscode.WorkspaceEdit();edit.insert(activeDocument.uri, activeTextEditor.selection.active, table);vscode.workspace .applyEdit(edit);}}});context.subscriptions.push(disposable);}export function activate() {}

und um Textzeilen in Aufzählungslisten umzubrechen:

import * as vscode from 'vscode';export function activate(context: vscode.ExtensionContext) { letavailable = vscode.commands.registerCommand('html-list.createList', () = > { const editor = vscode.window.activeTextEditor ; if (editor) { const document = editor.document; const Selection = editor.selection; // Den ausgewählten Text als String abrufen. const selectedText = document.getText(selection); // Den ausgewählten Text in Zeilen aufteilen. const lines = selectedText.split('\n'); // Jede Zeile in < li > < /li >-Tags einschließen. const WrappedLines =lines.map(line = > ` < li > ${line} < /li > ` ); // Die umbrochenen Zeilen wieder zusammenfügen und in < ul > < /ul >-Tags einschließen. const newText = ` < ul > \n${wrappedLines.join('\n')}\n < /ul > `; // Eine Bearbeitung erstellen, die den ausgewählten Text durch den neuen Text ersetzt. const edit = new vscode.WorkspaceEdit(); edit.replace(document.uri, Selection, newText); // Die Bearbeitung anwenden. vscode.workspace. applyEdit(edit); } }); context.subscriptions.push(disposable);}

Sobald Sie Ihren endgültigen Erweiterungscode getestet haben, müssen Sie ihn zur Verwendung lediglich in eine lokale .vsix-Datei für Ihre eigene Verwendung packen, anstatt ihn auf dem VS Code Marketplace zu veröffentlichen.

Fehlerbehebung
Eine Sache ist hier jedoch zu beachtenvsce-PaketDie Ausführung des Befehls vom Terminal aus zum Erstellen der .vsix-Datei schlug bei mir jedes Mal fehl, mit der Fehlermeldung „Stellen Sie sicher, dass Sie die Datei bearbeiten.“README.mdDatei, bevor Sie Ihre Erweiterung verpacken oder veröffentlichen.

Ich wusste nicht, warum das nötig sein würde, aber ich habe die Projekte pflichtbewusst bearbeitet und gespeichertREADME.mdDatei nur, um immer die gleiche Fehlermeldung zu erhalten, egal wie viele oder wie groß die Änderungen sind, die ich an der Datei vorgenommen habe. Nach einiger Suche im Internet entdeckte ich ein GitHub-Problem, das darauf hindeutete, dass das vollständige Löschen des Inhalts der Datei funktionierte. Das war der Fall, und ich habe das Problem nicht weiter untersucht. Dasbekanntes ProblemSollte aber eigentlich behoben werden.

Wie auch immer, ich habe meinen Tabellengenerator und meinen Listengenerator schließlich dazu gebracht, in meiner Erweiterungsliste zu erscheinen, indem ich zur Erweiterungsansicht gegangen bin und, anstatt eine vom Marktplatz herunterzuziehen, auf die drei Punkte (...) oben rechts geklickt habe Öffnen Sie die Ansicht, um ein Menü mit der Option „Von VSIX installieren …“ aufzurufen. Dann zeigen Sie einfach auf die .vsix-Datei, die Sie zur Installation erstellt haben, und Ihr Supermakro ist einsatzbereit.

Befehlsverknüpfungen
Ich mag es nicht, zuschlagen zu müssenStrg+Umschalt+PUm jedoch die Befehlspalette zu starten und dann meine Werkzeuge in der riesigen Liste zu finden, habe ich ihnen über die Drei-Tasten-Befehlsverknüpfungen zugewiesenStrg+K Strg+S(unter Windows) Befehl.

Es wird immer schwieriger, ungenutzte Drei-Tasten-Kombinationen für Befehle zu finden, aber ich habe es geschafft, sie einzurichtenStrg+Alt+Tfür Tische uStrg+Alt+Lfür Listen, sodass sie leicht zu merken sind.

Nachdem ich nun den Prozess kennengelernt habe, bin ich bestrebt, neue Tools zu entwickeln, um alle lästigen, sich wiederholenden Aufgaben zu bewältigen, die immer wieder anfallen, oder jede andere Funktionalität, die mir einfällt.

Ich könnte sogar versuchen, dies mit der Visual Studio-IDE zu tun, was sicherlich komplizierter ist.

Eine andere zu erkundende Sache wäre die Installation einer dieser ChatGPT-Zugriffserweiterungen, um alle oben genannten Aufgaben direkt in VS Code auszuführen, anstatt den Kontext in einem Browser auf ChatGPT umstellen zu müssen. Ich bin sicher, dass sie dazu gehörennützliche KI-Tools für VS Codewerden regelmäßig, wahrscheinlich fast täglich, auf den Markt gebracht.

GitHub Copilot kann wahrscheinlich genau das Gleiche tun, kann jedoch nicht im Internet nach den neuesten Daten suchen. (Ich würde es testen, aber GitHub besteht darauf, dass ich nicht für Copilot bezahlt habe, obwohl meine Repo-Kontoinformationen eindeutig zeigen, dass ich das getan habe – damit fange ich gar nicht erst an.)

Auf jeden Fall ist dies ein weiteres Beispiel dafür, wie fortschrittliche KI viele alltägliche Jobs – und alles andere – beeinflusst.