Intégration VS Code

📚 Navigation de la série : L'article précédent 07 Première utilisation vous a montré le premier exemple dans le terminal. Cet article amène Claude Code dans VS Code : les mêmes capacités, mais avec une interface graphique.

Au début, quand on passe sur l'extension VS Code, il est facile de faire une erreur un peu bête.

Alors que Claude Code tournait parfaitement dans le terminal, une fois l'extension installée pour essayer l'interface graphique, vous ouvrez un dossier vide et cherchez désespérément « l'icône Spark » (l'icône en forme d'étincelle dans la barre d'outils, qui sert de point d'entrée pour Claude Code dans l'IDE). Impossible de la trouver. À ce stade, on croit souvent que l'installation a échoué : on désinstalle, réinstalle, redémarre, vide le cache, on perd 20 minutes pour finalement lire dans la documentation... cette icône n'apparaît que si vous avez ouvert un fichier spécifique, ouvrir un dossier ne suffit pas. Chercher une icône dans un espace de travail vide, c'est chercher une aiguille dans une botte de foin.

En clair, l'intégration VS Code n'est pas compliquée, mais sa logique d'interaction diffère de celle du terminal. Certaines « certitudes » peuvent vous bloquer dès la première étape. Cet article va mettre en lumière ces pièges pour vous.

Après avoir lu cet article, vous obtiendrez :

• Les étapes complètes pour installer l'extension Claude Code dans VS Code (et ses dérivés comme Cursor), ainsi qu'une liste de vérification si « l'icône est introuvable ».
• Comment utiliser les trois avantages exclusifs de l'interface graphique : le diff côte à côte (pour examiner les modifications ligne par ligne), les mentions @, et la révision de plan.
• Un tableau comparatif « Extension vs CLI » pour savoir lequel utiliser, et une liste de raccourcis clavier utiles.

---

01 D'abord comprendre : Quelle est la relation entre l'extension et le CLI ?

« Je sais déjà utiliser claude dans le terminal, ai-je vraiment besoin de l'extension ? » Conclusion : L'extension ne remplace pas le CLI, elle lui ajoute simplement une interface graphique. En installant l'extension, vous installez également le CLI, et les deux partagent la même configuration ~/.claude/settings.json ; l'historique de conversation peut être récupéré, mais il n'est pas synchronisé en temps réel — si vous discutez dans l'extension et que vous lancez ensuite claude --resume dans le terminal, vous pourrez reprendre la conversation là où vous l'aviez laissée.

Analogie : La même cuisine, deux guichets de commande. Le CLI, c'est commander directement à la fenêtre de la cuisine : c'est rapide, complet, on peut tout demander ; l'extension, c'est le serveur en salle qui vous présente un menu illustré, plus intuitif pour commander et suivre la préparation, mais certaines « options secrètes » ne sont accessibles qu'en cuisine. La cuisine est la même, les plats sont identiques.

Quand utiliser quoi ? La documentation officielle propose une comparaison de leurs capacités, résumée ci-dessous :

Fonctionnalité	CLI (Terminal)	Extension VS Code
Commandes et skills	Toutes	Sous-ensemble (tapez / pour voir les commandes disponibles)
Configuration des serveurs MCP	Complète	Partielle (ajouter via CLI, gérer via le panneau /mcp)
Checkpoints	Supporté	Supporté
Raccourcis bash !	Supporté	Non supporté
Autocomplétion avec Tab	Supporté	Non supporté
Diff côte à côte, code sélectionné comme contexte	Nécessite la connexion à l'IDE	Natif, prêt à l'emploi

En résumé : Pour coder, examiner les modifications, c'est-à-dire tout ce qui touche aux « fichiers », l'extension est nettement plus pratique ; les raccourcis bash comme !ls et l'autocomplétion ne sont disponibles que dans le CLI. L'usage classique consiste à travailler principalement dans l'extension, et pour lancer des commandes en lot ou utiliser des commandes non disponibles dans l'extension, d'utiliser claude directement dans le terminal intégré de VS Code — l'historique est partagé, la transition se fait sans couture.

