Tutoriel d'utilisation de Claude Code pour VS Code

Claude Code est un outil de codage agentique lancé par Anthropic, également connu comme l’un des agents de programmation les plus puissants au monde. L’extension Claude Code pour VS Code offre une interface graphique native, prenant en charge des fonctionnalités telles que la vue Diff en ligne, les références @-mentions, les révisions planifiées, etc. C’est la méthode recommandée pour utiliser Claude Code dans VS Code. Ce document présente principalement comment configurer et utiliser l’extension Claude Code dans VS Code via le service proxy d’AceData Cloud.

Processus de demande

Pour utiliser Claude Code, vous pouvez d’abord vous rendre sur la page de service Claude Messages et cliquer sur le bouton « Acquire » pour obtenir les informations d’identification nécessaires à la demande :

Si vous n’êtes pas encore connecté ou inscrit, vous serez automatiquement redirigé vers la page de connexion pour vous inviter à vous inscrire et à vous connecter. Après vous être connecté ou inscrit, vous serez automatiquement renvoyé à la page actuelle. Lors de votre première demande, un quota gratuit sera offert, vous permettant d’expérimenter le service Claude Code gratuitement.

Installation du plugin

Exigences système

VS Code 1.98.0 ou version ultérieure (compatible avec Cursor)

Étapes d’installation

Dans le marché des extensions de VS Code / Cursor, appuyez sur Cmd+Shift+X (Mac) ou Ctrl+Shift+X (Windows/Linux) pour ouvrir la vue des extensions, recherchez Claude Code, trouvez le plugin publié par Anthropic et cliquez sur « Install » pour l’installer : Plugin Claude Code dans le marché VS Code

Plugin Claude Code dans le marché VS Code

Vous pouvez également installer directement via les liens suivants :

Après l’installation, sélectionnez « Trust » dans la notification contextuelle pour finaliser l’installation.

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

Configuration de l’API AceData Cloud

Lors de la première ouverture du plugin, il vous sera demandé de vous connecter au compte officiel d’Anthropic. Vous pouvez ignorer la connexion officielle en configurant l’API proxy d’AceData Cloud, sans abonnement officiel.

Étape 1 : Configurer les variables d’environnement

Vous pouvez choisir de configurer les variables d’environnement à l’un des emplacements suivants : Option A : Configuration au niveau utilisateur (applicable à tous les projets) Éditez ~/.claude/settings.json (créez-le s’il n’existe pas) et ajoutez la configuration env, en remplaçant {token} par le jeton API que vous avez obtenu dans le tableau de bord d’AceData Cloud :

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "{token}",
    "ANTHROPIC_BASE_URL": "https://api.acedata.cloud"
  }
}

Option B : Configuration au niveau projet (uniquement pour le projet actuel) Créez .claude/settings.json (configuration partagée) ou .claude/settings.local.json (configuration personnelle, gitignored) dans le répertoire racine du projet :

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "{token}",
    "ANTHROPIC_BASE_URL": "https://api.acedata.cloud"
  }
}

Astuce : Le jeton API peut être consulté dans le tableau de bord d’AceData Cloud. La valeur de ANTHROPIC_AUTH_TOKEN sera automatiquement préfixée par Bearer lors de l’envoi au serveur. La configuration au niveau projet a une priorité plus élevée que celle au niveau utilisateur. Il est recommandé d’utiliser la configuration partagée .claude/settings.json pour les projets d’équipe, tandis que les informations sensibles personnelles doivent être placées dans .claude/settings.local.json.

Étape 2 : Désactiver l’invite de connexion (optionnel)

Si vous ne souhaitez pas voir l’invite de connexion à chaque ouverture, vous pouvez cocher Disable Login Prompt dans les paramètres de VS Code : Recherchez « Claude Code login » dans les paramètres, trouvez l’option Disable Login Prompt et cochez-la. Une fois la configuration terminée, rouvrez le panneau de l’extension Claude Code pour commencer à l’utiliser normalement.

