Erstelle eine VSCode-Erweiterung mit ChatGPT

Einführung

Dieses Projekt führt Sie durch den Prozess der Erstellung einer VSCode-Erweiterung, die es dem Benutzer ermöglicht, die Überschriftsebene des ausgewählten Markdown-Textes anzupassen. Am Ende werden Sie eine funktionierende Erweiterung haben, die die Markdown-Bearbeitungserfahrung in Visual Studio Code verbessert.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

• Wie man das Gerüst für eine VSCode-Erweiterung mit TypeScript erstellt.
• Wie man TypeScript mit Node.js und VSCode-Konfigurationen integriert.
• Wie man die Kernfunktionalität entwickelt, um die Überschriftsebenen des ausgewählten Markdown-Textes anzupassen.
• Wie man Konfigurationsdateien zum Erstellen, Debuggen und Ausführen der Erweiterung schreibt.

🏆 Errungenschaften

Nach Abschluss dieses Projekts werden Sie in der Lage sein:

• VSCode-Erweiterungen mit TypeScript zu entwerfen und zu entwickeln.
• Benutzerinteraktionen und Textauswahl innerhalb der VSCode-Umgebung zu verarbeiten.
• Markdown-Syntax zu analysieren 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.

Skills Graph

Installieren Sie smol-ai

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

Beschreibung von smol-ai aus der README:

Dies ist ein Prototyp eines "Junior-Entwicklers"-Agents (aka smol dev), der Ihnen eine gesamte Codebasis aufbaut, sobald Sie ihm eine Produktspezifikation geben, aber die Welt nicht beendet oder AGI nicht überzeichnet. Anstatt spezifische, starre, einmalige Starter wie create-react-app oder create-nextjs-app zu erstellen und zu pflegen, ist dies im Grunde 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 Codegenerationslogik befindet sich in einer einzigen Python-Datei, die aus drei Hauptfunktionen besteht:

1. Generieren Sie eine Liste von Dateien, die zum Ausführen des Prompts erforderlich sind (z. B. package.json, index.js,...)
2. Generieren Sie eine Liste von gemeinsamen Abhängigkeiten, die zum Ausführen des Prompts erforderlich sind (z. B. axios, react,...)
3. Für jede Datei in der generierten Dateiliste generieren Sie den Code, der in die Datei eingehen soll, und verwenden gegebenenfalls gemeinsame Abhängigkeiten.

Beachten Sie, dass smol-ai auch andere Funktionen wie die Möglichkeit zum Debuggen von Fehlern und das Generieren eines Prompts basierend auf der aktuellen Codebasis bietet.

Aufgaben

1. Klonen Sie das smol-ai-Repository

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

2. Konfigurieren Sie smol-ai

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

Initialisieren Sie diese Erweiterung

Es gibt einen grundlegenden Prompt, der dieses Projekt beschreibt:

Eine VSCode-Erweiterung, die es dem Benutzer ermöglicht, die Überschriftsebene des ausgewählten Textes anzupassen. Sie sollte drei Befehle haben: Überschriftsebene erhöhen, Überschriftsebene verringern und Überschriftsebene einstellen

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

Sie können smol-ai ausführen, um das Projekt zu generieren. Nachdem einige Minuten zum Generieren des Codes verbracht wurden, hat smol-ai die Dateien im Verzeichnis developer/generated erstellt.

Aufgaben

1. Initialisieren Sie das Projekt

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

2. Konfigurieren Sie das Projekt

Sie müssen den generierten Code ansehen. Wenn erforderlich, kann der Prompt angepasst werden, um ihn erneut zu generieren.

Erwartetes Ergebnis

Im Verzeichnis developer/generated gibt es ein Beispiel für den generierten Code. Ihr Ergebnis kann sich unterscheiden.

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

Testen Sie diese Erweiterung

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 möglicherweise einige Probleme auftreten. Sie müssen die Probleme beheben.

Aufgaben

1. Beheben Sie die Probleme beim Installieren der Abhängigkeiten.

Sie können den AI bitten, die Probleme zu beheben.

Erwartetes Ergebnis

Wenn die Probleme behoben sind, können Sie die folgenden Beispielergebnisse sehen.

$ yarn

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

Erstellen Sie diese Erweiterung

Da TypeScript eine kompilierte Sprache ist, müssen wir einen Build-Schritt ausführen, um den Code in JavaScript zu kompilieren. In der package.json finden Sie 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 möglicherweise einige Probleme auftreten. Sie müssen die Probleme beheben.

Aufgaben

1. Beheben Sie die Probleme beim Kompilieren des Codes.

Sie können den AI bitten, die Probleme zu beheben.

Erwartetes Ergebnis

Wenn die Probleme behoben sind, können Sie die folgenden Beispielergebnisse sehen.

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

Ausführen Sie diese Erweiterung

Um eine VSCode-Erweiterung auszuführen, müssen Sie im Bereich "Ausführen und Debuggen" gehen und die Aufgabe "VSCode-Erweiterung" starten, wenn die Datei extension.ts im Editor aktiv ist.

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

Aufgaben

1. Beheben Sie die Probleme beim Ausführen der Erweiterung.

Sie können den AI bitten, die Probleme zu beheben.

Erwartetes Ergebnis

Wenn die Probleme behoben sind, können Sie die Erweiterung richtig ausführend sehen.

Zusammenfassung

Es funktioniert 🥳

Wie haben wir das geschafft? Wir haben eine funktionierende Erweiterung. Wir haben es dazu gebracht, das Ziel zu erreichen, das in unserem Prompt festgelegt war.

Die Reise bis zu diesem Punkt war nicht "automatisch". Wir sind auf dem Weg vielen Problemen gegenübergetreten. Ohne vorherige Kenntnisse von TypeScript, Node.js und VSCode hätten diese Probleme eine Weile in der Debuggingphase gedauert.

Und obwohl wir funktionierenden Code generieren konnten, gibt es immer noch viele Verbesserungen möglich:

• Es gibt keine Anweisungen darüber, wie man die Erweiterung entwickelt, verwendet oder veröffentlicht;
• Es gibt kein .gitignore für TypeScript/JavaScript/VSCode-Artikel;
• Es gibt keine launch.json-Datei, die die Ausführung der Erweiterung in der Entwicklung konfiguriert;
• Es gibt keine Tests;
• Es gibt keine Code-Wiederverwendung.