💡 En un mot : L'extension et le CLI sont deux visages du même moteur. Ils partagent l'historique et la configuration, vous pouvez basculer de l'un à l'autre selon vos besoins, pas besoin de choisir.

---

02 Installation : Trois méthodes et dépannage de l'icône introuvable

Avant d'installer, vérifiez la version

Exigence officielle stricte : VS Code 1.98.0 ou supérieur, en dessous l'installation échouera ou ne fonctionnera pas (allez dans « Aide → À propos » pour voir le numéro de version). Lors de la première ouverture de l'extension, il vous sera demandé de vous connecter à votre compte Anthropic ; pour les entreprises utilisant des fournisseurs tiers comme Bedrock, Vertex AI, la méthode de configuration diffère (voir à la fin).

Trois méthodes d'installation

Méthode 1 : Chercher dans la marketplace (La plus fiable, recommandée pour les débutants)

Dans VS Code, appuyez sur Cmd+Shift+X (Mac) ou Ctrl+Shift+X (Windows/Linux) pour ouvrir la vue des extensions, cherchez Claude Code, et cliquez sur Installer.

L'image ci-dessus montre la recherche de Claude Code dans la vue des extensions : la ligne encadrée en rouge « Claude Code for VS Code », dont l'éditeur est Anthropic avec un badge de certification bleu, est l'extension officielle. C'est celle-ci qu'il faut installer.

Il y a ici un piège classique pour les novices : en cherchant Claude Code, vous trouverez de nombreuses extensions aux noms similaires. Assurez-vous que l'éditeur est bien Anthropic, n'installez pas une fausse extension tierce.

Méthode 2 : Installer via le lien direct

Si VS Code est ouvert, cliquer sur le lien vscode:extension/anthropic.claude-code vous amènera directement à la page d'installation de l'extension (pour Cursor, remplacez vscode: par cursor:).

Méthode 3 : Pour les éditeurs non standards / Échec de l'installation

L'extension peut également être installée sur des dérivés de VS Code (Cursor, Devin Desktop, Kiro, etc.) — cherchez Claude Code dans leur vue des extensions, ou installez-la depuis le registre Open VSX. Si l'installation bloque, n'insistez pas, la solution officielle de repli est d'utiliser claude dans le terminal intégré.

Note pour la Chine : L'installation, l'autorisation de connexion et l'utilisation de Claude nécessitent de se connecter aux serveurs d'Anthropic, l'utilisation d'un VPN est donc nécessaire tout au long du processus, comme pour la version terminal.

L'icône est introuvable après l'installation ? Suivez cette liste de vérification

C'est le piège mentionné au début. Après l'installation, l'extension n'affiche pas de fenêtre pop-up par défaut, vous devez appeler le panneau vous-même. Le plus rapide : ouvrez d'abord un fichier spécifique, puis cliquez sur l'icône Spark (une petite étincelle) dans la barre d'outils en haut à droite de l'éditeur.