Ouvrir le panneau Claude Code

Après l’installation et la configuration, plusieurs méthodes s’offrent à vous pour ouvrir Claude Code :

Méthode	Action
Barre d’outils de l’éditeur	Cliquez sur l’icône ✦ Spark en haut à droite de l’éditeur (un fichier doit être ouvert)
Barre d’état	Cliquez sur « ✱ Claude Code » à droite de la barre d’état en bas (aucun fichier n’est requis)
Palette de commandes	`Cmd+Shift+P` / `Ctrl+Shift+P`, recherchez « Claude Code »
Raccourci clavier	`Cmd+Esc` (Mac) / `Ctrl+Esc` (Windows/Linux) pour changer le focus

Contrairement à des outils comme Cursor / Copilot qui utilisent une barre latérale, Claude Code utilise par défaut une vue de zone d’édition comme zone de chat, offrant une plus grande surface visible et un affichage de contenu plus riche. Vous pouvez également faire glisser le panneau vers la barre latérale ou d’autres emplacements. Panneau Claude Code dans VS Code

Utilisation de base

Interaction par dialogue

Dans le panneau Claude Code, saisissez directement un langage naturel pour interagir avec Claude. Par exemple :

« Aide-moi à analyser l’architecture globale de ce projet »
« Ce code a un bug, aide-moi à le corriger »
« Refactorise cette fonction pour améliorer la lisibilité »
« Écris des tests unitaires pour ce module »

Claude Code comprendra automatiquement le contexte de votre code et analysera et modifiera à travers les fichiers. Lorsque Claude doit modifier un fichier, une vue de comparaison Diff s’affichera, vous permettant d’accepter ou de refuser les modifications. Dialogue et suggestions de Claude Code dans VS Code

Dialogue et suggestions de Claude Code dans VS Code

Références contextuelles

Utilisez le symbole @ dans le dialogue pour référencer des fichiers ou contextes spécifiques :

@filename.py — Référence un fichier spécifique (prise en charge des correspondances floues)
@src/components/ — Référence un répertoire entier (un slash à la fin est requis)
@terminal:name — Référence la sortie du terminal

