Ik heb een VSCode-extensie gemaakt met Claude Code

Nu Claude Code binnen ons bedrijf is geïntroduceerd, wilde ik een handige tool bouwen die we in ons werk kunnen gebruiken. Daarom heb ik een VSCode-extensie gemaakt die typefouten, tagfouten en andere fouten in de editor bewaakt!

Hieronder vind je een overzicht van hoe het idee ontstond en hoe het is uitgewerkt, van de eerste gedachte tot de implementatie: "Zou het niet fijn zijn als er zo'n functie was?"

Verloop

Tijdens de implementatie gebeurt het vaak dat je denkt: "Ik ben alt="" vergeten!" of "Full-width en half-width tekens door elkaar gebruikt!" Dat soort kleine, onnodige fouten zijn een terugkerend probleem.

Het idee was om zo'n tool te hebben, dus begon ik met het voorleggen ervan in een chatgesprek.

Een app die dit soort fouten voorkomt: bijvoorbeeld verschillen in de browser markeren of code-fouten signaleren. Dat wilde ik bouwen!

Checklist codereview | Een aangepaste checklist om te controleren voordat je indient
HTML/CSS visuele diff | Plak twee codefragmenten en visualiseer de verschillen
Screenshot-diffchecker | Vergelijk afbeeldingen van vóór en na de aanpassing pixel voor pixel
Live HTML/CSS-foutenreviewer | Plak gewoon je code en de AI wijst de fouten aan

Er zijn al een paar suggesties gedaan, maar ik ga nog een extra verzoek indienen

Het is echt goed dat de AI fouten aanwijst! Ik wil alleen niet dat je code moet plakken, maar dat het in VSCode realtime wordt gemonitord of dat je de resultaten kunt controleren zodra je klaar bent met werken!

Er is besloten om het als VSCode-extensie te bouwen in plaats van als browserapplicatie.

Realtime monitoring lijkt veel API-kosten met zich mee te brengen, dus hebben we gekozen voor een review na afloop van het werk, uitgevoerd via een commando.

Aanvankelijk werd de Claude API voorgesteld, maar die vereist betaling. Daarom is besloten om GitHub Copilot te gebruiken, waarvoor we al een abonnement hebben.

In het kort: de extensie haalt na het werk de git diff op, stuurt een prompt naar GitHub Copilot en detecteert zo automatisch slordige fouten.

Werking

Klik na het voltooien van je werk op de statusbalkknop
↓
Haal git diff HEAD op en vergelijk de wijzigingen
↓
Parseer de diff en extraheer de gewijzigde bestanden en regelnummers
↓
Stuur de diff en de prompt naar GitHub Copilot (vscode.lm API)
↓
Copilot retourneert de reviewresultaten in JSON-formaat
↓
Toon de reviewresultaten in de VSCode-weergave
↓
Klik op een regelnummer in de bevinding om naar het betreffende bestand en de regel te springen
↓
Sla de tendensen die de AI detecteert op

Zo ziet het scherm eruit.

Zodra je al je werk hebt afgerond, start je de Code Review-extensie voordat je de wijzigingen in GitHub commit. Deze vergelijkt de wijzigingen met de vorige commit en controleert of er iets niet klopt.

De tendensen die de AI detecteert, worden opgeslagen in de opslag, zodat je inzicht krijgt in welke fouten je het vaakst maakt.

Zo ziet de prompt eruit.

チェック観点:
- テキスト内の不自然なスペース（全角・半角スペースの混入など）
- 大文字・小文字の不統一（クラス名・テキストなど）
- 誤字脱字の可能性がある箇所
- 括弧・記号の全角・半角混在（例: (）・（) のように開き括弧と閉じ括弧で全角半角が混ざっている、テキスト中に全角の()[]{}が使われているなど）
- <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> 以外の要素が入っている

Door dit toe te voegen en de extensie steeds bij te werken, controleert deze gerichter op jouw veelvoorkomende fouten en verbetert de prestatie voortdurend!

Technisch / implementatie

Deze extensie is uitsluitend gebouwd met TypeScript, de standaard VSCode-API en Node.js-standaardfunctionaliteit; er worden geen externe bibliotheken gebruikt. De opzet is eenvoudig, met slechts vijf belangrijke .ts-bestanden.

De standaard VSCode-API bevat vscode.lm (Language Model API), waarmee je de modellen van GitHub Copilot rechtstreeks kunt aanroepen. Hiermee kun je AI-review implementeren zonder API-sleutels van Anthropic of OpenAI, maar omdat het een relatief nieuwe API is met weinig officiële documentatie, kost het onderzoeken van de specificaties normaal gesproken veel tijd.

Door Claude Code te vragen "hoe roep ik de modellen van Copilot aan vanuit een VSCode-extensie?" tijdens de implementatie, kreeg ik direct inzicht in het gebruik van vscode.lm.selectChatModels() en in concrete implementatiemethoden, zoals het ontvangen van streamingresponses (for await (const chunk of response.text)).

Op dezelfde manier hebben we, door stap voor stap met Claude Code mee te werken, ook de tweerichtingscommunicatie via WebviewPanel (berichten verzenden en ontvangen van Webview naar Node.js) en het persistente opslagmechanisme met context.globalState gerealiseerd, waardoor we aanzienlijk minder tijd kwijt waren aan het uitgebreid doorspitten van de documentatie.

Conclusie

In dit artikel heb ik laten zien hoe ik een VSCode-extensie heb gemaakt waarmee je kleine fouten al vóór het committen in één keer kunt opsporen.

Door git diff te combineren met Copilot loop je minder risico op over het hoofd geziene fouten, en kun je de controlepunten uitbreiden zodat de tool steeds beter past bij jouw eigen foutpatronen.

Het bleek verrassend eenvoudig om een VSCode-extensie te bouwen met de standaard VSCode API. Zonder Claude Code had ik nooit gedacht aan het maken van een extensie. Haha!

Het begrijpen van de code en de werking ervan is natuurlijk belangrijk, maar ook als je alles aan AI overlaat, ontstaan er ideeën en inzichten wanneer je gewoon begint met bouwen en zelf aan de slag gaat.