tutorial9 min de lecture

Claude Code dans VS Code, Cursor et JetBrains

SFEIR Institute•

En Bref (TL;DR)

Claude Code dispose d'extensions dédiées pour VS Code, Cursor et les forks compatibles, ainsi que d'un plugin pour les IDE JetBrains. Vous obtenez une interface graphique avec diffs côte à côte, @-mentions de fichiers et de plages de lignes, revue de plan avant exécution et historique de sessions. Le même moteur Claude Code tourne sous toutes ces surfaces, et CLAUDE.md, les settings et les serveurs MCP fonctionnent partout.

Claude Code dispose d'extensions dédiées pour VS Code, Cursor et les forks compatibles, ainsi que d'un plugin pour les IDE JetBrains. Vous obtenez une interface graphique avec diffs côte à côte, @-mentions de fichiers et de plages de lignes, revue de plan avant exécution et historique de sessions. Le même moteur Claude Code tourne sous toutes ces surfaces, et votre CLAUDE.md, vos settings et vos serveurs MCP fonctionnent partout.

Cette page fait partie du sous-pilier Surfaces et environnements. Si vous préférez l'interface en ligne de commande, consultez la page dédiée au terminal.

Pourquoi utiliser Claude Code dans un IDE plutĂ´t que dans le terminal ?

L'extension VS Code fournit une interface graphique native pour Claude Code, intégrée directement dans votre éditeur. C'est la méthode recommandée pour utiliser Claude Code dans VS Code.

Avec l'extension, vous pouvez relire et modifier les plans de Claude avant de les accepter, auto-accepter les modifications au fil de l'eau, mentionner des fichiers avec des plages de lignes précises issues de votre sélection, accéder à l'historique des conversations et ouvrir plusieurs conversations dans des onglets ou fenêtres séparés.

L'extension embarque aussi la CLI, accessible depuis le terminal intégré de VS Code pour les fonctionnalités avancées. Certaines commandes restent en effet réservées à la CLI.

À retenir : l'IDE apporte une revue visuelle des diffs et la gestion de plusieurs sessions, tout en conservant l'accès à la CLI depuis le terminal intégré.

Comment installer l'extension dans VS Code ou Cursor ?

Vérifiez d'abord les prérequis : VS Code 1.98.0 ou supérieur, et un compte Anthropic (vous vous connecterez à la première ouverture de l'extension).

Le moyen le plus simple est d'ouvrir la vue Extensions, puis de chercher et installer le module.

# VS Code
Cmd+Shift+X (Mac) / Ctrl+Shift+X (Windows/Linux)
# Recherchez « Claude Code » puis cliquez sur Install

L'extension s'installe également dans Cursor et dans d'autres forks de VS Code comme Devin Desktop ou Kiro. Cherchez « Claude Code » dans la vue Extensions de l'éditeur, ou installez depuis le registre Open VSX. Si votre éditeur ne parvient pas à installer l'extension, lancez claude dans son terminal intégré : la CLI fonctionne dans n'importe quel terminal.

Si l'extension n'apparaît pas après l'installation, redémarrez VS Code ou exécutez « Developer: Reload Window » depuis la palette de commandes.

Ă€ retenir : installez depuis la vue Extensions ou via Open VSX, puis connectez-vous Ă  votre compte Anthropic au premier lancement.

Comment ouvrir le panneau Claude Code et envoyer un premier prompt ?

Dans VS Code, l'icône Spark indique Claude Code. La façon la plus rapide d'ouvrir le panneau est de cliquer sur l'icône Spark dans la barre d'outils de l'éditeur (coin supérieur droit), visible quand un fichier est ouvert.

Vous disposez aussi d'autres entrées :

  • Activity Bar : cliquez sur l'icĂ´ne Spark dans la barre latĂ©rale gauche pour afficher la liste des sessions.
  • Palette de commandes : Cmd+Shift+P (Mac) ou Ctrl+Shift+P (Windows/Linux), tapez « Claude Code » et choisissez une option comme « Open in New Tab ».
  • Status Bar : cliquez sur âś± Claude Code dans le coin infĂ©rieur droit. Cela fonctionne mĂŞme sans fichier ouvert.