L'image ci-dessus indique les trois points d'entrée : l'icône Spark en haut à droite de l'éditeur (②, le plus rapide mais n'apparaît que si un fichier est ouvert), l'icône Spark dans la barre d'activité (①, toujours présente), et le bouton ✱ Claude Code dans la barre d'état (③, cliquable même sans fichier ouvert).

L'essentiel : L'icône Spark n'apparaît que si un fichier est ouvert. Ouvrir simplement un dossier ne suffit pas. Si vous ne la voyez toujours pas, vérifiez dans cet ordre :

Symptôme	Action de dépannage
Pas d'icône en haut à droite de l'éditeur	Ouvrez un fichier (pas seulement un dossier)
Fichier ouvert, toujours pas d'icône	Vérifiez que VS Code est ≥ 1.98.0 (Aide → À propos)
La version est bonne	Exécutez Developer: Reload Window depuis la palette de commandes
Le rechargement ne donne rien	Désactivez temporairement les autres extensions d'IA (Cline, Continue, etc.), il y a peut-être un conflit
L'espace de travail est en « Mode restreint »	L'extension ne fonctionne pas en mode restreint, vous devez faire confiance à l'espace de travail

Si vous ne trouvez vraiment pas l'icône Spark, il reste deux alternatives :

• L'icône Spark dans la barre d'activité (la barre verticale à gauche) — elle est toujours là, un clic ouvre la liste des conversations.
• Le bouton ✱ Claude Code dans la barre d'état (en bas à droite de la fenêtre) — cliquable même sans fichier ouvert, c'est souvent le plus pratique pour ne pas se soucier de savoir si un fichier est ouvert. Vous pouvez aussi utiliser la palette de commandes (Cmd+Shift+P / Ctrl+Shift+P) et taper Claude Code.

Lors de la première ouverture du panneau, un écran de connexion apparaîtra, cliquez sur Login et terminez l'autorisation dans le navigateur. (Si vous avez défini ANTHROPIC_API_KEY mais qu'on vous demande quand même de vous connecter, c'est probablement que VS Code n'a pas hérité des variables d'environnement du terminal. La solution officielle est de lancer VS Code avec code . depuis le terminal pour lui passer les variables.)

💡 En un mot : Installez l'extension publiée par Anthropic, l'icône Spark n'apparaît qu'avec un fichier ouvert — si elle est introuvable, ouvrez un fichier, sinon utilisez le bouton dans la barre d'état en bas à droite.

---

03 Vue diff : Confronter les modifications avant d'approuver

C'est la fonctionnalité qui séduit le plus les utilisateurs dès le départ. Dans le terminal, les modifications sont affichées avec des caractères texte (+ et -) ; si le fichier est grand ou s'il y a beaucoup de modifications, c'est difficile à lire. L'extension intègre cela dans la vue diff native de VS Code — les ajouts et suppressions sont surlignés en rouge et vert, comme lorsque vous regardez un diff Git.

Analogie : La « révision des modifications » d'un contrat avant signature. L'autre partie vous renvoie le contrat modifié : l'original à gauche, la version modifiée à droite, chaque ajout/suppression est clairement mis en évidence — vous ne signez pas les yeux fermés, vous vérifiez point par point avant de signer. Claude modifie le code de la même manière, il présente les changements pour demander votre approbation. Vous avez trois choix : Accepter, refuser, ou lui dire directement comment vous voulez que ça soit modifié.

Un détail facile à ignorer et qu'on ne remarque qu'à l'usage : Avant d'accepter, vous pouvez modifier manuellement les suggestions de Claude directement dans la vue diff. Une fois que vous avez modifié, il sait que « vous y avez touché » et ne s'entêtera pas avec son ancienne version. Par exemple, s'il refactorise une fonction de 200 lignes, qu'il fait 7 ou 8 modifications, et que d'un coup d'œil vous voyez qu'une condition de limite est inversée dans le diff, corrigez-la sur place à droite puis acceptez, cela vous évitera un aller-retour avec Claude.

💡 En un mot : La vue diff vous met chaque modification sous les yeux. Examinez, modifiez si besoin sur place, puis décidez si vous acceptez, c'est beaucoup plus sûr que le diff texte du terminal.

---

04 Mentions @ et sélection de code : Fournir le contexte précis

Le plus grand gaspillage avec Claude, c'est quand il « ne sait pas de quel bout de code vous parlez » et qu'il perd du temps à chercher. L'extension propose deux méthodes pour lui fournir le contexte rapidement et précisément.

Méthode 1 : Mentionner un fichier/dossier avec @

Tapez @ dans la zone de saisie, suivi d'un nom de fichier ou de dossier, et Claude ira lire ce contenu. Il supporte la recherche floue, pas besoin de taper le nom complet :

> Explique-moi la logique de @auth (il trouvera auth.js, AuthService.ts, etc.)
> Qu'y a-t-il dans @src/components/ ? (n'oubliez pas le slash / final pour les dossiers)

