Accueil › Claude Code › VS Code

Claude Code dans VS Code : guide complet de l’extension

L’extension Claude Code pour VS Code apporte une interface graphique native pour l’agent : diffs inline avec accept/reject, @-mentions de fichiers, Plan Mode visuel, auto-accept des éditions et conversations multi-onglets, le tout sans quitter l’éditeur.

Claude Code est conçu comme un outil terminal-first. Mais depuis le lancement de l’extension VS Code officielle (par Anthropic), vous pouvez bénéficier de toute la puissance de l’agent dans une interface graphique familière. L’extension fonctionne aussi dans Cursor, Windsurf et VSCodium.

Ce guide couvre l’installation, la configuration, les fonctionnalités principales, les raccourcis, les workflows recommandés et la résolution des problèmes courants.

Installation

Installer l’extension

1. Ouvrez VS Code et allez dans la vue Extensions (Ctrl+Shift+X / Cmd+Shift+X).
2. Recherchez « Claude Code ».
3. Trouvez l’extension officielle par Anthropic (éditeur vérifié, 2M+ installations).
4. Cliquez Install.

L’extension inclut le CLI Claude Code. Vous pouvez l’utiliser à la fois via l’interface graphique de l’extension et via le terminal intégré de VS Code.

Authentification

Au premier lancement, l’extension vous redirige vers claude.ai pour une authentification OAuth. Connectez-vous avec votre compte Claude (Pro, Max, Team ou Enterprise). Les identifiants sont stockés localement et partagés entre l’extension et le CLI.

Pour les providers tiers (Amazon Bedrock, Google Vertex AI, Microsoft Foundry), configurez les variables d’environnement dans les paramètres de l’extension. L’extension n’affichera pas le prompt de connexion si un provider tiers est configuré.

Premier lancement

Après l’installation, ouvrez le panneau Claude Code de trois façons :

Icône Spark : cliquez sur l’icône étincelle dans la sidebar d’activité (Activity Bar à gauche).
Barre de statut : cliquez sur « ✱ Claude Code » en bas à droite de l’éditeur.
Palette de commandes : Cmd+Shift+P > tapez « Claude Code ».

Un assistant d’onboarding apparaît au premier lancement. Parcourez les étapes (« Show me ») ou fermez-le. Vous pouvez le rouvrir plus tard en décochant « Hide Onboarding » dans les paramètres de l’extension.

Fonctionnalités principales

Diffs inline avec accept/reject

Quand Claude veut modifier un fichier, l’extension affiche une comparaison côte à côte entre l’original et les changements proposés. Vous pouvez :

Accepter les modifications : le code est appliqué dans votre workspace immédiatement.
Rejeter : les changements sont ignorés.
Commenter : expliquez ce qui ne va pas et Claude ajuste.

C’est un avantage majeur par rapport au CLI terminal, où les changements sont appliqués directement et la review passe par git diff.

@-mentions de fichiers

Dans le chat, tapez @ suivi d’un nom de fichier pour l’ajouter au contexte. L’extension propose de l’auto-complétion sur les fichiers de votre workspace. Vous pouvez aussi spécifier des plages de lignes : @file.ts#5-10 référence les lignes 5 à 10.

Raccourci : sélectionnez du texte dans l’éditeur, puis appuyez sur Option+K (Mac) / Alt+K (Windows/Linux). L’extension insère automatiquement une @-mention avec la référence au fichier et aux lignes sélectionnées.

Plan Mode visuel

Le Plan Mode de Claude Code est particulièrement puissant dans l’extension VS Code. L’agent explore votre codebase, vous pose des questions de clarification, puis génère un plan d’implémentation détaillé que vous pouvez reviewer et modifier visuellement avant de lancer l’exécution. Chaque étape du plan est affichée avec les fichiers concernés.

Auto-accept des éditions