Après avoir sélectionné du code dans l’éditeur, appuyez sur Option+K (Mac) / Alt+K (Windows/Linux) pour insérer rapidement une référence @ (comme @app.ts#5-10).

Commandes slash

Cliquez sur l’icône / dans la boîte de dialogue, ou tapez directement /, pour utiliser de nombreuses fonctionnalités intégrées : Les commandes courantes incluent :

Commande	Fonction
`/new`	Créer un nouveau dialogue
`/model`	Changer de modèle
`/compact`	Compresser le contexte
`/mcp`	Configurer le service MCP
`/config`	Ouvrir les paramètres
`/usage`	Voir l’utilisation
`/memory`	Gérer la mémoire de Claude
`/help`	Afficher les informations d’aide

Voir l’historique des dialogues

Cliquez sur le menu déroulant en haut du panneau pour voir l’historique des dialogues, avec la possibilité de rechercher par mots-clés et de naviguer par période (Aujourd’hui, Hier, 7 derniers jours, etc.), facilitant le retour sur les interactions précédentes. Cliquez sur n’importe quel dialogue pour restaurer l’historique complet des messages.

Révision des modifications de code

Lorsque Claude doit modifier un fichier, une vue de comparaison Diff s’affiche, montrant la comparaison entre le code original et le code modifié. Vous pouvez choisir d’accepter ou de refuser chaque modification, ou indiquer à Claude ce que vous souhaitez faire différemment : Vue de comparaison Diff dans VS Code

Mode de permission

Vous pouvez changer de mode de permission via l’indicateur de mode en bas du panneau :

Mode	Description
Default (Demander)	Demande de confirmation avant chaque opération (par défaut)
Plan	Claude établit d’abord un plan en attente d’approbation, exécute après confirmation
acceptEdits	Accepte automatiquement les modifications de fichiers, mais les commandes terminal doivent encore être confirmées
bypassPermissions	Ignore toutes les invites de permission, entièrement automatisé (à utiliser avec prudence)

Sessions multiples en parallèle

Utilisez Ouvrir dans un nouvel onglet ou Ouvrir dans une nouvelle fenêtre dans le panneau de commandes pour lancer plusieurs dialogues indépendants, chaque dialogue maintenant son propre historique et contexte, permettant de traiter différentes tâches en parallèle.

Autres paramètres

Changer de modèle

Claude Code prend en charge le changement entre différents modèles, tels que Claude Sonnet, Claude Opus, etc. Vous pouvez configurer cela via la commande /model ou dans les paramètres du plugin sous Modèle sélectionné.

Mode automatique

Dans les paramètres du plugin, vous pouvez définir le Mode de permission initial sur bypassPermissions, une fois activé, Claude Code n’affichera plus de fenêtres de confirmation lors de l’exécution d’éditions de fichiers, de commandes terminal, etc., réalisant ainsi un flux de travail entièrement automatisé. Vous pouvez également le définir sur acceptEdits pour accepter automatiquement les modifications, mais les commandes terminal nécessiteront toujours une confirmation dans un mode semi-automatique.

Remarque : Avant d’activer le mode automatique, assurez-vous de comprendre ses risques, il est conseillé de l’utiliser dans un environnement de projet de confiance.

Utiliser le CLI dans le terminal

Si vous préférez un style de ligne de commande, vous pouvez cocher Utiliser le terminal dans les paramètres de VS Code, Claude Code s’exécutera en mode CLI dans le terminal intégré. Vous pouvez également ouvrir directement le terminal intégré de VS Code et exécuter la commande claude.

Questions fréquentes

Que faire en cas d’échec de connexion ?

Vérifiez que la configuration des variables d’environnement dans ~/.claude/settings.json ou .claude/settings.json est correcte, en particulier ANTHROPIC_AUTH_TOKEN et ANTHROPIC_BASE_URL
Assurez-vous que le jeton API est valide (vous pouvez le vérifier dans le tableau de bord)
Vérifiez que la connexion réseau est normale, assurez-vous d’accéder à https://api.acedata.cloud
Redémarrez VS Code et réessayez

L’icône Spark n’apparaît pas ?

Assurez-vous qu’un fichier est ouvert (ouvrir uniquement un dossier ne suffit pas)
Vérifiez que la version de VS Code est 1.98.0 ou supérieure
Exécutez « Developer: Reload Window » dans le panneau de commandes
Ou cliquez directement sur « ✱ Claude Code » dans la barre d’état en bas

Comment voir le quota restant ?

Connectez-vous au tableau de bord AceData Cloud pour voir le quota restant et l’utilisation actuelle de votre compte.

En savoir plus

📖 Documentation officielle de Claude Code VS Code
⌨️ Référence des commandes et raccourcis VS Code
🔧 Service Claude Code d’AceData Cloud
💬 Pour toute question, n’hésitez pas à nous contacter via le service client de la plateforme

​Processus de demande

​Installation du plugin

​Exigences système

​Étapes d’installation

​Configuration de l’API AceData Cloud

​Étape 1 : Configurer les variables d’environnement

​Étape 2 : Désactiver l’invite de connexion (optionnel)

​Ouvrir le panneau Claude Code

​Utilisation de base

​Interaction par dialogue

​Références contextuelles

​Commandes slash

​Voir l’historique des dialogues

​Révision des modifications de code

​Mode de permission

​Sessions multiples en parallèle

​Autres paramètres

​Changer de modèle

​Mode automatique

​Utiliser le CLI dans le terminal

​Questions fréquentes

​Que faire en cas d’échec de connexion ?

​L’icône Spark n’apparaît pas ?

​Comment voir le quota restant ?

​En savoir plus