À la première ouverture, connectez-vous : un écran de connexion apparaît, cliquez sur Sign in et terminez l'autorisation dans votre navigateur. Si vous avez ANTHROPIC_API_KEY dans votre shell mais voyez quand même l'écran de connexion, lancez VS Code depuis un terminal avec code . pour qu'il hérite de vos variables d'environnement.

Ensuite, demandez à Claude d'expliquer un fonctionnement, de déboguer ou de modifier votre code. Claude voit automatiquement le texte que vous avez sélectionné dans l'éditeur.

Ă€ retenir : ouvrez le panneau via l'icĂ´ne Spark, connectez-vous au navigateur, puis formulez votre demande en langage naturel.

Comment fonctionnent les @-mentions et la sélection de code ?

Les @-mentions donnent à Claude le contexte de fichiers ou de dossiers précis. Tapez @ suivi du nom : Claude lit le contenu et peut répondre ou le modifier. La correspondance approximative (fuzzy) accepte les noms partiels.

> Explain the logic in @auth
> What's in @src/components/   (ajoutez un / final pour les dossiers)

Quand vous sélectionnez du texte dans l'éditeur, Claude voit votre code surligné automatiquement, et le pied du champ de prompt indique le nombre de lignes sélectionnées. Pour insérer une @-mention avec le chemin du fichier et les numéros de ligne (par exemple @app.ts#5-10), utilisez le raccourci :

Option+K (Mac) / Alt+K (Windows/Linux)

Vous pouvez aussi maintenir Shift en glissant des fichiers dans le champ de prompt pour les ajouter en pièces jointes. Pour exclure un fichier sensible comme .env, ajoutez une règle de refus Read dans vos permissions : la sélection et la notification de fichier ouvert n'atteindront alors plus Claude.

À retenir : @ mentionne fichiers et dossiers, et Option+K / Alt+K insère une référence avec les lignes exactes de votre sélection.

Comment relire un plan avant que Claude n'exécute ?

Le champ de prompt propose plusieurs modes de permission. Cliquez sur l'indicateur de mode au bas du champ pour changer de mode :

  • Mode normal : Claude demande la permission avant chaque action.
  • Mode plan : Claude dĂ©crit ce qu'il va faire et attend votre validation avant toute modification. VS Code ouvre automatiquement le plan sous forme de document markdown complet, oĂą vous pouvez ajouter des commentaires en ligne pour donner votre retour avant que Claude ne commence.
  • Mode auto-accept : Claude effectue les modifications sans demander.

Vous fixez le mode par défaut dans les settings de VS Code via claudeCode.initialPermissionMode (valeurs default, plan, acceptEdits ou bypassPermissions).

À retenir : le mode plan ouvre un document éditable où vous commentez la stratégie de Claude avant qu'il ne touche au code.

Comment relire les diffs proposés par Claude ?

Quand Claude veut modifier un fichier, il affiche une comparaison côte à côte de l'original et des changements proposés, puis demande la permission. Vous pouvez accepter, refuser, ou indiquer à Claude quoi faire à la place.

Si vous modifiez directement le contenu proposé dans la vue de diff avant d'accepter, Claude est informé que vous l'avez changé : il ne suppose donc pas que le fichier correspond à sa proposition initiale.

L'extension VS Code prend également en charge les checkpoints, qui suivent les éditions de Claude et permettent de revenir à un état antérieur. Survolez un message pour faire apparaître le bouton de rewind et choisir parmi « Fork conversation from here », « Rewind code to here » ou « Fork conversation and rewind code ».

À retenir : chaque modification passe par une vue de diff côte à côte que vous pouvez éditer avant d'accepter, et les checkpoints permettent de revenir en arrière.

Comment retrouver et reprendre une conversation passée ?

Cliquez sur le bouton Session history en haut du panneau Claude Code pour accéder à l'historique. Vous pouvez chercher par mot-clé ou parcourir par période (Today, Yesterday, Last 7 days, etc.). Cliquez sur une conversation pour la reprendre avec l'historique complet des messages.

Les nouvelles sessions reçoivent un titre généré automatiquement à partir de votre premier message. Survolez une session pour la renommer ou la supprimer.

Si vous utilisez Claude Code sur le web, vous pouvez reprendre ces sessions distantes directement dans VS Code via l'onglet Remote de la boîte de dialogue d'historique. Cela nécessite une connexion avec un abonnement Claude.ai (et non Anthropic Console), et seules les sessions web démarrées avec un dépôt GitHub apparaissent dans cet onglet.