Si vous faites confiance à l’agent sur certaines tâches, activez l’auto-accept. Claude applique automatiquement les modifications sans attendre votre validation. C’est l’équivalent graphique du --dangerously-skip-permissions du CLI, mais avec un contrôle plus fin (vous voyez toujours les diffs défiler en temps réel).

Extended Thinking

Le bouton Extended Thinking (en bas à droite de la zone de saisie) affiche le raisonnement de Claude avant les modifications. C’est précieux pour comprendre pourquoi l’agent prend certaines décisions, surtout sur des logiques complexes.

Conversations multi-onglets

Ouvrez plusieurs conversations Claude Code dans des onglets ou fenêtres séparés. Chaque conversation maintient son propre contexte. Pratique pour travailler sur plusieurs features en parallèle.

Partage automatique des diagnostics

Les erreurs de lint et de syntaxe détectées par VS Code sont automatiquement partagées avec Claude. Quand vous voyez un problème souligné en rouge dans l’éditeur, Claude le voit aussi et peut le corriger sans que vous ayez à copier-coller le message d’erreur.

Raccourcis clavier

Extension VS Code vs CLI terminal : quand utiliser quoi ?

Les deux approches sont complémentaires et utilisent le même abonnement.

En pratique, beaucoup de développeurs utilisent les deux : l’extension pour les modifications de code avec review visuelle, et le CLI pour les tâches multi-fichiers complexes, le scripting et l’automatisation. Les deux sessions sont indépendantes mais partagent la même configuration (CLAUDE.md, MCP servers, hooks).

Utilisation dans Cursor

L’extension Claude Code fonctionne dans Cursor puisque Cursor est un fork de VS Code et supporte ses extensions. Installez-la de la même façon (marketplace d’extensions) et elle se connecte au même binaire CLI et à la même authentification.

Cela crée un setup intéressant : vous pouvez utiliser l’agent Claude Code de Cursor (multi-modèle, Composer, Tab) ET l’agent Claude Code natif d’Anthropic (mono-Claude, terminal-first) dans le même éditeur. Chacun a ses forces : l’agent Cursor pour le quotidien multi-modèle, Claude Code pour les tâches autonomes profondes.

MCP dans l’extension VS Code

L’extension utilise les mêmes serveurs MCP que le CLI. Configurez vos serveurs via le CLI (claude mcp add), et ils sont automatiquement disponibles dans l’extension. Utilisez /mcp dans le chat de l’extension pour voir et gérer les serveurs connectés.

