Claude Code dans VS Code : le guide complet builder 2026

IA & Développement18 min de lecture·
Par David Meckler
·
Claude Code dans VS Code en 2026 : extension officielle Anthropic, CLI terminal, MCP servers et workflow combiné pour un builder Next.js

Claude Code dans VS Code, c’est l’extension officielle Anthropic disponible sur le Marketplace depuis 2025 sous l’identifiant anthropic.claude-code. Tu l’installes en deux clics, tu te connectes avec ton abonnement Claude Pro à 20 $/mois (ou une clé API à l’usage), et tu retrouves l’agent Claude Code dans la barre latérale de Visual Studio Code, en complément de la CLI terminal. Tu peux switcher entre les deux modes selon la tâche, sans recoder ton workflow.

J’utilise Claude Code dans VS Code tous les jours sur SEO Rank Analyzer (Next.js, MySQL, 200+ pages). En 6 mois, mon ratio extension/CLI s’est stabilisé à 70/30 : extension pour les éditions ciblées et les revues de code, CLI pour les chantiers de plus de 200 lignes ou les pipelines automatisés. La bascule vers l’extension m’a fait gagner environ 5 heures par semaine sur les micro-tâches que je perdais en switchant fenêtres.

Antoine, dev backend Python à Lyon, est passé de la CLI seule à l’extension en mars 2026. Sa raison : les revues de code de 4 à 8 fichiers où il devait copier-coller des chunks dans le terminal. Avec l’extension, il sélectionne le code dans VS Code, ouvre le panneau Claude, et lance la revue contextuelle. Gain mesuré : 8 heures par semaine, surtout sur les sprints clients où il code 6 jours sur 7.

Points clés

  • L’extension officielle s’installe depuis le Marketplace VS Code sous le nom anthropic.claude-code (sortie 2025, généralement disponible 2026)
  • Prérequis : VS Code 1.95+ ou Cursor, abonnement Claude Pro 20 $/mois minimum (ou clé API Anthropic à l’usage)
  • Visual Studio (Microsoft) ≠ VS Code : l’extension officielle Anthropic vise VS Code uniquement, Visual Studio dispose d’une extension communautaire dliedke.ClaudeCodeExtension non maintenue par Anthropic
  • L’extension fonctionne dans Cursor, Windsurf et autres forks VS Code-compatibles, sans configuration supplémentaire
  • Le combo extension + CLI dans le terminal intégré couvre 95 % des workflows quotidiens, MCP servers et slash commands custom inclus

Claude Code dans VS Code en 30 secondes

Tu as trois façons d’utiliser Claude Code dans un éditeur basé VS Code, et elles ne servent pas le même usage.

FaçonOutilLatenceBon pour
Extension officielleanthropic.claude-code dans VS Code2 à 5 sÉditions ciblées, revues de code, prompts contextuels
CLI terminal intégréclaude dans le terminal VS Code2 à 3 sChantiers > 200 lignes, scripts CI/CD, multi-fichiers profond
Fork VS Code (Cursor, Windsurf)Extension Anthropic + couches IA propres au fork2 à 5 sSi tu utilises déjà Cursor pour son autocomplete

L’extension n’est pas un remplacement de la CLI, c’est un complément. Tu actives les deux en parallèle si tu veux le confort UI d’un côté et la puissance scripting de l’autre. La documentation officielle Anthropic en français confirme cette approche dans sa section « Extension VS Code vs CLI ».

Prérequis et compatibilité en 2026

Avant d’installer, vérifie trois points qui font perdre du temps si tu les rates.

Versions VS Code, Cursor et autres IDE

L’extension officielle Anthropic supporte VS Code à partir de la version 1.95 (mise à jour mensuelle automatique sur la plupart des installations). Ouvre VS Code, va dans Code → À propos sur Mac ou Aide → À propos sur Windows pour voir ta version. Si tu es bloqué en dessous de 1.95, l’installation échoue silencieusement (le panneau ne s’ouvre pas après login).

