VSCode-Erweiterung mit Claude Code erstellt | Topics

Nachdem wir Claude Code intern eingeführt haben, wollten wir ein praktisches Tool für die tägliche Arbeit erstellen. Ich habe eine VSCode-Erweiterung entwickelt, die Tippfehler, HTML-Fehler und ähnliches im Editor überwacht!

Ich habe den Weg von der Idee bis zur Implementierung dokumentiert – von "Das wäre eine praktische Funktion" bis zur Umsetzung!

Hintergrund

Während der Implementierung treten häufig Flüchtigkeitsfehler auf – zum Beispiel "alt=\"\" vergessen!" oder "Vollbreite und Halbbreite Zeichen vermischt!". Das war frustrierend.

Ich stellte mir vor, dass so ein Tool nützlich wäre, und beschloss, zunächst im Dialog mit Claude Code zu brainstormen.

Ich möchte eine App erstellen, die Flüchtigkeitsfehler verhindert – etwa durch ein Diff-Highlight im Browser oder durch Code-Überprüfungen!

Code-Review-Checkliste | Benutzerdefinierte Checkliste zur Überprüfung vor dem Absenden
HTML/CSS Visual Diff | Zwei Codeblöcke einfügen und Unterschiede visualisieren
Screenshot-Differenz-Checker | Pixelgenaue Vergleiche von Bildern vor und nach der Überarbeitung
Live HTML/CSS-Fehlerprüfer | KI weist auf Probleme hin, sobald Sie Code einfügen

Es wurden einige Vorschläge gemacht, aber ich werde zusätzliche Anforderungen einreichen

Es ist großartig, dass die KI auf Probleme hinweist!! Allerdings möchte ich, statt Code zu kopieren und einzufügen, Echtzeit-Überwachung in VSCode oder die Möglichkeit, nach Abschluss der Arbeit zu überprüfen.

Wir haben uns entschieden, es als VSCode-Erweiterung zu entwickeln statt als Browser-App.

Die Echtzeit-Überwachung hatte hohe API-Kosten, daher haben wir uns für eine Überprüfung nach der Befehlsausführung entschieden.

Zunächst wurde die Claude API vorgeschlagen, aber da kostenpflichtig, verwenden wir stattdessen GitHub Copilot, das bereits lizenziert ist.

Zusammengefasst: Die Erweiterung ruft nach der Arbeit git diff ab, sendet einen Prompt an GitHub Copilot und erkennt automatisch Unachtsamkeitsfehler.

Funktionsweise

Klicken Sie auf die Statusleisten-Schaltfläche, wenn Sie mit der Arbeit fertig sind
↓
Abrufen von git diff HEAD und Vergleich der Unterschiede
↓
Analysieren von diff, um geänderte Dateien und Zeilennummern zu extrahieren
↓
Senden von diff + Prompt an GitHub Copilot (vscode.lm API)
↓
Copilot gibt Überprüfungsergebnisse im JSON-Format zurück
↓
Überprüfungsergebnisse in der VSCode-Ansicht anzeigen
↓
Klicken auf die Zeilennummer der Anmerkung springt zur entsprechenden Datei und Zeile
↓
Trends, die die KI erkannt hat, werden gesammelt

Das ist ungefähr so, wie der Bildschirm aussieht.

Sobald alle Arbeiten abgeschlossen sind, starten Sie die Code Review-Erweiterung, bevor Sie einen Commit zu GitHub durchführen. Sie vergleicht die Unterschiede zum vorherigen Commit und prüft, ob etwas nicht stimmt.

Die von der KI erkannten Tendenzen werden im Speicher gesammelt und Sie können visualisieren, welche Fehler Sie häufig machen.

Der Prompt sieht ungefähr so aus.

チェック観点:
- テキスト内の不自然なスペース（全角・半角スペースの混入など）
- 大文字・小文字の不統一（クラス名・テキストなど）
- 誤字脱字の可能性がある箇所
- 括弧・記号の全角・半角混在（例: (）・（) のように開き括弧と閉じ括弧で全角半角が混ざっている、テキスト中に全角の()[]{}が使われているなど）
- <a> の href属性が "#" のままになっている（未設定・仮置きの可能性）
- HTMLのネスト構造の意味的な違反（以下は特に重点チェック）:
  - <ul>・<ol> の直下に <li> 以外の要素（<div>など）が入っている
  - <h1>〜<h6> の中に <div>・<p>・<section> などブロック要素が入っている
  - <p> の中に <div>・<ul>・<table>・<h1>〜<h6> などブロック要素が入っている
  - <a> の中に <a> がネストしている
  - <button> の中に <button>・<a>・<input> などインタラクティブ要素が入っている
  - <tr> の中に <td>・<th> 以外の要素が入っている

Wenn Sie hier hinzufügen und die Erweiterung aktualisieren, können Sie sich auf Ihre persönlichen Fehlermuster konzentrieren, und die Leistung wird kontinuierlich verbessert!

Technische Aspekte und Implementierung

Diese Erweiterung wurde nur mit TypeScript + VSCode Standard API + Node.js Standard-Features erstellt und verwendet keine externen Bibliotheken. Die Dateistruktur ist auch sehr einfach mit nur fünf Haupt-.ts-Dateien.

Die VSCode Standard API hat eine Funktion namens vscode.lm (Language Model API), mit der Sie das GitHub Copilot-Modell direkt aufrufen können. Mit dieser können Sie AI-Reviews ohne API-Schlüssel von Anthropic oder OpenAI implementieren, aber da es sich um eine relativ neue API handelt und es wenig offizielle Dokumentation gibt, würde normalerweise viel Zeit nur für Spezifikationsuntersuchungen erforderlich sein.

Durch das Fragen bei Claude Code, wie man das Copilot-Modell von einer VSCode-Erweiterung aufruft, während die Implementierung voranschreitet, konnte ich die Verwendung von vscode.lm.selectChatModels() und spezifische Implementierungsmethoden wie das Streaming-Empfangen von Antworten ((for await (const chunk of response.text))) sofort verstehen.

Ähnlich konnte ich bei der bidirektionalen Kommunikation in WebviewPanel (Nachrichtenaustausch zwischen Webview und Node.js) und bei der Persistenter-Speichermechanismus mit context.globalState durch regelmäßiges Nachfragen bei Claude Code die Zeit für tiefere Dokumentationsstudien erheblich verkürzen.

Fazit

Dieses Mal habe ich über die Erstellung einer VSCode-Erweiterung berichtet, um Flüchtigkeitsfehler "vor dem Commit auf einmal zu finden".

Mit der Kombination aus git diff und Copilot können Sie Übersehungen reduzieren und gleichzeitig Prüfpunkte erweitern, um ein maßgeschneidertes Tool zu entwickeln, das Ihre persönlichen Fehlerneigungen berücksichtigt.

Es war eine neue Erkenntnis, dass VSCode-Erweiterungen überraschend einfach mit der Standard-API von VSCode erstellt werden können. Ohne Claude Code hätte ich nie daran gedacht, eine Erweiterung zu erstellen! (lacht)

Es ist natürlich wichtig, den Code und seine Funktionsweise zu verstehen, aber auch wenn Sie alles der KI überlassen, können Sie durch einfaches Ausprobieren Ideen und neue Erkenntnisse entdecken.