Les subagents se configurent aussi via le CLI (fichiers .claude/agents/*.md) et sont utilisables depuis l’extension. La configuration est partagée : un seul endroit à maintenir.

Workspaces et multi-projets

L’extension lance une session Claude Code séparée par dossier de workspace. Si vous avez un workspace VS Code multi-root (plusieurs dossiers), chaque dossier a sa propre session avec son propre contexte. C’est idéal pour les architectures microservices où chaque service est un dossier séparé.

Chaque session charge automatiquement le CLAUDE.md du dossier correspondant. Vous pouvez avoir des conventions différentes par service, et l’agent les respecte dans chaque session.

Workflows recommandés

Refactoring avec review visuelle

Le workflow le plus productif dans l’extension combine le Plan Mode et les diffs visuels :

1. Ouvrez le panneau Claude Code (Cmd+Esc).
2. Décrivez le refactoring souhaité. L’agent entre en Plan Mode, explore votre code et propose un plan.
3. Reviewez le plan visuellement : chaque étape liste les fichiers concernés et les modifications prévues.
4. Validez le plan. L’agent exécute les modifications une par une.
5. Pour chaque fichier modifié, un diff côte à côte apparaît. Acceptez ou rejetez chaque modification individuellement.
6. À la fin, l’agent confirme que tout est cohérent et propose de lancer les tests.

Ce workflow n’est pas possible en CLI pur, où les modifications sont appliquées et la review passe par git diff après coup. L’extension donne un contrôle granulaire sur chaque changement.

Débogage contextuel

L’extension partage automatiquement les erreurs de lint et de syntaxe avec Claude. Quand vous voyez un soulignement rouge dans votre code :

1. Sélectionnez le code problématique.
2. Appuyez sur Option+K (Mac) / Alt+K pour insérer une @-mention avec les lignes exactes.
3. Tapez « Corrige cette erreur et explique la cause » dans le chat.
4. Claude voit le code, l’erreur diagnostiquée par VS Code, et le contexte du projet. Le fix est ciblé et précis.

Exploration de codebase inconnue

L’extension est idéale pour onboarder sur un nouveau projet :

1. Ouvrez le projet dans VS Code.
2. Lancez Claude Code et demandez « Explique-moi l’architecture de ce projet. Quels sont les modules principaux et comment ils interagissent ? »
3. Claude explore le code, lit les fichiers de configuration, et produit un résumé structuré.
4. Posez des questions de suivi en utilisant les @-mentions pour creuser des fichiers spécifiques.
5. Quand vous comprenez l’architecture, passez en mode édition pour vos modifications.

Configuration avancée

Paramètres utiles de l’extension

Ouvrez les paramètres VS Code (Cmd+, / Ctrl+,) et recherchez « Claude Code » pour accéder aux options :

Empêcher l’installation automatique

Le CLI Claude Code installe automatiquement l’extension VS Code quand il détecte l’éditeur. Pour désactiver ce comportement (utile en entreprise ou en CI/CD) :

export CLAUDE_CODE_SKIP_VSCODE_INSTALL=1

Configuration providers tiers

Pour les organisations utilisant Amazon Bedrock ou Google Vertex AI, ajoutez les variables dans les paramètres de l’extension ou dans ~/.claude/settings.json :

{
  "env": {
    "CLAUDE_CODE_USE_BEDROCK": "1",
    "AWS_REGION": "eu-west-1"
  }
}

Cette configuration assure que vos données restent dans votre infrastructure cloud. L’extension n’affichera pas de prompt de connexion Anthropic.

Claude Code Extension vs GitHub Copilot : cohabitation

Les deux extensions peuvent coexister dans VS Code. Elles servent des objectifs différents :

GitHub Copilot excelle en auto-complétion ligne par ligne (ghost text) et en suggestions rapides pendant la frappe. C’est un outil de flux : il accélère l’écriture du code que vous savez déjà écrire.

Claude Code excelle en tâches autonomes : refactoring multi-fichiers, debugging contextuel, implémentation de features complètes, analyse architecturale. C’est un outil de délégation : vous décrivez ce que vous voulez et il le construit.

La combinaison est puissante : Copilot pour les micro-suggestions en temps réel, Claude Code pour les macro-tâches déléguées. Le coût combiné (10 $/mois Copilot + 20 $/mois Claude Pro) reste raisonnable pour un développeur professionnel.

Si vous utilisez Cursor au lieu de VS Code, l’auto-complétion Cursor Tab remplace Copilot, et l’extension Claude Code apporte les capacités agentiques profondes en complément.

Résolution de problèmes

Autres interfaces Claude Code

L’extension VS Code n’est qu’une des cinq interfaces disponibles pour Claude Code. Selon votre workflow, d’autres options peuvent être plus adaptées :

Toutes les interfaces partagent le même abonnement et la même configuration (CLAUDE.md, MCP, hooks). Vous payez une fois et accédez partout.

Pour les développeurs Java, Kotlin et Python, le plugin JetBrains offre une expérience similaire à l’extension VS Code mais dans IntelliJ IDEA, PyCharm, WebStorm et GoLand. L’interface s’ouvre avec Cmd+Esc (Mac) / Ctrl+Esc (Windows/Linux).

L’application desktop ajoute des fonctionnalités uniques : une preview d’application qui lance votre serveur de développement directement dans l’app, et des connecteurs vers GitHub, Slack, Linear et Notion pour un workflow intégré sans navigateur. C’est un bon complément pour les développeurs qui veulent un espace dédié à Claude Code en dehors de l’éditeur.