Erstellen einer VSCode-Erweiterung mit ChatGPT

Einführung

Dieses Projekt führt Sie durch den Prozess der Erstellung einer VSCode-Erweiterung, mit der der Benutzer die Überschriftenebene von ausgewähltem Markdown-Text anpassen kann. Am Ende werden Sie eine funktionierende Erweiterung haben, die das Markdown-Bearbeitungserlebnis in Visual Studio Code verbessert.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

• Wie man das Grundgerüst für eine VSCode-Erweiterung mithilfe von TypeScript erstellt.
• Wie man TypeScript mit Node.js- und VSCode-Konfigurationen integriert.
• Wie man die Kernfunktionalität zur Anpassung der Überschriftenebenen von ausgewähltem Markdown-Text entwickelt.
• Wie man Konfigurationsdateien für das Erstellen, Debuggen und Ausführen der Erweiterung schreibt.

🏆 Erfolge

Nach Abschluss dieses Projekts werden Sie in der Lage sein:

• VSCode-Erweiterungen mit TypeScript zu entwerfen und zu entwickeln.
• Benutzerinteraktionen und Textauswahlen innerhalb der VSCode-Umgebung zu verarbeiten.
• Markdown-Syntax zu parsen und zu manipulieren.
• Mehrere Dateien in einem Projekt zu generieren und zu verwalten.
• TypeScript, Node.js und VSCode für eine nahtlose Entwicklung zu konfigurieren.

smol-ai installieren

Zusätzlich verwenden wir das Framework smol-ai, um Code zu generieren.

Beschreibung von smol-ai aus der README:

Dies ist ein Prototyp eines „Junior Developer“-Agenten (auch bekannt als smol dev), der Ihnen eine gesamte Codebasis erstellt, sobald Sie ihm eine Produktspezifikation geben, aber er beendet die Welt nicht und verspricht keine AGI. Anstatt spezifische, starre Starter wie create-react-app oder create-nextjs-app zu erstellen und zu warten, handelt es sich hierbei im Grunde um create-anything-app, bei dem Sie Ihren Scaffolding-Prompt in einer engen Schleife mit Ihrem smol dev entwickeln.

Wir mögen smol-ai wegen seiner Einfachheit. Die gesamte Code-Generierungslogik befindet sich in einer einzigen Python-Datei, die aus drei Hauptfunktionen besteht:

1. Generieren einer Liste der Dateien, die zur Ausführung des Prompts benötigt werden (z. B. package.json, index.js, ...).
2. Generieren einer Liste der gemeinsam genutzten Abhängigkeiten, die zur Ausführung des Prompts benötigt werden (z. B. axios, react, ...).
3. Für jede Datei in der generierten Dateiliste Code generieren, der in die Datei kommt, wobei bei Bedarf gemeinsam genutzte Abhängigkeiten verwendet werden.

Beachten Sie, dass smol-ai auch andere Funktionen bietet, wie z. B. die Möglichkeit, Fehler zu debuggen und einen Prompt basierend auf der aktuellen Codebasis zu generieren.

Aufgaben

1. Das smol-ai-Repository klonen

   Sie müssen das Repository https://github.com/smol-ai/developer in das Verzeichnis /home/labex/project klonen.

2. smol-ai konfigurieren

   Sie müssen die smol-ai README lesen und den OpenAI API-Schlüssel konfigurieren.

Diese Erweiterung initialisieren

Es gibt einen grundlegenden Prompt, der dieses Projekt beschreibt:

eine vscode-erweiterung, mit der der benutzer die überschriftenebene des ausgewählten textes anpassen kann. sie sollte drei befehle haben: überschriftenebene erhöhen, überschriftenebene verringern und überschriftenebene festlegen

Beachten Sie, dass der Prompt kurz und allgemein ist. Sie können versuchen, den Prompt zu verbessern, indem Sie weitere Details zum Projekt hinzufügen.

Sie können smol-ai ausführen, um das Projekt zu generieren. Nachdem smol-ai einige Minuten mit der Code-Generierung verbracht hat, hat es die Dateien im Verzeichnis developer/generated erstellt.

Aufgaben

1. Das Projekt initialisieren

   Sehen Sie sich die smol-ai README an und verwenden Sie dann smol-ai, um das Projekt zu generieren.