Analogie : Envoyer des documents dans le groupe avant la réunion. Au lieu de dire « Tu sais, le fichier sur la connexion », mentionnez-le directement avec @, ça lui évitera de fouiller partout (et de se tromper) dans le projet. Pour les très gros PDF, vous pouvez même lui dire de ne lire que certaines pages (ex: pages 1-10), sans avoir à tout ingérer.

Méthode 2 : Sélectionner le code pour qu'il le voie automatiquement

Encore plus simple que le @ : Sélectionnez directement un bout de code dans l'éditeur, et Claude le verra automatiquement, un message « XX lignes sélectionnées » apparaîtra sous la zone de saisie. Demandez simplement « Pourquoi ça plante ici ? », et il saura de quoi vous parlez.

Quelques astuces complémentaires :

• Insérer une référence avec les numéros de ligne : Appuyez sur Option+K / Alt+K, cela insérera automatiquement une mention comme @app.ts#5-10 avec le chemin et les numéros de ligne (l'éditeur doit avoir le focus).
• Cacher temporairement la sélection : Cliquez sur l'« indicateur de sélection » en bas de la zone de saisie pour le basculer. Si une icône « œil barré » apparaît, le code sélectionné est caché à Claude — utile si vous vouliez juste copier le texte.
• Glisser-déposer un fichier en pièce jointe : Maintenez Shift enfoncé en faisant glisser un fichier dans la zone de saisie ; cliquez sur la × de la pièce jointe pour la retirer.

Exemple : un bug de style avec du CSS imbriqué sur 5 ou 6 niveaux. Sélectionnez la règle suspecte et lancez « Pourquoi ça ne marche pas ici ? », il lui faudra 2 secondes pour trouver que le parent a un overflow: hidden qui coupe l'enfant — expliquer l'imbrication avec des mots vous aurait pris un temps fou.

⚠️ Par défaut, le texte sélectionné et le fichier ouvert sont envoyés à Claude avec la requête. Pour les fichiers sensibles comme .env, il est recommandé d'ajouter une règle de refus Read ; si elle correspond, le fichier n'atteindra pas Claude (se référer à la doc officielle).

💡 En un mot : Le @ pour mentionner des fichiers, et la sélection de code pour fournir le contexte automatiquement — fini le temps perdu à deviner « De quel code parles-tu ? ».

---

05 La révision de plan : Laissez-le proposer une solution avant d'agir

Cette section explique probablement la plus grande amélioration de l'expérience de l'extension par rapport au terminal. Parlons d'abord des modes de permission : cliquez sur l'indicateur de mode en bas de la zone de saisie pour changer. Claude Code a plusieurs niveaux :

Mode	Comportement de Claude	Quand l'utiliser
Normal (par défaut)	Vous demande l'autorisation avant chaque action	Tâches peu familières, contrôle strict
Plan Mode (Mode plan)	Décrit ce qu'il compte faire, attend votre accord pour agir	Grosses modifications, multiples fichiers, pour valider l'approche
Auto-accept (Tout accepter)	Modifie directement, ne demande plus	Petites modifs répétitives en toute confiance

Il existe un quatrième niveau bypassPermissions (contourner toutes les permissions), qui nécessite d'activer allowDangerouslySkipPermissions dans les paramètres. Réservé aux bacs à sable totalement isolés, non recommandé pour le quotidien.

Analogie : Le stagiaire demande-t-il avant d'agir ? Le mode normal, c'est « lever la main à chaque étape » ; le mode auto, c'est « laisser faire » ; le mode plan est particulier : c'est comme si le stagiaire vous soumettait un brouillon de son plan, et il ne commence que si vous hochez la tête.

