Ich habe mit Claude Code eine VSCode-Erweiterung erstellt

Da Claude Code bei uns im Unternehmen eingeführt wurde, wollte ich ein nützliches Werkzeug für die tägliche Arbeit entwickeln. So habe ich eine VSCode-Erweiterung gebaut, die im Editor auf Tippfehler, Tag-Fehler und ähnliche Probleme achtet!

Hier ist der Weg von der ersten Idee bis zur fertigen Umsetzung, nach dem Motto: „Eine Funktion wie diese wäre toll ...“!

Entwicklungsverlauf

Bei der Implementierung passieren oft unachtsame Fehler, etwa „alt="" vergessen!“ oder „Vollbreite und Halbbreite verwechselt!“. Genau dieses Problem hat mich beschäftigt ...

Mir schwebte ein Werkzeug vor, wie ich es mir wünsche. Zunächst habe ich das Thema einfach im Chat als Dialog eingebracht.

Ein Programm, das unachtsame Fehler verhindert, zum Beispiel Unterschiede direkt im Browser hervorhebt oder Fehler im Code anzeigt. Genau so etwas wollte ich bauen!

Code-Review-Checkliste | Individuelle Checkliste zur Prüfung vor der Einreichung
HTML/CSS-Visual-Diff | Zwei Codes einfügen und Unterschiede visualisieren
Screenshot-Diff-Prüfer | Bilder vor und nach der Korrektur pixelgenau vergleichen
Live-HTML/CSS-Fehlerprüfer | Code einfügen, KI erkennt Probleme

Es wurden einige Vorschläge gemacht, und ich habe noch weitere Anforderungen nachgereicht.

Dass die KI Hinweise gibt, ist wirklich super! Ich würde es aber gern so haben, dass man nicht nur Code einfügen muss, sondern direkt in VSCode eine Echtzeitüberwachung hat bzw. die Ergebnisse nach Abschluss der Arbeit prüfen kann!

Entschieden: Die Umsetzung erfolgt als VSCode-Erweiterung statt als Browser-Anwendung.

Da eine Echtzeitüberwachung über die API vermutlich hohe Kosten verursacht, habe ich mich für eine Überprüfung nach Abschluss der Arbeit per Befehlsausführung entschieden.

Zunächst wurde die Claude API vorgeschlagen, sie erfordert jedoch kostenpflichtige Abonnements. Deshalb wird stattdessen die bereits bestehende GitHub-Copilot-Lizenz genutzt.

Die Erweiterung funktioniert so: Nach Abschluss der Arbeit wird ein git diff abgerufen, an GitHub Copilot ein Prompt gesendet und so automatisch typische Flüchtigkeitsfehler erkannt.

Funktionsweise

Nach Abschluss der Arbeit auf die Statusleisten-Schaltfläche klicken
↓
git diff HEAD abrufen und Unterschiede vergleichen
↓
diff parsen und geänderte Dateien sowie Zeilennummern extrahieren
↓
diff und Prompt an GitHub Copilot (vscode.lm API) senden
↓
Copilot gibt das Review-Ergebnis im JSON-Format zurück
↓
Review-Ergebnis in der VS Code-Ansicht anzeigen
↓
Durch Klick auf die Zeilennummer eines Hinweises springt man direkt zur betreffenden Datei und Zeile
↓
Vom KI-System erkannte Tendenzen werden gespeichert

So sieht der Bildschirm aus.

Wenn alle Arbeiten abgeschlossen sind, startet man vor dem Commit auf GitHub die Erweiterung Code Review. Sie vergleicht die Änderungen mit dem letzten Commit und prüft auf auffällige Stellen.

Die vom KI-System erkannten Tendenzen werden im Speicher abgelegt, sodass sichtbar wird, welche Fehler man besonders häufig macht.

So sieht der Prompt 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 man diese Punkte fortlaufend ergänzt und die Erweiterung aktualisiert, werden die eigenen Fehlertendenzen gezielter geprüft, und die Leistung verbessert sich nach und nach!

Technik und Umsetzung

Diese Erweiterung wurde ausschließlich mit TypeScript, der standardmäßigen VS Code API und den Node.js-Standardfunktionen entwickelt; es werden keinerlei externe Bibliotheken verwendet. Auch der Aufbau ist schlicht gehalten: Es gibt nur fünf zentrale .ts-Dateien.

Die standardmäßige VS Code API bietet mit vscode.lm (Language Model API) eine Funktion, mit der sich die Modelle von GitHub Copilot direkt aufrufen lassen. Damit lässt sich ein KI-Review ohne API-Schlüssel von Anthropic oder OpenAI umsetzen. Da es sich um eine vergleichsweise neue API mit wenig offizieller Dokumentation handelt, würde die Recherche der Spezifikation normalerweise viel Zeit kosten.

Während der Umsetzung habe ich Claude Code gefragt, wie sich Copilot-Modelle in einer VS Code-Erweiterung aufrufen lassen. So konnte ich direkt die Verwendung von vscode.lm.selectChatModels() sowie den Empfang von Antworten per Streaming (z. B. for await (const chunk of response.text)) und weitere konkrete Implementierungsdetails nachvollziehen.

Ebenso konnten wir durch die schrittweise Abstimmung mit Claude Code die bidirektionale Kommunikation im WebviewPanel (Nachrichtenaustausch zwischen Webview und Node.js) sowie einen persistenten Speicher mithilfe von context.globalState umsetzen und dabei die Zeit für das Studium der Dokumentation erheblich reduzieren.

Fazit

In diesem Beitrag ging es darum, eine VSCode-Erweiterung zu entwickeln, die Flüchtigkeitsfehler gesammelt vor dem Commit aufspürt.

Mit der Kombination aus git diff und Copilot lassen sich Übersehenes reduzieren; durch zusätzliche Prüfkriterien entsteht schrittweise ein persönliches Werkzeug, das auf die eigenen typischen Fehlerquellen zugeschnitten ist.

Eine überraschende Erkenntnis war, dass sich VSCode-Erweiterungen mit der standardmäßigen VSCode-API erstaunlich einfach entwickeln lassen. Ohne Claude Code hätte ich wohl nie daran gedacht, eine Erweiterung zu bauen! (lacht)

Den Code und seine Funktionsweise zu verstehen ist natürlich wichtig. Doch auch wenn man vieles der KI überlässt, entstehen Ideen und Erkenntnisse oft erst, wenn man einfach anfängt, etwas auszuprobieren und selbst Hand anlegt.