Création d'une extension VSCode avec Claude Code

Claude Code ayant été adopté au sein de l'entreprise, nous avons voulu créer un outil pratique utilisable dans notre travail. Nous avons ainsi développé une extension VSCode qui détecte en temps réel les fautes de frappe et les erreurs de balises dans l'éditeur !

Voici le récit de la démarche, depuis l'idée « Ce serait bien d'avoir cette fonctionnalité ! » jusqu'à la mise en œuvre.

Contexte

Pendant le développement, les oublis d'attributs « alt="" » ou les confusions entre caractères pleine chasse et demi-chasse sont fréquents, ce qui pose problème...

Nous avons d'abord imaginé l'outil idéal, puis l'avons présenté sous forme de dialogue avec le chatbot.

Nous souhaitions une application qui prévient ces erreurs courantes, par exemple en mettant en évidence les différences directement dans le navigateur ou en signalant les erreurs dans le code !

Liste de contrôle pour la revue de code | Liste de contrôle personnalisée à vérifier avant soumission
Diff visuel HTML/CSS | Collez deux codes pour visualiser leurs différences
Vérificateur de différences de captures d'écran | Comparaison pixel par pixel des images avant et après correction
Relecteur d'erreurs HTML/CSS en direct | Collez votre code et l'IA signale les problèmes

Elle a fait quelques suggestions, mais je vais lui demander d'autres fonctionnalités.

Que l'IA puisse donner des retours, c'est vraiment bien ! Mais je voudrais plutôt qu'elle surveille en temps réel dans VSCode et permette de vérifier après la fin du travail, plutôt que de devoir coller le code !

Nous avons décidé de la réaliser sous forme d'extension VSCode plutôt que d'application navigateur.

La surveillance en temps réel semblant coûteuse en appels API, nous avons opté pour une revue après le travail, déclenchée par une commande.

Claude API ayant été proposée en premier, mais nécessitant un paiement, nous avons décidé d'utiliser GitHub Copilot, auquel vous êtes déjà abonné.

En bref, il s'agit d'une extension qui récupère le git diff après le travail, envoie une requête à 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érer git diff HEAD et comparer les différences
↓
Analyser le diff pour extraire les fichiers modifiés et les numéros de ligne
↓
Envoyer le diff et le prompt à GitHub Copilot (API vscode.lm)
↓
Copilot renvoie les résultats de la revue au format JSON
↓
Afficher les résultats de la revue dans la vue VSCode
↓
Cliquer sur le numéro de ligne d'une remarque permet d'accéder au fichier et à la ligne concernés
↓
Accumulation des tendances détectées par l'IA

Voici à quoi ressemble l'écran.

Une fois l'ensemble du travail terminé, lancez l'extension Code Review avant de valider sur GitHub. Elle compare les modifications avec le commit précédent et vérifie qu'il n'y a rien d'anormal.

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

Voici à quoi ressemble le 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 vos propres points ici et en mettant à jour l'extension au fil du temps, les contrôles se concentrent sur vos tendances d'erreurs et les performances s'améliorent continuellement !

Technique et implémentation

Cette extension est développée uniquement avec TypeScript, l'API standard de VSCode et les fonctionnalités standard de Node.js, sans aucune bibliothèque externe. Sa structure reste simple, avec seulement cinq fichiers .ts principaux.

L'API standard de VSCode comprend vscode.lm (Language Model API), qui permet d'appeler directement les modèles de GitHub Copilot. Elle permet de mettre en place une revue par IA sans clé API Anthropic ou OpenAI, mais comme il s'agit d'une API relativement récente avec peu de documentation officielle, la recherche des spécifications prend généralement beaucoup de temps.

En posant à Claude Code la question « Comment appeler les modèles de Copilot depuis une extension VSCode ? » tout au long de l'implémentation, j'ai pu comprendre immédiatement l'utilisation de vscode.lm.selectChatModels() ainsi que les méthodes concrètes, comme la réception en streaming des réponses avec for await (const chunk of response.text).

De la même manière, la communication bidirectionnelle dans WebviewPanel (envoi et réception de messages entre le Webview et Node.js) ainsi que le mécanisme de stockage persistant utilisant context.globalState ont pu être mis en place en vérifiant chaque étape avec Claude Code, ce qui a permis de réduire considérablement le temps passé à approfondir la documentation.

Conclusion

Dans cet article, nous avons présenté la création d'une extension VSCode permettant de détecter les erreurs d'inattention en les repérant en une fois avant le commit.

En combinant git diff et Copilot, il est possible de réduire les oublis tout en augmentant les points de contrôle, afin d'obtenir un outil personnalisé qui cible vos propres tendances d'erreurs.

J'ai découvert qu'il est étonnamment simple de créer une extension VSCode grâce à l'API standard de VSCode. Sans Claude Code, je n'aurais jamais eu l'idée de développer une extension !（rires）

Comprendre le contenu et le fonctionnement du code est bien sûr essentiel, mais même en confiant entièrement la tâche à l'IA, c'est en passant à l'action et en essayant de créer quelque chose que l'on trouve souvent des idées et des découvertes.