À retenir : l'historique permet de chercher, renommer et reprendre vos sessions locales, et l'onglet Remote rapatrie les sessions web démarrées sur un dépôt GitHub.

Comment installer et utiliser le plugin JetBrains ?

Claude Code s'intègre aux IDE JetBrains via un plugin dédié, avec affichage interactif des diffs, partage du contexte de sélection et plus encore. Le plugin fonctionne avec la plupart des IDE JetBrains, dont IntelliJ IDEA, PyCharm, Android Studio, WebStorm, PhpStorm et GoLand.

Installez le plugin Claude Code depuis le marketplace JetBrains, puis redémarrez complètement votre IDE.

Pour l'utiliser, lancez claude depuis le terminal intégré de votre IDE : toutes les fonctionnalités d'intégration sont alors actives. Depuis un terminal externe, connectez Claude Code à votre IDE avec la commande :

/ide

Le plugin offre les fonctionnalités suivantes :

  • Lancement rapide : Cmd+Esc (Mac) ou Ctrl+Esc (Windows/Linux) ouvre Claude Code depuis l'Ă©diteur.
  • Affichage des diffs : les changements de code s'affichent dans le visualiseur de diff de l'IDE plutĂ´t que dans le terminal.
  • Contexte de sĂ©lection : la sĂ©lection ou l'onglet courant est partagĂ© automatiquement avec Claude Code.
  • RĂ©fĂ©rences de fichiers : Cmd+Option+K (Mac) ou Alt+Ctrl+K (Linux/Windows) insère une rĂ©fĂ©rence comme @src/auth.ts#L1-99.
  • Partage des diagnostics : les erreurs de lint et de syntaxe de l'IDE sont partagĂ©es automatiquement avec Claude.

Pour choisir où s'affichent les diffs, exécutez /config dans Claude Code et réglez l'outil de diff sur auto (dans l'IDE) ou terminal. Les réglages du plugin se trouvent dans Settings → Tools → Claude Code [Beta], où vous pouvez notamment préciser la commande Claude (claude, /usr/local/bin/claude ou npx @anthropic-ai/claude-code).

À retenir : installez le plugin depuis le marketplace JetBrains, lancez claude dans le terminal intégré (ou /ide depuis un terminal externe), et profitez des diffs et du partage de sélection dans l'IDE.

Les settings et MCP fonctionnent-ils de la même manière dans l'IDE ?

Oui. L'extension VS Code distingue deux types de réglages : les réglages d'extension propres à VS Code, et les settings Claude Code dans ~/.claude/settings.json, partagés entre l'extension et la CLI pour les commandes autorisées, les variables d'environnement, les hooks et les serveurs MCP.

Pour ajouter un serveur MCP, ouvrez le terminal intégré et exécutez claude mcp add. Une fois configuré, gérez vos serveurs sans quitter VS Code en tapant /mcp dans le panneau de chat.

claude mcp add --transport http github https://api.githubcopilot.com/mcp/ \
  --header "Authorization: Bearer VOTRE_GITHUB_PAT"

Pour aller plus loin sur ce protocole, consultez le guide MCP (Model Context Protocol). Pour l'installation initiale de Claude Code, reportez-vous Ă  Installation et premier lancement.

À retenir : le fichier ~/.claude/settings.json et les serveurs MCP sont partagés entre l'IDE et la CLI, ce qui garantit une configuration cohérente sur toutes les surfaces.

Quelle surface choisir après l'IDE ?

L'IDE convient au développement quotidien avec revue visuelle. Pour des sessions parallèles, une revue visuelle des diffs et des tâches planifiées, regardez l'application Desktop. Pour des tâches longues et des dépôts que vous n'avez pas en local, consultez le web.

Pour comparer toutes les surfaces et choisir la bonne selon votre contexte, rendez-vous sur la page comparaison.

À retenir : l'IDE est idéal au quotidien, et vous pouvez basculer vers Desktop ou le web selon le besoin, car le même moteur et la même configuration vous suivent partout.

Articles récents sur Claude

Formation recommandée

Formation Claude Code

Maîtrisez les fondamentaux de Claude Code en 1 jour avec nos formateurs experts. 60% de pratique sur des cas concrets.

Découvrir la formation