2. Das Projekt konfigurieren

   Sie müssen den generierten Code anzeigen. Bei Bedarf kann der Prompt angepasst werden, um eine erneute Generierung zu veranlassen.

Erwartetes Ergebnis

Es gibt ein Beispiel des generierten Codes im Verzeichnis developer/generated. Ihr Ergebnis kann abweichen.

.
├── extension
│   ├── package.json
│   ├── src
│   │   ├── commands
│   │   │   ├── decreaseHeadingLevel.ts
│   │   │   ├── increaseHeadingLevel.ts
│   │   │   └── setHeadingLevel.ts
│   │   └── extension.ts
└── shared_dependencies.md

Diese Erweiterung testen

Um diese Erweiterung zu testen, müssen wir die folgenden Schritte erfolgreich ausführen:

1. Abhängigkeiten installieren;
2. Code kompilieren;
3. Erweiterung ausführen.

Abhängigkeiten installieren

Sie müssen die folgenden Befehle im generierten Verzeichnis ausführen.

yarn

Beim Installieren der Abhängigkeiten können einige Probleme auftreten. Sie müssen die Probleme beheben.

Aufgaben

1. Die Probleme bei der Installation der Abhängigkeiten beheben.

   Sie können die KI bitten, die Probleme zu beheben.

Erwartetes Ergebnis

Wenn die Probleme behoben sind, sehen Sie möglicherweise die folgenden Beispielergebnisse.

$ yarn

...
[3/5] 🚚 Fetching packages...
[4/5] 🔗 Linking dependencies...
[5/5] 🔨 Building fresh packages...
✨ Done in 4.31s.

Diese Erweiterung erstellen

Da TypeScript eine kompilierte Sprache ist, müssen wir einen Build-Schritt ausführen, um den Code in JavaScript zu kompilieren. Die package.json enthält die folgenden Skripte:

"scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "npm run compile && node ./node_modules/vscode/bin/test"
},

Wir können den Code erstellen, indem wir den folgenden Befehl ausführen:

tsc --init
yarn compile

Beim Kompilieren des Codes können einige Probleme auftreten. Sie müssen die Probleme beheben.

Aufgaben

1. Die Probleme beim Kompilieren des Codes beheben.

   Sie können die KI bitten, die Probleme zu beheben.

Erwartetes Ergebnis

Wenn die Probleme behoben sind, sehen Sie möglicherweise die folgenden Beispielergebnisse.

$ tsc -p ./
✨ Done in 0.80s.

Diese Erweiterung ausführen

Das Ausführen einer VSCode-Erweiterung erfordert, dass Sie zum Bedienfeld „Ausführen und Debuggen“ gehen und die Aufgabe vscode extension starten, wenn die Datei extension.ts im Editor aktiv ist.

Beim Ausführen der Erweiterung können einige Probleme auftreten. Sie müssen die Probleme beheben.

Aufgaben

1. Die Probleme bei der Ausführung der Erweiterung beheben.

   Sie können die KI bitten, die Probleme zu beheben.

Erwartetes Ergebnis

Wenn die Probleme behoben sind, sehen Sie die Erweiterung korrekt ausgeführt.

Zusammenfassung

Es funktioniert 🥳

Wie haben wir uns geschlagen? Wir haben eine funktionierende Erweiterung erhalten. Wir haben es geschafft, das im Prompt festgelegte Ziel zu erreichen.

Der Weg dorthin war nicht „automatisch“. Wir sind auf viele Probleme gestoßen. Ohne Vorkenntnisse in TypeScript, Node.js und VSCode hätten diese Probleme lange gedauert, um sie zu debuggen.

Und obwohl der Code, den wir generieren konnten, funktionierte, gibt es immer noch viele Verbesserungen, die vorgenommen werden müssen:

• Es gibt keine Anweisungen zur Entwicklung, Verwendung oder Veröffentlichung der Erweiterung;
• Es gibt keine .gitignore für TypeScript/JavaScript/VSCode-Artefakte;
• Es gibt keine launch.json-Datei, die das Ausführen der Erweiterung im Entwicklungsmodus konfiguriert;
• Es gibt keine Tests;
• Es gibt keine Code-Wiederverwendung.