Installer Claude Code dans VS Code : Extension, Tutoriel et Réglages (Guide 2026)

Claude Code dans VS Code : l'agent IA au cœur de votre éditeur

Vous passez vos journées dans Visual Studio Code et vous voulez y brancher l'agent IA le plus puissant du moment ? Bonne nouvelle : Claude Code s'intègre nativement dans VS Code grâce à une extension officielle éditée par Anthropic. Diff viewer natif, partage automatique de votre sélection, ouverture en un raccourci clavier, remontée des erreurs du linter en temps réel — l'agent d'Anthropic devient un vrai copilote directement dans l'éditeur le plus utilisé au monde.

Dans ce tutoriel en français, vous allez apprendre comment installer Claude Code dans VS Code en moins de cinq minutes, comment connecter l'agent avec la commande /ide, comment choisir votre modèle, activer le diff natif, et régler les problèmes classiques (WSL, PATH, "command not found", extension invisible). À la fin, votre VS Code sera transformé en environnement de développement piloté par l'IA.

Sommaire

Pourquoi utiliser Claude Code dans VS Code plutôt que le terminal seul<a id="pourquoi-vscode"></a>

Claude Code est d'abord un agent terminal : vous pouvez parfaitement l'utiliser dans un shell classique. Alors pourquoi l'intégrer à VS Code ? Parce que l'intégration éditeur change radicalement l'expérience.

D'abord, la relecture des modifications devient visuelle. Au lieu de lire un diff brut dans le terminal, vous voyez les changements proposés par Claude directement dans le diff viewer natif de VS Code, avec la coloration syntaxique et la possibilité d'éditer à la volée avant d'accepter. Ensuite, le contexte est partagé automatiquement : l'onglet actif, votre sélection de code et les erreurs remontées par le linter sont transmis à l'agent sans copier-coller. Enfin, vous ouvrez Claude en un raccourci clavier, sans quitter votre fenêtre.

C'est exactement le même moteur que le CLI : si vous débutez avec l'outil, commencez par notre guide pour débuter avec Claude Code, puis revenez ici pour l'intégration éditeur. Et si vous travaillez plutôt dans l'écosystème JetBrains, nous avons un tutoriel dédié pour installer Claude Code dans IntelliJ et PyCharm.

Prérequis avant l'installation<a id="prerequis"></a>

Avant d'installer l'extension, réunissez les trois éléments suivants.

1. VS Code à jour

Vérifiez que vous utilisez une version récente de Visual Studio Code (menu Code → À propos / Help → About). Une version trop ancienne peut empêcher l'extension de se charger correctement. Mettez à jour si nécessaire.

2. Node.js et npm installés

Le CLI Claude Code s'installe via npm. Vérifiez que Node.js est présent :

node --version
npm --version

Si ces commandes échouent, installez d'abord Node.js 18 ou supérieur depuis nodejs.org. Sous Windows, si vous prévoyez de travailler dans WSL, installez Node dans votre distribution Linux, pas côté Windows.

3. Le CLI Claude Code

L'extension VS Code fait le pont entre l'éditeur et le CLI claude : elle ne contient pas l'agent. Installez donc le CLI au préalable :

npm install -g @anthropic-ai/claude-code

Puis vérifiez :

claude --version

Pour une installation détaillée selon votre système d'exploitation, suivez notre tutoriel complet pour installer Claude Code sur Mac, Windows et Linux. Notez que l'extension peut aussi installer le CLI automatiquement à son premier lancement, mais l'installation manuelle reste la plus fiable.

4. Un compte Claude actif

Claude Code fonctionne avec n'importe quel abonnement Claude payant (Pro, Max, Team ou Enterprise) ou une clé API Anthropic. Aucune configuration compliquée : vous serez invité à vous connecter au premier lancement de claude.

Installer l'extension Claude Code pour VS Code<a id="installer-extension"></a>

Il existe deux méthodes pour installer l'extension. La plus simple passe par le Marketplace VS Code.

Méthode 1 : depuis le Marketplace (recommandée)

Méthode 2 : via le terminal

Si vous préférez la ligne de commande, lancez simplement claude depuis le terminal intégré de VS Code. Au premier démarrage, Claude Code détecte l'éditeur et propose d'installer automatiquement l'extension d'intégration.

Redémarrer et vérifier

Après l'installation, rechargez la fenêtre (Cmd/Ctrl+Shift+P → "Reload Window"). Vous verrez apparaître un bouton Claude Code dans l'interface, et le raccourci Cmd+Esc (Mac) ou Ctrl+Esc (Windows/Linux) ouvrira l'agent dans un panneau latéral.

