J'ai créé une extension VSCode avec Claude Code

Après avoir adopté Claude Code en interne, j'ai souhaité créer un outil utile pour les tâches quotidiennes. J'ai donc développé une extension VSCode qui surveille les fautes de frappe, les erreurs de balises et autres erreurs dans l'éditeur !

J'ai documenté le parcours, de l'idée initiale « ce serait bien d'avoir cette fonctionnalité » jusqu'à sa mise en œuvre !

Contexte

J'avais du mal avec les erreurs d'inattention lors de l'implémentation, comme « oublier d'ajouter alt="" » ou « mélanger les caractères pleine largeur et demi-largeur ».

J'ai pensé qu'un outil comme celui-ci serait utile, alors j'ai d'abord essayé de le présenter sous forme de dialogue dans un chat.

Je veux créer une application qui prévient les erreurs d'inattention, par exemple un outil qui mettrait en évidence les différences sur un navigateur ou signalerait les erreurs de code !

• Liste de vérification des révisions de code | Liste de contrôle personnalisée à vérifier avant la soumission
• Diff visuel HTML/CSS | Collez deux codes et visualisez les différences
• Vérificateur de différences de captures d'écran | Comparaison au pixel près des images avant et après correction
• Vérificateur d'erreurs HTML/CSS en direct | L'IA signale les problèmes en collant simplement le code

Il a fait quelques suggestions, mais j'ai décidé de soumettre des demandes supplémentaires.

C'est génial que l'IA signale les problèmes ! Cependant, au lieu de simplement coller le code, je veux une surveillance en temps réel dans VSCode ou la possibilité de vérifier après avoir terminé le travail.

Nous avons décidé de créer une extension VSCode plutôt qu'une application de navigateur.

La surveillance en temps réel semblait trop coûteuse en appels API, nous avons donc opté pour un examen après l'exécution d'une commande.

Claude API a d'abord été suggéré, mais comme il nécessite un paiement, nous avons décidé d'utiliser GitHub Copilot, que nous avons déjà en contrat.

En résumé, il s'agit d'une extension qui récupère git diff après le travail, envoie une invite à GitHub Copilot et détecte automatiquement les erreurs d'inattention.

Fonctionnement

Une fois le travail terminé, cliquez sur le bouton de la barre d'état
↓
Récupérez git diff HEAD et comparez les différences
↓
Analysez la différence et extrayez les fichiers modifiés et les numéros de ligne
↓
Envoyez la différence et l'invite à GitHub Copilot (API vscode.lm)
↓
Copilot retourne les résultats de la revue au format JSON
↓
Affichez les résultats de la revue dans la vue VSCode
↓
Cliquez sur le numéro de ligne de la remarque pour accéder au fichier et à la ligne correspondants
↓
Accumulation des tendances détectées par l'IA

Voici à quoi ressemble l'écran.

Une fois que vous avez terminé le travail, lancez la fonctionnalité Code Review avant de valider votre commit sur GitHub. Elle compare les différences avec votre dernier commit et vous signale s'il y a quelque chose qui ne va pas.

Les tendances détectées par l'IA s'accumulent dans le stockage, ce qui vous permet de visualiser vos erreurs les plus fréquentes.

Voici un exemple de prompt.

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

En ajoutant à cet endroit et en mettant à jour la fonctionnalité, vous pouvez vérifier en priorité vos tendances d'erreur personnelles et améliorer progressivement les performances!

Aspects techniques et mise en œuvre

Cette fonctionnalité est construite uniquement avec TypeScript + l'API standard de VSCode + les fonctionnalités standard de Node.js, sans aucune dépendance externe. La structure des fichiers est également simple, avec seulement 5 fichiers .ts principaux.

L'API standard de VSCode propose vscode.lm (Language Model API), une fonctionnalité qui permet d'appeler directement les modèles de GitHub Copilot. Grâce à cela, les avis IA peuvent être mis en œuvre sans clés API d'Anthropic ou OpenAI, mais il s'agit d'une API relativement nouvelle avec peu de documentation officielle, ce qui nécessiterait normalement du temps pour les enquêtes de spécification.

En posant la question à Claude Code « Comment puis-je appeler le modèle Copilot dans une extension VSCode? » et en progressant dans la mise en œuvre, j'ai pu comprendre sur place les méthodes de mise en œuvre spécifiques comme l'utilisation de vscode.lm.selectChatModels() et la réception en flux continu des réponses (for await (const chunk of response.text)).

De la même façon, en vérifiant auprès de Claude Code la communication bidirectionnelle dans WebviewPanel (envoi et réception de messages entre Webview et Node.js) et le mécanisme de stockage persistant en utilisant context.globalState, j'ai pu réduire considérablement le temps consacré à l'exploration approfondie de la documentation.

Conclusion

Aujourd'hui, nous avons parlé de la création d'une extension VSCode pour détecter les erreurs d'inattention « en masse avant de valider votre commit ».

En combinant git diff et Copilot, vous pouvez réduire les erreurs tout en augmentant les points de contrôle, transformant ainsi l'outil en votre assistant personnel adapté à vos tendances d'erreurs.

J'ai découvert qu'il est surprenamment facile de créer des extensions VSCode en utilisant l'API standard de VSCode. Sans Claude Code, je n'aurais jamais pensé à développer une extension ! (rires)

Bien sûr, il est important de comprendre le contenu et le fonctionnement du code, mais même en confiant tout à l'IA, le simple fait de créer quelque chose et d'essayer le rend possible — c'est en mettant la main à la pâte que naissent les idées et les découvertes.