We hebben een VSCode-extensie met Claude Code gemaakt | Nieuws

We hebben Claude Code intern geïmplementeerd en wilden een handige tool voor het werk maken. We hebben een VSCode-extensie gemaakt die je waarschuwt voor typefouten, tag-fouten en dergelijke in de editor!

We hebben het proces samengevat van "wat een handige functie zou dit zijn" tot aan de implementatie!

Achtergrond

We hadden problemen met veel onzorgvuldige fouten zoals "alt="" vergeten in te voeren" en "volle- en halfbreedte-karakters verwarren"...

We stelden ons voor dat zo'n tool handig zou zijn en besloten het eerst uit te proberen door ermee in gesprek te gaan.

Ik wil een app maken die onzorgvuldige fouten voorkomt, bijvoorbeeld iets dat verschillen in de browser markeert of code-fouten aanwijst!

Code Review Checklist | Aangepaste checklist om vóór indiening te controleren
HTML/CSS Visual Diff | Plak twee codes en visualiseer de verschillen
Screenshot Diff Checker | Pixel-vergelijking van afbeeldingen vóór en na correctie
Live HTML/CSS-foutbeoordelaar | AI wijst problemen aan als je code plakt

Ze deden enkele suggesties, maar ik wilde er nog meer eisen bijvoegen

Het is geweldig dat AI punten aangeeft!! Maar in plaats van code te plakken, wil ik dat het in real-time in VSCode monitort of na het werk kan worden gecontroleerd!

We besloten het als VSCode-extensie te maken in plaats van als browserapp.

Real-time monitoring lijkt duur in API-kosten te zijn, dus we gebruiken na-werk review via commando's.

Claude API werd aanvankelijk voorgesteld, maar omdat dat betaald is, gebruiken we GitHub Copilot waar we al een contract voor hebben.

In het kort: na het werk halen we git diff op, sturen we die naar GitHub Copilot met een prompt, en detecteert de extensie automatisch slordigheidsfoutjes.

Werkingsprincipe

Na het werk klikt u op de statusbalkknop
↓
git diff HEAD ophalen en verschillen vergelijken
↓
diff parseren en gewijzigde bestanden/regelnummers extraheren
↓
diff + prompt naar GitHub Copilot (vscode.lm API) sturen
↓
Copilot retourneert beoordelingsresultaat in JSON-indeling
↓
beoordelingsresultaat weergeven in VSCode-weergave
↓
op regelnummer van opmerking klikken springt naar betreffend bestand/regel
↓
AI-gedetecteerde patronen accumuleren

Het scherm ziet er zo uit.

Zodra het werk is voltooid, start je de Code Review extensie voordat je naar GitHub commit. Deze vergelijkt de verschillen met je vorige commit en controleert op onverwachte wijzigingen.

AI-gedetecteerde patronen worden opgeslagen, zodat je zichtbaar krijgt welke fouten je vaak maakt.

De prompt ziet er ongeveer zo uit.

チェック観点:
- テキスト内の不自然なスペース（全角・半角スペースの混入など）
- 大文字・小文字の不統一（クラス名・テキストなど）
- 誤字脱字の可能性がある箇所
- 括弧・記号の全角・半角混在（例: (）・（) のように開き括弧と閉じ括弧で全角半角が混ざっている、テキスト中に全角の()[]{}が使われているなど）
- <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 hier aanvullingen toe te voegen en de extensie bij te werken, kun je je veelvoorkomende fouten gericht controleren en verbetert de prestatie geleidelijk aan!

Technisch • Implementatie

Deze extensie is gemaakt met alleen TypeScript + VSCode standaard API + Node.js standaardfuncties, zonder externe bibliotheken. De bestandsstructuur is ook eenvoudig met slechts vijf belangrijkste .ts bestanden.

De VSCode standaard API heeft vscode.lm (Language Model API), waarmee je het GitHub Copilot model rechtstreeks kunt aanroepen. Hiermee kun je AI review implementeren zonder API-sleutels van Anthropic of OpenAI, maar omdat het een relatief nieuw API is met weinig officiële documentatie, zou normaal gesproken alleen al de onderzoekswerk veel tijd kosten.

Door Claude Code te vragen hoe je het Copilot-model oproept in een VSCode extensie en je implementatie voort te zetten, kon ik ter plekke concrete implementatiedetails begrijpen, zoals het gebruik van vscode.lm.selectChatModels() en het streamen van reacties (for await (const chunk of response.text)).

Op dezelfde manier kon ik door Claude Code telkens te raadplegen over bidirectionele communicatie in WebviewPanel (berichten verzenden/ontvangen tussen Webview en Node.js) en de persistente opslagmechanisme met context.globalState, aanzienlijk tijd besparen op het diepgaand bestuderen van documentatie.

Samenvatting

Dit keer heb ik jullie verteld over het maken van een VSCode extensie om careless fouten "in één keer voor je commit op te vangen".

Met de combinatie van git diff en Copilot kun je fouten verminderen en tegelijk meer controlpunten toevoegen, waardoor je je eigen persoonlijke tool steeds sterker maakt tegen je neiging tot fouten.

Het was een nieuwe ontdekking dat je VSCode-extensies eigenlijk vrij gemakkelijk kunt maken met de standaard API van VSCode. Zonder Claude Code zou ik nooit hebben gedacht om een extensie te proberen maken! (lacht)

Het is natuurlijk belangrijk om de inhoud en werking van code te begrijpen, maar zelfs als je alles aan AI overlaat, kun je door simpelweg aan de slag te gaan ideeën en inzichten ontdekken.