Connecter l'agent à l'éditeur avec /ide<a id="commande-ide"></a>

Il existe deux façons d'activer l'intégration entre Claude Code et VS Code.

Le terminal intégré (automatique)

La plus simple. Ouvrez le terminal intégré de VS Code (menu Terminal → Nouveau terminal) et lancez :

claude

Lancé depuis le terminal de VS Code, Claude Code détecte automatiquement l'éditeur et active toutes les fonctionnalités d'intégration. Rien d'autre à faire.

La commande /ide (terminal externe)

Si vous préférez un terminal externe (iTerm, Windows Terminal, Alacritty…), lancez claude puis tapez :

/ide

Cette commande connecte Claude Code à votre fenêtre VS Code et active le diff viewer, le partage de sélection et les diagnostics. Point important : démarrez toujours Claude Code depuis le répertoire racine de votre projet pour qu'il ait accès aux mêmes fichiers que l'éditeur.

Pour aller plus loin sur le contexte projet, notre guide du fichier CLAUDE.md explique comment donner à l'agent vos conventions, votre architecture et vos commandes — un réflexe à prendre dès le premier jour.

Les 6 fonctionnalités clés de l'intégration VS Code<a id="fonctionnalites"></a>

Une fois connecté, voici ce que l'extension apporte concrètement à votre éditeur.

1. Ouverture rapide (Cmd+Esc / Ctrl+Esc)

Ouvrez Claude Code instantanément depuis l'éditeur avec Cmd+Esc (Mac) ou Ctrl+Esc (Windows/Linux), ou via le bouton dédié. L'agent s'affiche dans un panneau latéral, à côté de votre code.

2. Diff viewer natif

Fonctionnalité phare. Quand Claude propose des modifications, elles s'affichent dans le diff natif de VS Code au lieu d'un diff terminal illisible. Vous relisez, éditez, acceptez ou refusez — la revue de code assistée devient fluide.

3. Partage automatique de la sélection

La sélection courante ou l'onglet actif est automatiquement transmis à l'agent. Sélectionnez une fonction, demandez "explique ce bloc" ou "ajoute la gestion d'erreur" : Claude sait déjà de quoi vous parlez.

4. Références de fichiers précises