Le mode plan offre un avantage dans VS Code que le terminal n'a pas : Claude ouvre automatiquement le plan sous forme de document Markdown complet, et vous pouvez y ajouter des commentaires (annotations en ligne). Plutôt que de répondre de manière vague « l'étape 2 ne va pas », vous écrivez directement à côté de la ligne de l'étape 2 : « Ne touche pas à la base de données ici, ajoute plutôt un cache ». Il intégrera vos remarques avant de commencer : c'est bien plus précis qu'un retour oral.

L'image ci-dessus montre le document Markdown ouvert en Plan Mode : Claude liste chaque étape, vous écrivez votre commentaire à côté de « l'étape 2 » (ex: « Ne touche pas à la base de données, ajoute d'abord un cache en mémoire »), et il intégrera cette suggestion avant de se lancer.

Vous voulez en faire le comportement par défaut ? Modifiez claudeCode.initialPermissionMode en plan dans les paramètres. Une habitude prudente : Dès qu'une modification touche « plusieurs fichiers ou plus de 50 lignes », passez en Mode plan. Une erreur classique est de tout laisser en mode auto par facilité ; vous lui demandez d'ajouter des logs dans un module, et il « optimise » l'ordre des imports dans plusieurs fichiers. Il vous faudra 10 minutes pour comprendre ce qu'il a touché. Pour les gros changements, exigez un plan d'abord, c'est beaucoup plus propre de le recadrer au stade de la conception.

💡 En un mot : Mode plan = On regarde la solution avant d'agir, et on peut commenter chaque point du document Markdown — utilisez-le pour les grosses modifications multi-fichiers, cela évitera bien des retours en arrière.

---

06 Pratique : 10 minutes pour faire un tour complet de l'interface graphique

Faisons un tour de piste, avec pour chaque étape « ce que vous devriez voir », afin de vérifier si l'installation et l'utilisation sont correctes.

Étape 0 : Créer un mini projet pour tester

Pas besoin d'un vrai projet, un dossier vide avec un fichier suffira. Dans le terminal :

mkdir vscode-claude-demo && cd vscode-claude-demo
printf 'def greet(name):\n    return "Hello " + name\n\nprint(greet("world"))\n' > demo.py
code .

Résultat attendu : VS Code s'ouvre sur ce dossier, et vous voyez demo.py dans l'explorateur à gauche. (Si vous n'avez pas l'outil code, ouvrez le dossier manuellement).

Étape 1 : Ouvrir le panneau Claude et se connecter

Ouvrez demo.py (n'oubliez pas, il faut ouvrir le fichier), cliquez sur l'icône Spark en haut à droite. S'il y a un écran de connexion, cliquez sur Login et autorisez dans le navigateur.

Résultat attendu : Le panneau de discussion de Claude Code apparaît à droite, et il n'indique plus que vous n'êtes pas connecté.

Étape 2 : Sélectionner du code + lui demander de modifier, voir le diff en ligne

Sélectionnez les deux lignes de la fonction greet dans demo.py. L'indicateur sous la zone de saisie devrait dire « 2 lignes sélectionnées ». Tapez ensuite :

Modifie-la pour utiliser les f-strings et ajoute les annotations de type

Résultat attendu : Claude ne vous demande pas « quelle fonction » (le contexte a bien été pris), et il affiche directement un diff côte à côte : à droite, il remplace return "Hello " + name par return f"Hello {name}", avec les types sur la signature, et vous demande d'Accepter / Refuser. Cliquez sur Accepter après vérification.

Étape 3 : Essayer le Mode plan

Cliquez sur l'indicateur de mode en bas pour passer en Plan Mode, et proposez une tâche un peu plus grosse :

Ajoute le support des arguments en ligne de commande pour que l'utilisateur puisse passer le nom depuis le terminal

Résultat attendu : Claude ne modifie pas le fichier. Il ouvre un document Markdown détaillant son plan (par ex. importer argparse). Vous confirmez, ou vous commentez, puis il s'exécute. À ce stade, vous avez utilisé les trois fonctionnalités principales : le diff en ligne, le contexte par sélection, et la révision de plan.

---

07 À mettre en favoris : Raccourcis courants et « retour au CLI »

Une série de raccourcis courants (d'après la documentation officielle, les différences de plateforme sont notées) :

Action	Raccourci	Description
Changer de focus (Éditeur ↔ Claude)	Cmd+Esc / Ctrl+Esc	S'applique selon où se trouve le curseur
Ouvrir la discussion dans un nouvel onglet	Cmd+Shift+Esc / Ctrl+Shift+Esc	Pour gérer plusieurs tâches en parallèle
Insérer la mention @	Option+K / Alt+K	Nécessite que l'éditeur ait le focus
Rouvrir une session récemment fermée	Cmd+Shift+T / Ctrl+Shift+T	Activé par défaut
Nouvelle discussion	Cmd+N / Ctrl+N	Désactivé par défaut, à activer dans les paramètres (enableNewConversationShortcut)

Piège sous macOS Tahoe+ : Le « Game Overlay » du système utilise par défaut Cmd+Esc, ce qui bloque le raccourci. Allez dans « Réglages Système → Clavier → Raccourcis clavier → Manettes de jeu » et décochez cette option, ou réassignez Claude Code: Focus input à une autre touche.

Vous préférez l'interface CLI ? Ouvrez le terminal intégré (Cmd+` / Ctrl+`) et lancez claude — le CLI se connectera automatiquement à VS Code, et vous pourrez toujours profiter du diff natif (pour un terminal externe, utilisez /ide pour vous connecter manuellement) ; ou cochez Utiliser le terminal (useTerminal) dans les paramètres pour que l'extension démarre directement en mode terminal.

Fournisseurs tiers (Bedrock / Vertex AI / Foundry) : Cochez d'abord Désactiver la demande de connexion (disableLoginPrompt), puis configurez ~/.claude/settings.json en suivant les guides de votre fournisseur (selon la documentation officielle).

💡 En un mot : Cmd+Esc pour le focus, Option+K pour citer, pour retrouver la ligne de commande, lancez claude ou cochez useTerminal — l'interface graphique et la ligne de commande à votre convenance.

---

08 Résumé

Cet article a permis de faire passer Claude Code du terminal à VS Code. Voici les points essentiels :

• L'extension ≠ le remplacement du CLI : C'est le même moteur, l'historique et la config sont partagés. Pour le code utilisez l'extension, pour les spécificités du CLI, utilisez le terminal.
• La première épreuve de l'installation, c'est de trouver l'icône : Prenez celle publiée par Anthropic, l'icône Spark nécessite qu'un fichier soit ouvert pour apparaître, sinon utilisez l'accès dans la barre d'état.
• Les trois atouts de l'interface graphique : Le diff côte à côte (on voit, on corrige, on approuve), le @ / code sélectionné (contexte précis), et le Mode plan (on regarde la solution, on peut l'annoter point par point).

Vous devriez maintenant être capable d'installer l'extension seul, d'utiliser le diff pour examiner les changements, d'utiliser le @ et la sélection pour donner du contexte, et de basculer en Mode plan pour les grosses modifications. Une fois cette méthode maîtrisée, elle deviendra votre pilier quotidien pour coder.

---

L'article suivant, 09 Intégration JetBrains — Si votre outil principal est IntelliJ IDEA, PyCharm, ou toute autre IDE de la famille JetBrains, Claude Code dispose également d'un plugin natif. Nous verrons en quoi il ressemble et diffère de l'extension VS Code, ainsi que quelques configurations spécifiques aux utilisateurs de JetBrains.

---

Lectures recommandées

• Mode vocal (Voice) : Dites vos instructions, ne les tapez plus
• Web et Cloud : Installez Claude Code dans votre navigateur et sur votre téléphone
• Images et Multimodal : Collez une capture, il comprendra