canonical_url: https://yycode.net/docs/fr/vscode-gui-guide lang: fr updated_at: 2026-07-04T13:33:48.616Z source_html: https://yycode.net/docs/fr/vscode-gui-guide # Tutoriel graphique yycode × Claude Code VS Code ## Prérequis - Avoir terminé l'[installation de l'environnement Node.js](nodejs-setup) - Avoir installé Claude Code (`npm install -g @anthropic-ai/claude-code`) --- ## 1. Installer VS Code Rendez-vous sur le [site officiel de VS Code](https://code.visualstudio.com/Download) pour télécharger l'installateur correspondant à votre plateforme. Utilisateurs Mac : choisissez la bonne architecture de puce : - **ARM64** : puces M1 / M2 / M3 / M4 - **x64** : puces Intel --- ## 2. Installer l'extension Claude Code for VS Code Ouvrez VS Code, cliquez sur **Extensions** dans la barre de gauche, recherchez `Claude Code for VS Code`, vérifiez que l'éditeur est **Anthropic**, puis cliquez sur **Installer**. ![](https://r2.bozhouai.com/dragoncode/file-20260401164747215.png) Après l'installation, ouvrez n'importe quel projet, puis cliquez sur l'**icône Claude Code** en haut à droite pour ouvrir le panneau de l'extension. ![](https://r2.bozhouai.com/dragoncode/file-20260401164814316.png) --- ## 3. Créer une API Key Connectez-vous à la [console yycode](https://yycode.net/console/token), ouvrez la page **Gestion des jetons**, puis cliquez sur **Ajouter un jeton**. ![](https://r2.yycode.net/yycode/i9bq1Ik.png) ![](https://r2.yycode.net/yycode/9KXR1Ik.png) Renseignez le nom de la clé, choisissez le groupe (modèle et multiplicateur), puis configurez si nécessaire les restrictions d'IP, de quota, de modèles et la durée de validité. Pour les débutants, il est recommandé de conserver la configuration par défaut. > **Conseil de sécurité** : une API Key équivaut à des identifiants de compte. Conservez-la avec soin, ne la soumettez jamais dans un dépôt de code et ne la partagez pas publiquement. --- ## 4. Importer la clé Cliquez sur le bouton **Copier** à côté de la clé pour obtenir l'API Key. ![](https://r2.yycode.net/yycode/EDOv1Ik.png) Vous devez définir les deux variables d'environnement suivantes : | Nom de variable | Valeur | |---|---| | `ANTHROPIC_BASE_URL` | `https://yycode.net` | | `ANTHROPIC_AUTH_TOKEN` | Votre API Key | **Réglage temporaire (valable pour la session de terminal actuelle)** Windows (PowerShell) : ```powershell $env:ANTHROPIC_BASE_URL = "https://yycode.net" $env:ANTHROPIC_AUTH_TOKEN = "YOUR_API_KEY" ``` macOS / Linux : ```bash export ANTHROPIC_BASE_URL="https://yycode.net" export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY" ``` **Réglage permanent (toujours valide après redémarrage)** Windows (PowerShell) : ```powershell [System.Environment]::SetEnvironmentVariable("ANTHROPIC_BASE_URL", "https://yycode.net", [System.EnvironmentVariableTarget]::User) [System.Environment]::SetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN", "YOUR_API_KEY", [System.EnvironmentVariableTarget]::User) ``` macOS (Zsh) : ```bash echo 'export ANTHROPIC_BASE_URL="https://yycode.net"' >> ~/.zshrc echo 'export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"' >> ~/.zshrc source ~/.zshrc ``` Linux (Bash) : ```bash echo 'export ANTHROPIC_BASE_URL="https://yycode.net"' >> ~/.bashrc echo 'export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"' >> ~/.bashrc source ~/.bashrc ``` --- ## 5. Ignorer la connexion officielle Lors de la première ouverture de l'extension, une page de connexion officielle Anthropic peut apparaître avec trois méthodes de connexion. **N'en choisissez aucune** : attendez 3 à 5 secondes et la page disparaîtra automatiquement. Si les variables d'environnement ont été configurées à l'étape précédente, l'extension utilisera automatiquement l'API Key Dragon Code, sans connexion. ![](https://r2.bozhouai.com/dragoncode/file-20260401164915737.png) Si la page de connexion ne disparaît pas automatiquement, cliquez sur les paramètres en bas à gauche, recherchez Claude code, puis cochez **Disable Login Prompt** pour la fermer manuellement. ![](https://r2.bozhouai.com/dragoncode/file-20260401165140845.png) ![](https://r2.bozhouai.com/dragoncode/file-20260401165116806.png) Après configuration réussie, l'interface ressemble à ceci : ![](https://r2.bozhouai.com/dragoncode/file-20260401165223172.png) --- ## 6. Commencer à utiliser Décrivez votre besoin en langage naturel dans le champ de saisie et interagissez avec Claude Code sous forme de conversation. L'extension lira et modifiera automatiquement le code du projet courant. ![](https://r2.bozhouai.com/dragoncode/file-20260401165343382.png) --- ## 7. Conseils d'utilisation ### Trois modes d'opération Le mode d'opération peut être changé en bas à gauche : ![](https://r2.bozhouai.com/dragoncode/file-20260401165410771.png) **1. Ask before edits（demander avant modification）** Mode le plus prudent. Chaque modification proposée par Claude est d'abord affichée, puis écrite dans les fichiers seulement après votre confirmation. Convient aux débutants ou aux modifications de code critiques nécessitant une validation étape par étape. **2. Edit automatically（modifier automatiquement）** Mode le plus automatisé. Claude modifie directement les fichiers de code sans confirmation étape par étape. Convient aux besoins déjà clairs et aux modifications à livrer rapidement. Attention : les changements peuvent dépasser les attentes ; vérifiez ensuite le Git diff pour confirmer le périmètre. **3. Plan mode（mode planification）** Ne modifie pas directement le code. Il analyse d'abord la structure du projet, propose un plan complet et des étapes d'exécution, puis agit après votre confirmation. Convient aux tâches complexes, comme la refactorisation, les changements multi-fichiers ou les ajustements d'architecture. Voir le plan avant d'agir évite les modifications massives incontrôlées. ### Développement parallèle multi-fenêtres Cliquez sur le **+** en haut à droite pour ouvrir plusieurs fenêtres Claude Code, par exemple une pour le développement et une autre pour les tests. ![](https://r2.bozhouai.com/dragoncode/file-20260401170043951.png) ### Référencer des fichiers du projet Saisissez `@` dans le champ d'entrée, puis choisissez un nom de fichier pour transmettre son contenu comme contexte à Claude Code. ![](https://r2.bozhouai.com/dragoncode/file-20260401170057102.png) ### Téléverser un fichier Saisissez `/attach file`, puis téléversez un fichier depuis le sélecteur. ![](https://r2.bozhouai.com/dragoncode/file-20260401170128374.png) > **Attention** : l'icône de pièce jointe en bas à droite sert à **référencer un fichier** (ajouter du contexte), pas à téléverser un fichier. Faites bien la distinction. ### Changer de modèle Saisissez `/model`, choisissez **Switch Model**, puis changez de modèle selon vos besoins. ![](https://r2.bozhouai.com/dragoncode/file-20260401170141185.png) --- ## Questions fréquentes (FAQ) **Q : l'icône Claude Code n'apparaît pas après installation de l'extension ?** A : vérifiez que l'extension est bien installée, puis essayez de redémarrer VS Code. L'icône se trouve dans la barre d'outils en haut à droite de l'éditeur. **Q : la page de connexion ne disparaît jamais ?** A : saisissez `/config` dans la boîte de dialogue, puis cochez `Disable Login Prompt` pour fermer l'invite de connexion. **Q : l'extension indique une connexion échouée ou une erreur 401 ?** A : vérifiez que `ANTHROPIC_BASE_URL` est bien `https://yycode.net`, et que `ANTHROPIC_AUTH_TOKEN` est correctement renseigné et non expiré. **Q : comment changer de modèle ou de multiplicateur ?** A : créez des clés de groupes différents dans la [console yycode](https://yycode.net/console/token), puis utilisez CC Switch pour basculer rapidement entre plusieurs configurations. **Q : quelle version de VS Code choisir ?** A : sur Mac, choisissez selon la puce : ARM64 pour les puces série M, x64 pour Intel. Sur Windows, téléchargez simplement la version par défaut.