Cursor (fork VS Code, à 20 $/mois) supporte l’extension Anthropic depuis sa version 0.45+. Windsurf (fork de Codeium, gratuit + plan Pro 15 $/mois) idem depuis fin 2025. Pour les autres forks comme Antigravity (Google) ou VSCodium, tu peux tenter mais Anthropic ne garantit rien officiellement.

Abonnement Claude Pro ou clé API Anthropic

L’extension a besoin d’une de ces deux options pour fonctionner :

  • Abonnement Claude Pro à 20 $/mois (~18,40 €) : forfait mensuel, environ 5 heures d’usage Claude Code par jour. Recommandé pour un usage builder solo régulier.
  • Plan Claude Max à 100 $/mois : sans restriction quotidienne pratique. Recommandé si tu codes 6+ heures par jour avec Claude Code.
  • Clé API Anthropic à l’usage : ~3 $ par million de tokens en input, 15 $ par million en output sur Sonnet 4.5. Recommandé pour un usage ponctuel ou pour scripter Claude Code dans un pipeline.

Tu peux configurer l’extension en Authentication → Subscription (compte Pro/Max) ou en Authentication → API Key (clé API). Le switch est instantané dans les paramètres VS Code.

VS Code n’est pas Visual Studio

C’est la confusion la plus fréquente dans les threads Reddit r/Anthropic. Visual Studio (Microsoft, environnement IDE complet pour C#/C++/.NET) et Visual Studio Code (Microsoft aussi mais éditeur léger multi-langages) sont deux produits différents. L’extension officielle Anthropic anthropic.claude-code vise uniquement VS Code.

Si tu utilises Visual Studio (par exemple pour du dev .NET en agence), il existe une extension communautaire dliedke.ClaudeCodeExtension sur le Marketplace Visual Studio. Elle n’est pas maintenue par Anthropic et ses fonctionnalités sont en retard de plusieurs versions par rapport à l’officielle. Pour du dev .NET sérieux avec Claude, la voie recommandée reste la CLI Claude Code dans le terminal intégré de Visual Studio (qui marche partout).

Installer l’extension Claude Code dans VS Code en 5 minutes

Le processus est simple si tu respectes l’ordre. Compte 5 minutes en tout, première activation comprise.

Étape 1 : installation depuis le Marketplace

Ouvre VS Code, presse Ctrl + Shift + X (Windows/Linux) ou Cmd + Shift + X (Mac) pour ouvrir le panneau Extensions. Tape claude code dans la barre de recherche. Tu vois plusieurs résultats : choisis celui édité par Anthropic (logo violet, badge Verified Publisher). L’identifiant exact est anthropic.claude-code.

Clique Install. L’extension s’ajoute en quelques secondes. Tu peux aussi l’installer en ligne de commande avec code --install-extension anthropic.claude-code. Pour la vérifier, va sur la page officielle de l’extension Marketplace.

Étape 2 : connexion à ton compte ou clé API

Une icône Claude apparaît dans la barre latérale gauche (logo en C stylisé violet). Clique dessus, le panneau s’ouvre à droite. Tu as deux choix d’authentification :

  • Sign in with Claude : ouvre un onglet navigateur, tu te connectes à ton compte Anthropic, l’extension récupère le token automatiquement.
  • Use API Key : tu colles une clé que tu as générée sur console.anthropic.com. Format sk-ant-api03-....

Pour un usage builder solo, l’abonnement Pro est plus prévisible côté facturation. Pour un usage en équipe ou en CI, la clé API est plus flexible.

Étape 3 : autoriser les permissions et activer l’extension

L’extension demande accès à ton workspace (lecture des fichiers du projet ouvert). Accepte. Sur Mac, macOS peut demander en plus l’accès au clavier et au système de fichiers via le panneau Préférences Système → Confidentialité et sécurité. Coche les cases correspondantes pour VS Code.

Vérifie que l’extension est active en regardant la barre de statut en bas de VS Code : tu dois voir « Claude Code » avec une pastille verte. Si la pastille est rouge, le problème vient soit du token d’authentification expiré, soit d’une version VS Code trop ancienne.

Étape 4 : premier prompt de test

Ouvre un fichier de ton projet (n’importe lequel, par exemple un composant React). Dans le panneau Claude latéral, tape : résume ce que fait ce fichier en 5 lignes. Claude lit le fichier ouvert, te répond. Si la réponse arrive en moins de 10 secondes avec un résumé pertinent, ton installation fonctionne.

Tu peux maintenant lancer des prompts plus complexes (« refactor cette fonction en TypeScript strict », « ajoute un test Jest pour cette classe »). L’extension applique les modifications avec preview avant validation.

Extension VS Code vs CLI terminal : qui fait quoi

C’est la question stratégique qui décide si tu utilises l’extension seule, la CLI seule, ou les deux. Voici le comparatif terrain après 6 mois d’usage parallèle.

CritèreExtension VS CodeCLI terminal
Latence par prompt2 à 5 s2 à 3 s
Édition multi-fichiersOui (avec preview UI)Oui (diffs en console)
Checkpoints / rollbackOui (UI)Oui (commandes)
Slash commands customOui (lecture .claude/commands/)Oui (idem)
MCP serversOuiOui
Scripting CI/CDLimitéNatif (claude -p "prompt")
Latence sur projet > 100k tokensMoyenneBonne
Confort revues de codeExcellentMoyen
Pull requests automatiquesVia MCP GitHubVia MCP GitHub
Mode autonome longue duréeLimitéExcellent
Visualisation des diffsNative VS CodeMode console

Règle empirique : si la tâche dure moins de 5 minutes, utilise l’extension. Si elle dure plus de 15 minutes ou implique 5+ fichiers, lance la CLI dans le terminal intégré. Entre les deux, ça dépend de ton confort.

L’avantage caché de l’extension dans VS Code, c’est l’accès direct à ta sélection. Tu mets en surbrillance 30 lignes, tu cliques droit, Claude Code → Explain selection ou Refactor selection. Le contexte est limité à ce que tu as sélectionné, donc la consommation de tokens reste basse.

Workflow concret pour un builder solo

Voici comment je structure ma journée sur SEO Rank Analyzer avec Claude Code dans VS Code. Trois cas types qui couvrent 90 % de mon usage.

Refactor multi-fichiers depuis l’extension

Quand je dois refactor un module de 4 à 8 fichiers (par exemple, harmoniser un patron d’API route Next.js sur 6 endpoints), je passe par l’extension. Je fais clic droit sur le dossier src/app/api/, Claude Code → Refactor with Claude. Je décris ce que je veux. Claude liste les fichiers à toucher, montre les diffs, je valide en batch.

L’extension affiche les diffs dans le panneau VS Code natif (avec couleurs, sauts de ligne, scrolling synchronisé). C’est nettement plus lisible que le mode console de la CLI.

Audit SEO via prompts contextuels

Quand j’ajoute une nouvelle page programmatique (par exemple /analyse/[type]), je sélectionne le fichier page.tsx, je lance dans le panneau Claude : « audite ce composant pour le SEO en 2026 : metaTitle, h1, schema JSON-LD, GEO ». Claude lit le fichier, repère les manques, propose un patch. Je valide ou j’ajuste.

Si tu veux pousser cette logique à un audit complet de ton site, notre audit complet par IA lance le même type d’analyse sur un site entier en 3 minutes (6 agents en parallèle + supervisor).

Combo extension + CLI dans la même session

Pour les chantiers vraiment lourds, j’ouvre les deux. L’extension dans le panneau latéral pour les questions courtes pendant que je code, et la CLI dans le terminal intégré (raccourci Ctrl + ù ou Ctrl + `) pour faire tourner un agent autonome sur un autre périmètre.

Concrètement la semaine dernière : la CLI tournait en arrière-plan pour générer 12 nouveaux articles de blog dans src/data/blog-posts.ts (script en boucle), pendant que je continuais à coder le composant SparklineChart avec l’extension active dans le panneau. Les deux Claude tournent en parallèle, sans conflit.

Léa, dev mobile freelance à Lille, va plus loin : elle a configuré une slash command custom /test-app dans .claude/commands/test-app.md qui prend en argument un nom d’écran SwiftUI, lance la compilation, démarre le simulateur iOS et screenshote les états. Elle l’invoque depuis l’extension comme depuis la CLI, même définition partagée.

Slash commands et personnalisation

L’extension lit le même dossier .claude/ que la CLI. Tout ce que tu configures pour la CLI marche dans l’extension, sans duplication.

Les slash commands natives utiles

Tape / dans le panneau Claude pour voir les commandes disponibles :

  • /clear: démarre une conversation fraîche (vide le contexte). À utiliser entre deux tâches sans rapport pour économiser des tokens.
  • /compact: compresse la conversation actuelle en gardant les décisions importantes. Utile sur les sessions longues.
  • /memory: édite le fichier CLAUDE.md à la racine du projet, qui définit le contexte permanent (stack, conventions, secrets à ne pas committer).
  • /help: liste toutes les commandes disponibles avec descriptions.
  • /cost: affiche le coût estimé de la session en cours (tokens consommés × tarif Sonnet/Opus).

Pour optimiser ta consommation de tokens dans Claude Code, notre guide des 18 hacks pour réduire la facture détaille les leviers concrets qui m’ont permis de tenir le plan Pro pendant 6 mois.

Créer une slash command custom

Crée un fichier .claude/commands/audit-page.md à la racine de ton projet avec ce contenu :

Audite la page Next.js fournie en argument selon les critères SEO 2026 :
- metaTitle (max 60 chars), différent du h1
- h1 (max 60 chars)
- excerpt (140-155 chars)
- schema JSON-LD présent
- GEO : llms.txt référencé

Retourne un patch markdown prêt à appliquer.

Désormais, dans l’extension comme dans la CLI, tu invoques /audit-page src/app/blog/[slug]/page.tsx et Claude exécute le prompt en remplaçant la cible par ton fichier. Tu peux paramétrer autant de commandes que tu veux dans .claude/commands/.

MCP servers : étendre l’extension avec des outils externes

MCP (Model Context Protocol, standard ouvert publié par Anthropic en 2024) permet à Claude Code de parler à des outils externes via des serveurs dédiés. L’extension VS Code utilise les mêmes MCP servers que la CLI, configurés dans ~/.claude.json ou .mcp.json à la racine du projet.

Les 5 MCP servers les plus utiles dans VS Code :

  • GitHub : créer des PR, lire les issues, commenter, fermer (prend une clé API GitHub)
  • Filesystem : lecture/écriture sur des dossiers hors du workspace courant
  • PostgreSQL : requêter ta base de données depuis l’éditeur (prend une URL postgres://)
  • Firecrawl : scraper et indexer des pages web pour la recherche keyword
  • Context7 : récupérer la documentation à jour de ta stack (Next.js, React, Tailwind, etc.)

Pour la liste complète et l’installation, notre guide des 20 MCP servers Claude Code détaille chaque serveur avec sa commande d’installation claude mcp add.

Claude Code dans Cursor et autres forks VS Code

Cursor (créé par Anysphere, 20 $/mois plan Pro) est un fork VS Code centré sur l’IA. Il accepte l’extension Anthropic officielle sans configuration spécifique.

L’intérêt du combo Cursor + extension Claude Code, c’est de cumuler l’autocomplete temps réel de Cursor (sur GPT-5 ou Claude Sonnet 4.5 selon ton choix) et la capacité agent autonome de Claude Code dans le panneau latéral. Tu obtiens deux IA en parallèle, chacune sur sa spécialité. Mon comparatif Claude Code vs Cursor détaille ce setup.

Windsurf et VSCodium acceptent aussi l’extension. Antigravity (Google, lancé fin 2025) la refuse pour l’instant : Google pousse son propre stack agent, et l’extension Anthropic n’est pas dans le marketplace Antigravity.

Si tu hésites entre Claude Code natif (extension Anthropic) et un autre stack agent comme Codex d’OpenAI ou GitHub Copilot, regarde le profil de tâche dominant : refactor profond → Claude Code, autocomplete temps réel → Cursor ou Copilot, agent CI cloud → Codex.

Limites et bugs connus en 2026

Honnêteté oblige, l’extension a des limites qu’il vaut mieux connaître avant d’investir.

Latence sur projets > 100k tokens : si tu ouvres un mono-repo avec 500 fichiers, l’extension peut prendre 8 à 15 secondes pour répondre. La CLI s’en sort mieux dans ce cas (elle gère la fenêtre de contexte plus agressivement). Solution : ferme les onglets non utilisés, ou bascule en CLI pour les gros projets.

Conflits potentiels avec GitHub Copilot : si tu as Copilot actif en autocomplete et l’extension Claude Code en panneau, les deux peuvent se déclencher en même temps. Pas de blocage technique, mais l’expérience devient confuse. Recommandation : désactive Copilot pendant les sessions Claude Code intensives, ou réserve Copilot à l’autocomplete et Claude à l’agent.

Bug connu extension v2.x : sur certaines versions de l’extension entre janvier et mars 2026, le panneau Claude se ferme tout seul après 30 minutes d’inactivité. Fix officiel dans la v2.4.x publiée mi-mars. Vérifie ta version dans Extensions → Claude Code → Version et mets à jour si tu es en dessous.

Pas de mode hors-ligne : l’extension a besoin d’une connexion internet permanente pour parler à l’API Anthropic. Pas de fallback local possible avec un LLM Ollama dans la version officielle (contrairement à ce que suggèrent certains threads Reddit). Si tu cherches du local-only, regarde des alternatives comme Continue.dev ou Cody Local.

Limites de session sur le plan Pro : environ 5 heures d’usage Claude Code par jour calendaire avec le plan Pro à 20 $/mois. Au-delà, tu reçois un message « daily limit reached » et tu dois attendre 24 h ou passer au plan Max à 100 $/mois.

Romain, lead dev fintech à Toulouse, gère ces limites en équipe : il prend une licence Claude Code Max partagée pour les chantiers lourds (100 $/mois) et 4 licences Pro individuelles à 80 $/mois total pour ses devs juniors. Coût total : 180 $/mois pour 4 développeurs, ce qui reste sous le coût d’un seul jour-homme facturé.

FAQ

Comment installer l’extension Claude Code dans VS Code ?

Ouvre VS Code, presse Ctrl + Shift + X, recherche claude code, choisis l’extension éditée par Anthropic (anthropic.claude-code). Clique Install. Connecte-toi avec ton compte Claude Pro ou colle une clé API Anthropic. Ouvre le panneau via l’icône Claude dans la barre latérale gauche. Compte 5 minutes en tout.

Quelle est la différence entre l’extension Claude Code et la CLI ?

L’extension vit dans VS Code (panneau latéral, accès direct à ta sélection, diffs en UI). La CLI vit dans le terminal (mode autonome longue durée, scripting, CI/CD). Les deux partagent la même configuration .claude/ et les mêmes MCP servers. Recommandé : utiliser les deux selon la tâche, pas choisir entre les deux.

Faut-il un abonnement Claude Pro pour utiliser l’extension VS Code ?

Soit un abonnement Claude Pro à 20 $/mois ou Max à 100 $/mois, soit une clé API Anthropic à l’usage (~3 $/M tokens input). Sans l’un des deux, l’extension s’installe mais ne peut pas envoyer de prompts. Le plan Pro inclut Claude Code, l’app web et les apps desktop sous le même tarif.

L’extension Claude Code fonctionne-t-elle dans Cursor ?

Oui, sans configuration supplémentaire. Cursor étant un fork VS Code, le marketplace inclut l’extension Anthropic officielle. Le combo Cursor (autocomplete temps réel) + extension Claude Code (agent autonome) est utilisé par les builders solo qui veulent les deux IA en parallèle. Coût combiné : 40 $/mois (Cursor Pro 20 $ + Claude Code Pro 20 $).

L’extension fonctionne-t-elle dans Visual Studio (l’IDE Microsoft) ?

Non. Visual Studio est un produit différent de VS Code. Anthropic ne maintient pas d’extension officielle pour Visual Studio. Une extension communautaire dliedke.ClaudeCodeExtension existe mais elle est en retard et non supportée par Anthropic. Pour du dev .NET, la CLI Claude Code dans le terminal intégré de Visual Studio reste l’option recommandée.

Peut-on utiliser Claude Code avec Ollama ou un LLM local ?

Pas dans la version officielle. L’extension parle uniquement à l’API Anthropic via internet. Si tu veux du local-only avec une UX similaire, regarde Continue.dev (open source) ou Cody Local (Sourcegraph). Pour Claude Code spécifiquement, le local-only n’est pas dans la roadmap publique d’Anthropic en 2026.

L’extension VS Code consomme-t-elle plus de tokens que la CLI ?

À périmètre équivalent, non. Les deux utilisent la même API Sonnet 4.5 et les mêmes optimisations de contexte. La différence vient de l’usage : l’extension est plus rapide à invoquer pour des micro-tâches, ce qui peut multiplier le nombre de prompts dans une journée. Si tu lances 50 prompts courts via l’extension contre 10 longs via la CLI, ta facture finale dépend du volume cumulé, pas du canal.

Comment configurer une clé API au lieu d’un abonnement ?

Va sur console.anthropic.com, génère une clé API (sk-ant-api03-...), copie-la. Dans VS Code, ouvre les paramètres de l’extension Claude Code, choisis Authentication → API Key, colle. Tu paies alors à l’usage selon la grille Anthropic (~3 $/M tokens input, 15 $/M tokens output sur Sonnet 4.5). Recommandé pour les workflows ponctuels ou pour scripter Claude Code dans des pipelines.

Conclusion : trois actions pour démarrer cette semaine

Tu as la doc, les prérequis, le workflow combiné et les pièges à éviter. Voici trois actions concrètes selon ton profil :

  1. Si tu n’as jamais essayé Claude Code : installe l’extension officielle (anthropic.claude-code) avec un abonnement Pro à 20 $/mois pour 30 jours. Lance 10 prompts contextuels sur ton projet en cours. Compare le ressenti avec ton outil actuel. Si tu sens un gain net, garde-le.
  1. Si tu utilises déjà la CLI Claude Code : ajoute l’extension en parallèle, sans rien changer à ta CLI. Configure une slash command custom dans .claude/commands/ pour ton cas d’usage le plus fréquent. Mesure le temps gagné sur une semaine.
  1. Si tu hésites avec Cursor, Copilot ou Codex : avant de migrer, regarde le profil de tâche qui domine ta semaine. Si c’est du refactor profond et du raisonnement multi-fichiers, Claude Code dans VS Code est le meilleur choix. Si c’est de l’autocomplete sub-seconde, regarde plutôt Cursor ou Copilot.

Et pour vérifier que ton site SEO suit le rythme de ton dev, lance un audit complet par IA en 3 minutes. C’est offert à l’inscription, sans carte bancaire.

Testez votre site maintenant

Analyse SEO gratuite par IA en 60 secondes.

Essai gratuit