N-Gage Formation Claude

Claude Code

Extensions IDE (VS Code, JetBrains, Cursor)

Statut : stable Plan minimum : Pro Démo : 5-10 min Vérifié le : 2026-05-17

Source officielle : https://code.claude.com/docs/en/ide-integrations

Extensions IDE (VS Code, JetBrains, Cursor)

TL;DR

Claude Code s'installe directement dans votre éditeur sous forme d'extension officielle Anthropic : un panneau de chat natif à côté du code, le contexte du fichier ouvert envoyé automatiquement, et un diff visuel avant chaque modification. VS Code, la famille JetBrains (PyCharm, IntelliJ, WebStorm, GoLand, PhpStorm, Android Studio) et Cursor sont pris en charge avec le même moteur que le CLI.

Pour qui c'est utile

Pour toute personne qui écrit, relit ou maintient du code régulièrement et qui veut éviter l'aller-retour entre le terminal et l'éditeur. L'extension donne accès à Claude sans quitter le contexte du fichier ouvert : sélection visible, navigation dans le projet, terminal intégré, raccourcis natifs. Le CLI claude reste disponible en parallèle, les deux partagent l'historique des conversations.

Profils types qui en tirent le maximum :

  • Développeurs full-stack qui passent leur journée dans VS Code et veulent un copilote qui voit le fichier ouvert, la sélection courante et l'arborescence du projet sans copier-coller
  • Développeurs Java, Python, Kotlin, Go qui travaillent dans la famille JetBrains et veulent garder leur IDE de référence sans bricoler un workflow CLI parallèle
  • Intégrateurs et automaticiens (n8n, Make, scripts d'intégration) qui manipulent du JavaScript ou du Python et veulent un assistant proche du code sans monter un environnement dev complet
  • Data analysts et data scientists qui travaillent dans PyCharm ou VS Code sur des notebooks et scripts d'analyse et veulent du refactor ou des explications sans changer d'outil

Comprendre les extensions IDE (la mécanique sous le capot)

Une extension IDE Claude Code n'est pas un outil séparé : c'est une fenêtre native vers le même moteur Claude Code que le CLI. Trois mécanismes la rendent utile au quotidien.

Le moteur partagé avec le CLI : sous le capot, l'extension lance le même binaire claude que vous utiliseriez dans un terminal, mais avec une interface graphique pilotée par l'IDE. Conséquence concrète : claude --resume dans le terminal rouvre une session démarrée dans le panneau, et inversement. Les MCP, hooks et fichiers CLAUDE.md configurés pour le CLI s'appliquent automatiquement dans l'extension.

Le contexte de l'éditeur transmis automatiquement : l'extension envoie en permanence à Claude le chemin du fichier ouvert, la sélection courante, et la structure du projet (fichiers visibles dans l'explorateur). Quand vous sélectionnez 10 lignes et demandez « refactor cette fonction », Claude voit exactement ces 10 lignes sans que vous ayez à les coller. Vous pouvez aussi référencer un fragment précis avec Option+K (Mac) ou Alt+K (Windows/Linux) pour pousser un extrait nommé (@app.ts#5-10).

Le diff visuel avant écriture : par défaut, Claude ne modifie jamais un fichier sans afficher d'abord un diff côte à côte dans l'éditeur. Vous validez, refusez ou modifiez manuellement. C'est le vrai gain par rapport à un chat externe : vous gardez la main, l'IDE conserve l'historique git, et rien ne se passe en arrière-plan sans votre accord.

À retenir : l'extension n'est pas un produit différent du CLI, c'est la même intelligence avec un meilleur poste de pilotage quand on travaille déjà dans un éditeur.

Quand l'extension IDE brille vs CLI vs Desktop Code

L'extension IDE brille dans ces cas : - Vous codez plusieurs heures par jour dans le même éditeur - Vous avez besoin de voir des diffs sur des modifications multi-fichiers - Vous voulez la sélection courante envoyée automatiquement à chaque question - Vous travaillez sur un dépôt git avec un historique propre à préserver

Le CLI est préférable dans ces cas : - Vous scriptez ou automatisez (CI, hooks git, déclencheurs serveur) - Vous travaillez en SSH sur un serveur distant sans IDE - Vous voulez piloter Claude en mode headless (claude -p "prompt") - Vous gérez plusieurs projets simultanés avec des sessions parallèles

Claude Desktop avec Code est préférable dans ces cas : - Vous voulez l'expérience agentique Cowork (interface visuelle de la mémoire et des actions) - Vous mélangez tâches code et tâches non-code dans la même journée - Vous voulez tout dans une seule app, sans IDE ouvert

Pas à pas détaillé

Installer l'extension officielle

  1. Ouvrez votre éditeur. Pour VS Code, vérifiez la version minimale (1.98 ou supérieur) via Help puis About. Pour JetBrains, ouvrez n'importe quel IDE de la famille (IntelliJ IDEA, PyCharm, WebStorm, GoLand, PhpStorm, Android Studio, etc.). Pour Cursor, ouvrez Cursor.
  2. Ouvrez la vue Extensions : Cmd+Shift+X sur Mac, Ctrl+Shift+X sur Windows ou Linux. Sur JetBrains, allez dans Settings puis Plugins puis onglet Marketplace.
  3. Recherchez Claude Code. Important : vérifiez que l'éditeur affiché est bien Anthropic. Plusieurs extensions clones existent et n'ont aucun lien avec Anthropic. Vérifiez aussi le nombre de téléchargements (l'officielle dépasse largement les clones) et le lien vers anthropic.com dans la description.
  4. Cliquez sur Install. Sur VS Code et Cursor, l'installation est immédiate. Sur JetBrains, redémarrez complètement l'IDE après l'installation (parfois deux fois).
  5. Au premier lancement, l'extension ouvre votre navigateur pour vous connecter à votre compte Claude (Pro, Max, Team ou Enterprise). Autorisez la connexion : un token est stocké localement.

Ouvrir le panneau et premier prompt

  1. Repérez l'icône Spark (étincelle) en haut à droite de l'éditeur sur VS Code et Cursor. Sur JetBrains, le raccourci natif est Cmd+Esc (Mac) ou Ctrl+Esc (Windows/Linux).
  2. Le panneau Claude Code s'ouvre à droite (ou en bas selon votre layout). Vous voyez une zone de saisie et l'historique des conversations du projet courant.
  3. Ouvrez un fichier de votre projet, sélectionnez 10 à 20 lignes, et tapez dans le panneau : « Explique ce que fait cette sélection. » Vérifiez que l'indicateur sous la zone de prompt affiche bien le fichier et la plage de lignes sélectionnée.
  4. Pour insérer une référence précise dans votre prompt (par exemple @app.ts#15-25), utilisez Option+K (Mac) ou Alt+K (Windows/Linux).

Configurer le projet (settings.json)

  1. À la racine du dépôt, créez un dossier .claude/ s'il n'existe pas.
  2. Créez un fichier .claude/settings.json pour partager une configuration d'équipe (hooks, permissions, MCP autorisés). Exemple minimal : json { "permissions": { "allow": ["Bash(npm test:*)", "Bash(npm run lint:*)"] } }
  3. Commitez ce fichier dans git pour que toute l'équipe profite des mêmes garde-fous. Les paramètres personnels (clés API, préférences locales) vont dans .claude/settings.local.json, à ajouter au .gitignore.

Cas d'usage avec exemples concrets

Revue de PR avant merge Ouvrez la branche de la PR dans l'éditeur, ouvrez le panneau Claude Code, et demandez : « Revois les fichiers modifiés depuis la branche main. Liste les risques (sécurité, perf, lisibilité) avec niveau de priorité. » Claude lit les diffs et restitue une revue structurée. Vous gardez la main pour discuter chaque point dans la PR.

Refactor avec contexte projet Sélectionnez une fonction trop longue (80 lignes), demandez : « Refactore cette fonction en 3 fonctions plus petites avec des noms explicites. Garde la même signature publique. » Claude propose le refactor en diff visuel : vous voyez exactement ce qui change avant d'accepter, et l'IDE conserve l'historique git intact.

Debug interactif Vous avez une erreur dans la console. Sélectionnez la ligne du code qui plante, collez la stack trace dans le panneau, et demandez : « Voici l'erreur. Trouve la cause probable dans cette fonction et propose un fix. » Claude voit le code et le message, propose une hypothèse, vous valide ou affinez.

Génération de tests unitaires Sélectionnez une fonction métier, demandez : « Génère 5 tests unitaires Jest pour cette fonction. Couvre le cas nominal, les cas limites, et un cas d'erreur. » Claude crée le fichier de test à côté du fichier source. Le diff visuel affiche le nouveau fichier avant écriture.

À retenir

  • Une seule extension pour trois familles d'éditeurs (VS Code, JetBrains, Cursor), même moteur que le CLI, mêmes MCP, mêmes fichiers CLAUDE.md.
  • Le diff visuel avant chaque édition est le vrai gain : vous gardez la main, Claude ne modifie jamais un fichier sans votre accord.
  • L'extension et le CLI partagent l'historique. claude --resume dans le terminal rouvre une session démarrée dans le panneau.
  • Vérifiez l'éditeur Anthropic avant d'installer : plusieurs clones existent sur les marketplaces.
  • 80 % de la valeur se joue dans la qualité du prompt et la sélection. Sélectionner précisément ce que vous voulez modifier évite à Claude de deviner.

Pièges à éviter

  • Extensions clones non officielles : sur la marketplace, des extensions « Claude AI », « Claude Assistant » ou similaires ne sont pas signées par Anthropic. Elles peuvent envoyer vos prompts vers des serveurs tiers. Vérifiez systématiquement que l'éditeur affiché est Anthropic et que le lien pointe vers anthropic.com.
  • Conflits avec d'autres extensions IA : Cline, Continue, Copilot ou Cursor (en tant qu'éditeur autonome) peuvent intercepter les mêmes raccourcis ou masquer l'icône Spark. Parade : désactivez temporairement les autres extensions IA pour isoler le problème, puis réactivez celle dont vous avez besoin.
  • Performances sur gros projets : dans un dépôt de plusieurs centaines de milliers de fichiers, l'indexation du projet peut ralentir l'éditeur. Parade : ajoutez un fichier .claudeignore à la racine pour exclure node_modules, dist, .next, et tout dossier généré.
  • Modifications non validées par erreur : en mode auto-accept (raccourci Shift+Tab deux fois dans certaines configurations), Claude écrit sans demander. Parade : restez en mode par défaut tant que vous découvrez l'outil, et n'activez l'auto-accept que sur des tâches répétitives bien cadrées.
  • Version VS Code trop ancienne : l'extension exige VS Code 1.98.0 ou supérieur. Parade : mettez à jour via Help puis Check for Updates.
  • Icône Spark invisible : elle n'apparaît que lorsqu'un fichier est ouvert. Parade : ouvrez un fichier, ou passez par l'icône Spark de la barre d'activité (toujours visible).
  • JetBrains en remote : sous WSL2 ou en Remote Development, le plugin doit être installé côté hôte distant, pas côté client. Parade : installez via Settings puis Plugin (Host) et redémarrez l'IDE.
  • Cmd+Esc inactif sur macOS Tahoe : le système capture le raccourci pour le Game Overlay. Parade : System Settings puis Keyboard puis Keyboard Shortcuts puis Game Controllers, décochez Game Overlay.

Exercice 1 minute

Installez l'extension Claude Code officielle dans votre éditeur principal (vérifiez l'éditeur Anthropic), ouvrez un fichier de code que vous connaissez, sélectionnez une fonction de 10 à 20 lignes et tapez dans le panneau : « Explique ce que fait cette fonction et propose un nom plus parlant si pertinent. » Vérifiez que l'indicateur sous la zone de prompt affiche bien le fichier et la plage sélectionnée. Si oui, votre setup minimal fonctionne.

Variantes par plan

  • Free : pas d'accès à Claude Code (extension et CLI nécessitent un compte payant ou une clé API).
  • Pro : accès complet à l'extension et au CLI, usage limité par les quotas Pro standards.
  • Max : équivalent Pro avec quotas 5x à 20x plus généreux, utile pour les sessions longues de refactor ou de génération de tests massive.
  • Team : mêmes fonctionnalités individuelles, partage facilité des configurations via .claude/settings.json versionné dans le dépôt git pour toute l'équipe.
  • Enterprise : SSO, audit, administration centralisée, et possibilité de basculer sur Amazon Bedrock, Google Vertex AI ou Microsoft Foundry comme fournisseur du modèle.

Liens internes