Insérez une référence de fichier ciblée dans votre prompt (par exemple @src/auth.ts#L1-99), parfaite pour indiquer exactement les lignes à modifier sans copier-coller.

5. Remontée des diagnostics

Les erreurs de lint, warnings et erreurs de syntaxe de VS Code sont partagées avec Claude en temps réel. L'agent voit les soulignements rouges en même temps que vous et peut les corriger sans que vous ayez à recopier le message.

6. Panneau conversationnel intégré

Contrairement au terminal pur, le panneau de l'extension conserve l'historique visuel de la conversation, les blocs de code repliables et les boutons d'action. Pour automatiser encore davantage vos actions (formatage, tests, notifications), pensez aux hooks de Claude Code qui déclenchent des scripts à chaque étape de l'agent.

Vidéo : Claude Code 2.0 et l'intégration VS Code

Avant de configurer finement l'extension, cette vidéo fait le tour des nouveautés de Claude Code 2.0, en abordant précisément les extensions VSCode, les checkpoints et le suivi d'usage. Idéale pour visualiser l'outil en action dans l'éditeur :

Choisir son modèle et régler l'extension<a id="configuration"></a>

Deux niveaux de configuration cohabitent : les réglages côté Claude Code et ceux côté extension.

Choisir le modèle avec /model

Dans le panneau Claude Code, la commande /model permet de basculer entre les modèles :

Le choix du modèle influence directement le coût et la vitesse de chaque session. Beaucoup de développeurs gardent Sonnet et passent sur Opus uniquement pour les tâches lourdes.

Régler le diff viewer

Pour décider où s'affichent les diffs :

Protéger vos fichiers sensibles

Le partage de sélection transmet le contenu de vos fichiers à l'agent. Pour exclure un fichier sensible comme .env, ajoutez une règle de refus Read dans vos permissions : elle empêche Claude d'accéder à ce fichier. Vous pouvez brancher des outils externes (bases de données, APIs internes) via le protocole MCP (Model Context Protocol), un sujet qui rejoint le travail sur les agents IA open-source et auto-hébergés détaillé sur formation-openclaw.com pour les équipes qui veulent garder la maîtrise de leur infrastructure.

Dépannage : WSL, PATH, extension invisible<a id="depannage"></a>

Voici les pannes les plus fréquentes et leurs correctifs.

"command not found" au lancement

L'extension n'apparaît pas

"No available IDEs detected" sous WSL

C'est le grand classique sous Windows. La cause est presque toujours le pare-feu Windows ou le réseau NAT de WSL2 qui bloque la connexion entre WSL et VS Code. Ouvrez VS Code en mode Remote - WSL, installez le CLI dans votre distribution Linux, et consultez notre guide dédié pour installer et optimiser Claude Code sur WSL qui détaille les correctifs pare-feu et le mode réseau *mirrored*.

Sécurité : prudence avec l'auto-édition

Quand Claude Code tourne avec les permissions d'auto-édition activées, il peut modifier des fichiers de configuration exécutés automatiquement. Sur du code non fiable, privilégiez le mode d'approbation manuelle et vérifiez les changements avant de les accepter.

**Et si vous arrêtiez de configurer à la main ce qu'une IA peut faire à votre place ?** Intégrer Claude Code à VS Code n'est que la première marche. Découvrez comment déléguer des pans entiers de votre développement à des agents Claude Code orchestrés et bien configurés : [**se faire remplacer par l'IA**](https://go.saas-ia.io/se-faire-remplacer-par-lia). Vous y verrez des workflows complets, du setup éditeur jusqu'aux équipes d'agents en production.

Claude Code + VS Code vs Cursor : que choisir ?<a id="vs-cursor"></a>

Beaucoup de développeurs hésitent entre installer l'extension Claude Code dans VS Code et migrer vers Cursor, l'éditeur IA basé sur un fork de VS Code.

La différence est structurelle. Cursor remplace votre éditeur : c'est un produit complet avec l'IA intégrée nativement (autocomplétion, chat, agent). Claude Code s'ajoute à votre VS Code existant : vous gardez vos extensions, vos thèmes, vos réglages et vos raccourcis. Si vous êtes attaché à votre configuration VS Code et que vous voulez la puissance des modèles Claude sans changer d'outil, l'extension est le choix naturel. Si vous voulez une expérience IA "tout-en-un" clé en main, Cursor a du sens.

Pour un comparatif détaillé des deux philosophies, consultez notre article Claude Code vs Cursor. Notez aussi que rien ne vous empêche d'utiliser les deux : certains développeurs gardent VS Code + Claude Code pour le travail agentique lourd et Cursor pour l'autocomplétion au fil de la frappe.

Conclusion

Installer Claude Code dans VS Code prend cinq minutes et transforme durablement votre façon de coder : diff visuel, contexte partagé, ouverture au clavier, choix du modèle à la volée. Vous conservez tout votre environnement VS Code et vous y ajoutez l'un des agents IA les plus performants de 2026. La recette est simple — CLI installé, extension ajoutée, commande /ide — et les fonctionnalités d'intégration font le reste.

La prochaine étape logique est d'apprendre à piloter cet agent efficacement : rédiger de bons prompts, configurer un CLAUDE.md solide et enchaîner les tâches sans reprendre la main à chaque étape. C'est là que se joue le vrai gain de productivité.

FAQ : Claude Code et VS Code<a id="faq"></a>

Comment installer l'extension Claude Code dans VS Code ?

Ouvrez le panneau Extensions (Cmd/Ctrl+Shift+X), cherchez "Claude Code", installez l'extension officielle d'Anthropic, puis rechargez la fenêtre. Assurez-vous d'avoir installé au préalable le CLI avec npm install -g @anthropic-ai/claude-code.

L'extension est-elle gratuite ?

L'extension est gratuite à installer, mais elle nécessite un accès à Claude payant (abonnement Pro/Max/Team/Enterprise ou clé API Anthropic) pour fonctionner.

Comment ouvrir Claude Code au clavier dans VS Code ?

Utilisez Cmd+Esc (Mac) ou Ctrl+Esc (Windows/Linux) pour ouvrir l'agent dans un panneau latéral, sans quitter votre fenêtre.

Puis-je changer de modèle Claude depuis VS Code ?

Oui, la commande /model dans le panneau permet de basculer entre Opus, Sonnet et Haiku selon la complexité de la tâche et votre budget.

L'extension fonctionne-t-elle avec WSL ?

Oui, en ouvrant VS Code en mode Remote - WSL et en installant le CLI dans votre distribution Linux. En cas de message "No available IDEs detected", vérifiez le pare-feu Windows et le réseau WSL2.

Claude Code dans VS Code ou Cursor : lequel est le meilleur ?

Cela dépend de votre besoin : Claude Code s'ajoute à votre VS Code existant sans rien changer, tandis que Cursor est un éditeur IA complet qui remplace VS Code. Voir notre comparatif Claude Code vs Cursor pour trancher.