Installer et utiliser Claude Code dans VS Code sans se prendre la tête
Si tu utilises déjà ChatGPT ou Claude pour coder, tu connais sûrement la danse : tu copies un fichier, tu colles dans le chat, tu attends, tu copies la réponse, tu recolles dans ton éditeur, et tu pries pour ne pas avoir oublié une accolade. Claude Code dans VS Code supprime cette danse — tout se passe dans ton éditeur.
Concrètement, Claude vit dans un panneau à côté de ton code. Il voit ce que tu sélectionnes, il peut lire les fichiers que tu lui pointes avec @, et quand il propose une modification, tu la vois sous forme de diff avant de l’accepter. Pas de copier-coller. Pas de fenêtre à jongler. Pas de “j’ai oublié de quel fichier je parlais”.
L’intérêt n’est pas seulement la vitesse. C’est surtout le contexte. Un chatbot dans un onglet à part ne sait rien de ton projet : il faut lui réexpliquer à chaque fois. Dans VS Code, Claude voit l’arborescence, les fichiers, les sélections — il comprend où tu en es sans que tu doives lui dérouler ta vie à chaque message.
- Plus de copier-coller entre éditeur et chatbot
- Claude voit le bon fichier, la bonne ligne, le bon contexte
- Toutes les modifications passent par un diff — tu valides ou tu refuses
- Mode Plan pour vérifier l’intention avant qu’il touche au code
- L’historique reste, tu peux reprendre une conversation plus tard
- Il faut un compte Anthropic (gratuit possible, payant pour usage soutenu)
- L’IA peut se tromper : relis avant d’accepter
- Pas magique sur du gros code legacy mal structuré
- Mieux vaut éviter le mode auto-accept au début
Ce guide est pensé pour les gens qui ne sont pas développeurs senior. Si tu sais ouvrir VS Code et installer une extension, tu peux suivre — on va du téléchargement jusqu’à ta première vraie modification de code, en passant par les raccourcis utiles et les erreurs classiques. Compte 10–15 minutes pour être opérationnel.
Tu peux lui demander d’expliquer un fichier, corriger une erreur, modifier du code, créer une fonctionnalité ou te proposer un plan avant de toucher aux fichiers. Bref, l’aide d’un développeur expérimenté qui connaît ton projet — sans avoir à embaucher un développeur expérimenté.
Ce qu’il faut avant de commencer
Avant d’installer Claude Code, il te faut seulement :
- VS Code installé
- VS Code en version 1.98.0 ou supérieure
- Un compte Anthropic / Claude
- Une connexion internet
Pas besoin d’être expert. Si tu sais ouvrir VS Code et installer une extension, tu peux déjà commencer.
Étape 1 — Installer l’extension Claude Code
Ouvre VS Code, puis va dans les extensions.
Sur Mac : Cmd + Shift + X
Sur Windows ou Linux : Ctrl + Shift + X
Dans la barre de recherche, tape : Claude Code
Clique ensuite sur Installer.
Si l’extension n’apparaît pas tout de suite, redémarre VS Code ou lance la commande :
Developer: Reload WindowÉtape 2 — Ouvrir Claude dans VS Code
Une fois installée, tu verras une petite icône appelée Spark 
.
Elle peut apparaître à plusieurs endroits :
- en haut à droite quand un fichier est ouvert ;
- dans la barre latérale gauche ;
- en bas à droite de VS Code avec le texte Claude Code ;
- via la palette de commandes.
Pour ouvrir la palette de commandes : Cmd + Shift + P (Mac) ou Ctrl + Shift + P (Windows/Linux).
Ensuite, tape Claude Code et choisis l’option pour ouvrir Claude.
Étape 3 — Se connecter à Claude
La première fois, Claude va te demander de te connecter.
Clique sur Se connecter, puis termine l’autorisation dans ton navigateur.
Une fois connecté, tu peux revenir dans VS Code. Claude sera prêt à travailler avec ton projet.
Si la connexion ne s’affiche pas, recharge VS Code avec :
Developer: Reload WindowÉtape 4 — Poser ta première question à Claude
Tu peux maintenant écrire une demande simple, par exemple :
Explique-moi ce que fait ce fichier.Ou :
Trouve les erreurs dans ce composant.Ou encore :
Ajoute un formulaire de contact propre et responsive.Le plus important : parle simplement. Tu n’as pas besoin d’écrire comme un développeur expert.
Claude peut t’aider à comprendre, corriger, améliorer ou modifier ton code directement dans VS Code.
Étape 5 — Donner du contexte à Claude avec @
Quand tu veux que Claude regarde un fichier précis, utilise le symbole @.
Exemple :
Explique-moi @src/components/Header.tsxOu :
Corrige le bug dans @pages/contact.tsxTu peux aussi sélectionner du texte dans un fichier. Claude voit ta sélection, et tu peux utiliser Option + K sur Mac, ou Alt + K sur Windows/Linux.
Cela ajoute une référence précise au fichier et aux lignes sélectionnées.
Étape 6 — Vérifier les modifications avant d’accepter
Quand Claude veut modifier un fichier, il ne remplace pas tout discrètement.
Il te montre une comparaison entre :
- l’ancien code ;
- le nouveau code proposé.
Tu peux ensuite :
- accepter ;
- refuser ;
- modifier la proposition ;
- demander autre chose.
C’est très pratique parce que tu gardes le contrôle.
Étape 7 — Utiliser le mode Plan
Si tu ne veux pas que Claude touche directement au code, utilise le Plan Mode.
Dans ce mode, Claude explique d’abord ce qu’il veut faire.
C’est utile pour les grosses tâches, par exemple :
Analyse tout le système de navigation et propose un plan avant de modifier quoi que ce soit.Ou :
Fais un plan pour améliorer la page d’accueil sans encore toucher aux fichiers.Tu peux ensuite lire le plan, le corriger, puis seulement après autoriser Claude à travailler. C’est le mode le plus rassurant quand tu débutes.
Étape 8 — Organiser Claude dans VS Code
Tu peux placer Claude où tu veux :
- à droite, pour le garder visible pendant que tu codes ;
- à gauche, dans la barre latérale ;
- dans un onglet séparé ;
- dans une nouvelle fenêtre.
Pour travailler proprement, le plus simple est souvent :
- ton explorateur de fichiers à gauche ;
- ton code au centre ;
- Claude à droite.
Comme ça, tu vois tout en même temps.
Étape 9 — Reprendre une ancienne conversation
Claude Code garde l’historique de tes conversations.
Tu peux donc reprendre une discussion commencée plus tôt, retrouver une ancienne correction ou continuer une tâche.
C’est très utile quand tu travailles sur un projet en plusieurs jours.
Étape 10 — Utiliser le terminal si besoin
Claude Code existe aussi en mode terminal. Dans VS Code, ouvre le terminal intégré puis tape :
claudeCe mode est plutôt destiné aux utilisateurs plus avancés. Mais c’est bon à savoir : l’extension graphique et le terminal peuvent travailler ensemble.
Les raccourcis utiles à retenir
| Action | Mac | Windows / Linux |
|---|---|---|
| Ouvrir les extensions | Cmd + Shift + X | Ctrl + Shift + X |
| Ouvrir la palette de commandes | Cmd + Shift + P | Ctrl + Shift + P |
| Ajouter une référence au fichier | Option + K | Alt + K |
| Basculer entre Claude et l’éditeur | Cmd + Esc | Ctrl + Esc |
| Nouvelle conversation Claude | Cmd + Shift + Esc | Ctrl + Shift + Esc |
Les erreurs fréquentes
Petit conseil de sécurité
Conclusion
Claude Code dans VS Code, c’est comme avoir un assistant développeur directement dans ton éditeur.
Tu peux lui demander :
- d’expliquer ton code ;
- de corriger un bug ;
- de créer une fonctionnalité ;
- de revoir une page ;
- de proposer un plan ;
- de t’aider avec Git ;
- de travailler fichier par fichier.
Pour commencer, retiens juste ça :
Source officielle
Cet article s’appuie sur la documentation officielle d’Anthropic :
Documentation Claude Code — « Utiliser Claude Code dans VS Code » : https://code.claude.com/docs/fr/vs-code
Partager cet article
