Installer Claude Code dans VS Code et garder la main
- Je choisis l’extension officielle publiée par Anthropic.
- Le panneau fonctionne sans installer séparément la commande claude.
- Je vérifie le compte utilisé, les permissions et les fichiers modifiés avant de continuer.
Pour utiliser Claude Code dans VS Code, installe l’extension officielle d’Anthropic, ouvre ton dossier de projet et connecte ton compte depuis le panneau Claude. Le panneau embarque son propre moteur : tu n’as pas besoin d’installer la commande `claude` pour commencer. Je te conseille de faire le premier essai sur une copie de projet, avec une modification facile à vérifier.
Le truc c’est que savoir installer une extension ne suffit pas pour lui confier ton site. Je veux surtout que tu saches quel dossier elle lit, ce qu’elle peut modifier et comment vérifier son travail. C’est là que tu passes d’une discussion avec une IA à un outil qui agit vraiment sur tes fichiers.
Tu en es où ?
La bonne extension porte le nom d’Anthropic
VS Code est l’éditeur dans lequel tu ouvres tes fichiers. Claude Code est l’agent d’Anthropic qui peut les lire, proposer des changements et exécuter des commandes selon les permissions accordées. Le chat de claude.ai dans ton navigateur n’est pas cette extension. Je fais cette distinction avant de toucher au projet, parce que les noms se ressemblent franchement beaucoup.
Ouvre la fiche officielle Claude Code. Je vérifie le nom de l’éditeur, Anthropic, et l’identifiant anthropic.claude-code. Un nombre d’installations ou un joli logo ne remplace pas cette vérification. Je ne te demande ni de récupérer un fichier d’installation sur un forum, ni de confier ton compte à un intermédiaire.
Visual Studio et Visual Studio Code sont des logiciels différents. Si ton écran affiche Visual Studio, ce parcours ne correspond pas à ton application. Cursor est encore un autre éditeur, dérivé de VS Code : une sous-page détaillera son installation, comme celle consacrée à JetBrains. Pour ce guide, garde simplement Visual Studio Code ouvert.
Préparer VS Code et ouvrir le bon dossier
Je te conseille une version actuelle de VS Code. Au moment de cette vérification, le Marketplace demande au moins la version 1.98.0, alors que la documentation Anthropic mentionne encore 1.94.0. Je retiens le prérequis le plus strict. Si l’extension refuse de s’installer, mets d’abord l’éditeur à jour plutôt que de chercher une ancienne version de l’extension.
Sur Mac, ouvre Extensions avec Cmd + Maj + X ; sur Windows et Linux, utilise Ctrl + Maj + X. Recherche Claude Code et installe la fiche Anthropic. Ces raccourcis servent seulement à afficher le catalogue. Tu peux aussi utiliser la vue Extensions à la souris si un raccourci est déjà occupé.
Avant toute demande, ouvre le dossier du projet avec le menu Fichier. Je te propose une copie contenant seulement ce qui sert à l’essai. Un dossier Téléchargements entier, avec des documents personnels mélangés, est un mauvais point de départ. Quand VS Code demande si tu fais confiance à un dossier, n’accepte que si tu connais sa provenance et son contenu.
Vérifie la liste des fichiers dans la colonne de gauche et ouvre celui que tu veux changer. Si tu découvres le projet, fais d’abord expliquer son organisation. Je préfère que tu repères le fichier de départ maintenant, plutôt que de découvrir après coup que Claude travaillait sur un autre dossier.
Quel compte connecter au panneau Claude ?
Ouvre un fichier puis le panneau Claude avec son icône en forme d’étincelle. La connexion passe par le compte proposé dans le parcours officiel. Je vérifie l’adresse du compte avant de valider, surtout si le navigateur garde plusieurs sessions ouvertes. Avoir un compte Claude gratuit ne donne pas automatiquement accès à Claude Code.
La documentation de connexion prévoit notamment les abonnements Claude compatibles et le compte Console. La Console est l’espace de facturation des usages techniques d’Anthropic. Choisis le parcours correspondant à ton accès, termine la connexion dans le navigateur, puis reviens dans VS Code. Je te conseille d’attendre que le panneau accepte une demande avant de passer à l’exercice.
Chez moi, j’utilise Claude Code et Codex via mes abonnements plutôt que par l’API, comme je l’ai expliqué dans mon Carnet. Une API, c’est un accès logiciel généralement facturé selon la consommation. Ça décrit mon choix, pas une promesse d’usage illimité pour le tien. Je regarde toujours le mode de connexion avant de comparer les dépenses.
Si une ancienne configuration utilise ANTHROPIC_API_KEY, ne suppose pas que l’abonnement sera utilisé : une clé approuvée peut orienter l’accès vers la facturation API. Je ne colle jamais cette clé dans une conversation pour demander de l’aide. Si tu dépannes une configuration partagée, fais confirmer le mode attendu par la personne qui gère le compte.
Si tu n’as pas encore d’accès compatible, tu peux découvrir Claude Pro pour suivre les exercices dans VS Code. Vérifie les limites du forfait avant de souscrire ; si ton compte donne déjà accès à Claude Code, garde ton abonnement actuel.
Une demande précise pour le premier essai
Pour le premier échange, je te propose cette demande : « Explique le rôle du fichier ouvert et indique où se trouve le lien de contact. Ne modifie aucun fichier. » Tu obtiens une réponse que tu peux vérifier à l’écran. Si Claude décrit une boutique alors que tu as ouvert une page de présentation, arrête-toi et retrouve le bon dossier.
Je transforme ensuite le besoin en petite tâche : « Change uniquement la destination du lien de contact dans le fichier indiqué. Garde le texte et les styles. Explique comment vérifier le résultat. » Nomme le fichier concerné, éventuellement avec une référence @ dans le panneau. Évite une demande comme améliore mon site : elle laisse trop de décisions ouvertes.
Dans Automate Your Busywork, Aytekin Tank explique sa méthode Divide and Conquer : découper un travail, repérer ses étapes, puis préparer son automatisation. Les modèles de formulaires de Jotform illustrent ce départ par une tâche répétable avant des processus plus larges. Je l’applique ici : identifier le lien, corriger sa destination, puis vérifier son ouverture.
J’ai repris Quel Canapé avec Claude Code et Codex après l’avoir laissé de côté. J’ai construit Canapé OS pour piloter le site, avec Claude pour l’architecture et Codex pour l’exécution. Pour ton premier chantier dans VS Code, je te conseille de reprendre ce principe : donne un rôle précis à l’IA et un résultat que tu peux observer.
Permissions et différences, les clics pour garder la main
En bas de la zone où tu écris ta demande, clique sur l’indicateur du mode de permissions. Pour débuter, je te conseille Manual : Claude demande alors ton accord avant les éditions et la plupart des commandes. Auto et Edit automatically peuvent laisser passer des modifications sans te solliciter. Si ton organisation impose un réglage, vérifie celui qui est réellement affiché.
Envoie ensuite la demande de correction limitée au lien. En mode Manual, la proposition ouvre une comparaison côte à côte avant acceptation : c’est le diff, la vue du texte retiré et ajouté. Je regarde le nom du fichier et l’adresse proposée. Pour abandonner cet essai, refuse la proposition du fichier entier dans la demande de permission : ne valide pas l’édition.
Après acceptation, si le projet utilise Git, clique sur Contrôle de code source dans la barre latérale, puis sur le fichier sous Modifications pour rouvrir ses différences. Je pars d’un état sans changement en attente : ainsi, le lien corrigé reste facile à isoler. La sous-page consacrée à la relecture détaillera les modifications plus larges.
Dans The Lean Startup, Eric Ries raconte le démarrage de Food on the Table avec un service de conciergerie : une part du travail est faite manuellement pour apprendre le besoin avant de construire le produit complet. Je retiens la même discipline pour ton site. Valide le parcours du visiteur sur une petite correction avant de demander à l’IA de refaire toute l’application.
Je garde une trace pour ne pas réparer la même chose demain
Git est l’outil qui conserve l’historique des versions de tes fichiers. Dans VS Code, la vue Contrôle de code source permet d’examiner les changements quand le projet utilise Git. Un commit est un point enregistré dans cet historique. Je fais enregistrer un état propre avant le chantier, puis le changement validé avec un message qui dit ce qu’il corrige.
Je demande aussi que les commandes de vérification réellement utilisées soient notées. Une formule comme tests OK ne me suffit pas si aucun test n’a été lancé. Si le projet n’a pas encore de contrôle automatique, je fais écrire le parcours manuel : quelle page ouvrir, quel bouton cliquer et ce qui doit se passer.
Le 19 octobre, j’ai retrouvé le même problème de gestion des comptes IA sur plusieurs de mes OS. Je l’ai corrigé 6 fois avant de centraliser les comptes dans un coffre commun, consulté par chaque application. La leçon que j’en tire ici : si le même défaut revient, demande où vit la règle au lieu de multiplier les corrections locales.
Dans Work the System, Sam Carpenter décrit notamment les Working Procedures, des procédures écrites pour rendre une opération reproductible. Je relie cette méthode à ton projet avec un petit fichier CLAUDE.md : le but du site, la commande de vérification et les zones à préserver. Ce fichier donne des instructions persistantes ; il ne sert pas de verrou de sécurité.
Panneau absent ou commande introuvable, où chercher ?
Si l’icône manque, ouvre d’abord un fichier et vérifie que l’extension est activée. Si le panneau reste absent, Anthropic recommande de redémarrer VS Code ou de lancer Developer: Reload Window depuis la palette de commandes. Je conserve le message d’erreur exact avant de changer autre chose, pour savoir si le rechargement a vraiment aidé.
Si le panneau répond mais que le terminal dit commande claude introuvable, ce sont des installations distinctes. L’extension embarque son moteur privé ; elle ne met pas automatiquement la commande dans le terminal. Je consulte alors la procédure d’installation autonome adaptée au système. Installer des paquets au hasard ne règle pas ce décalage.
Sur Windows, je vérifie aussi l’environnement concerné : Windows natif et WSL, l’environnement Linux installé dans Windows, ne sont pas le même espace. Sur un serveur distant ou dans un conteneur, je repère où le projet et l’extension tournent avant de chercher les fichiers. Je garde les installations Mac, Windows et VPS pour leurs pages dédiées.
Si la connexion échoue, je vérifie le compte et les règles du réseau avant de réinstaller. Si une limite d’usage apparaît, je lis son message et l’heure de reprise éventuelle. Pour continuer à apprendre sans lancer de travail, retrouve mes guides Claude Code. Garde une note avec le système, les versions et l’erreur exacte : ce sera la matière utile pour demander de l’aide.
Du lien corrigé au résultat dans le navigateur
Pour l’exercice HTML de ce guide, ouvre index.html dans ton navigateur depuis ton gestionnaire de fichiers, puis clique sur Contact. La page contact.html doit s’ouvrir. Recharge aussi la page de départ et essaie un autre lien du menu : je veux vérifier que la correction n’a pas abîmé le parcours voisin. Si le projet nécessite un serveur de développement, utilise sa procédure de lancement plutôt que d’ouvrir directement ses fichiers. Note l’adresse testée et le résultat ; une publication pourra ensuite faire l’objet d’une demande avec sa destination exacte.
Exemple fictif, corriger un lien de contact sans retoucher tout le site
- Je prépare une copie locale contenant 3 fichiers : index.html, style.css et contact.html. Le bouton Contact pointe vers une page inexistante.
- Je demande : « Lis index.html et contact.html. Indique pourquoi le bouton Contact échoue. Ne modifie rien. » Je vérifie que Claude identifie bien la destination incorrecte.
- Je demande ensuite : « Corrige uniquement la destination du bouton Contact dans index.html pour ouvrir contact.html. Garde le texte, le style et les autres liens. » Je sélectionne Manual en bas de la zone de saisie avant l’envoi.
- J’attends 1 fichier proposé. Je lis la comparaison côte à côte avant d’accepter. Si la destination est mauvaise, je refuse la proposition entière : le fichier reste intact. Si plusieurs fichiers apparaissent, je demande pourquoi avant de continuer.
- Après acceptation, j’ouvre index.html dans le navigateur. Je fais 2 vérifications : le bouton ouvre contact.html et un autre lien du menu fonctionne. Dans un projet Git, Contrôle de code source puis le fichier sous Modifications permettent de revoir la correction.
Je peux ensuite enregistrer ce petit changement et demander une autre correction. Si le lien cible doit finalement être une adresse extérieure, je clarifie ce besoin avant de laisser Claude continuer.
Les erreurs fréquentes
Ta check-list
Tout le guide en une image
Pour aller plus loin
J'ai automatisé tout mon business avec Claude Code (8 étapes)Vidéo de 27 minMa chaîne YouTube ›Questions fréquentes
Peut-on utiliser Claude Code gratuitement dans VS Code ?
Je distingue l’extension de l’accès au service. Son installation ne donne pas un usage gratuit illimité : il faut un accès Claude Code compatible ou une facturation Console. Vérifie les conditions de ton compte, sans déduire tes droits de ceux d’un tutoriel.
Faut-il installer Node.js pour utiliser le panneau Claude Code ?
Le panneau embarque son moteur. Je ne fais donc pas installer Node.js simplement pour ouvrir cette interface. Si tu choisis aussi une installation autonome du terminal, suis les prérequis propres à la méthode retenue dans la documentation officielle.
Puis-je utiliser mon abonnement Claude dans l’extension ?
Oui, avec un abonnement qui donne accès à Claude Code. Je te conseille de vérifier le compte connecté et ses limites. Les usages du chat et du code peuvent partager des contraintes : changer d’interface ne crée pas un nouveau droit de consommation.
Est-ce la même extension pour Visual Studio 2022 ?
Ce guide concerne Visual Studio Code. Je ne transpose pas ses clics à Visual Studio 2022, qui est un autre logiciel. Vérifie le nom exact de ton application avant de choisir une extension ou de suivre une vidéo.
Pourquoi claude ne fonctionne pas dans le terminal intégré ?
Le panneau et la commande du terminal sont distincts. Si le panneau marche, je vérifie d’abord si la version autonome a été installée et si le terminal peut la trouver. Le chemin des commandes peut aussi nécessiter l’ouverture d’un nouveau terminal après installation.
Puis-je débuter sans savoir programmer ?
Oui, pour une tâche limitée dont tu comprends le résultat. Je commence par faire expliquer un fichier puis modifier un détail vérifiable. Si tu ne peux pas distinguer une copie locale du site public, clarifie cette différence avant de demander une mise en ligne.
Sources
- Identité officielle anthropic.claude-code, éditeur Anthropic ; le Marketplace exige VS Code 1.98.0 ou supérieur. : https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code (consulté le 2026-11-06)
- Panneau graphique avec moteur embarqué distinct de la commande autonome, installation par Extensions, raccourcis, icône visible avec fichier ouvert et rechargement de fenêtre ; la documentation indique 1.94.0, moins strict que le Marketplace. Sélecteur au bas de la zone de saisie ; Manual demande accord avant éditions et la plupart des commandes, comparaison côte à côte et refus de la proposition entière avant application. : https://code.claude.com/docs/en/vs-code (consulté le 2026-11-06)
- Connexion avec abonnement compatible ou compte Console ; une clé ANTHROPIC_API_KEY approuvée peut être utilisée pour l’accès API. : https://code.claude.com/docs/en/authentication (consulté le 2026-11-06)
- Permissions de lecture, écriture et commandes ; les modes et politiques modifient les confirmations demandées. : https://code.claude.com/docs/en/permissions (consulté le 2026-11-06)
- Méthodes d’installation autonome et différences Windows natif et WSL. : https://code.claude.com/docs/en/setup (consulté le 2026-11-06)
- Usage inclus dans les limites des abonnements et distinction avec la consommation API ; les dépenses dépendent du contexte et du modèle. : https://code.claude.com/docs/en/costs (consulté le 2026-11-06)
- CLAUDE.md transmet des instructions persistantes de projet ; ces instructions ne sont pas une frontière de sécurité. : https://code.claude.com/docs/en/memory (consulté le 2026-11-06)
- VS Code intègre une vue des différences et le contrôle de versions Git. : https://raw.githubusercontent.com/microsoft/vscode-docs/main/docs/sourcecontrol/overview.md (consulté le 2026-11-06)
- Claude Pro inclut Claude Code : 20 $ US HT par mois en paiement mensuel ou 200 $ US HT par an payés à l’avance, équivalent mensuel annuel affiché à 17 $ US HT ; limites d’usage et taxes applicables. : https://claude.com/pricing (consulté le 2026-11-06)
- Eric Ries raconte directement le démarrage manuel de Food on the Table et son service de conciergerie dans la transcription de son entretien avec le Chicago Lean Startup Circle, passage « concierge MVP » ; référence du cas repris dans The Lean Startup. : https://orthogonal.io/insights/lean-startup/a-conversation-with-eric-ries-at-the-chicago-lean-startup-circle/feed/ (consulté le 2026-11-06)
Autres pages sur notre guide « Claude Code »
Toutes les pages du sujet sont dans notre guide « Claude Code ».