Claude Code dans VS Code — Tutoriel Complet

01 — Présentation

Qu'est-ce que Claude Code ?

Claude Code est l'agent de programmation officiel d'Anthropic. Contrairement à un simple chatbot, c'est un agent autonome capable de lire votre codebase, d'éditer des fichiers, d'exécuter des commandes et de gérer des flux de travail multi-fichiers — entièrement depuis votre environnement.

⚙

Agent complet

Claude Code navigue dans votre projet, lit plusieurs fichiers, planifie et exécute des modifications complexes en plusieurs étapes.

⬡

Diff intégré

Chaque modification proposée s'affiche en vue côte-à-côte avant application. Vous acceptez ou rejetez en un clic.

◎

Contexte @ mentions

Tapez @ pour référencer n'importe quel fichier de votre projet directement dans votre prompt.

↺

Checkpoints

Revenez en arrière à tout moment grâce au système de checkpoint rewind. Expérimentez sans risque.

ℹ

Claude Code nécessite un abonnement Pro ($20/mois), Max, Team ou Enterprise. L'extension elle-même est gratuite sur le marketplace VS Code. Des crédits API pay-as-you-go fonctionnent également.

02 — Installation

Installer Claude Code

L'extension VS Code inclut désormais le CLI et l'installe automatiquement. Vérifiez d'abord les prérequis.

Prérequis

01

Node.js 18 ou supérieur

Vérifiez votre version avec la commande ci-dessous. Si besoin, téléchargez depuis nodejs.org ou via nvm.

terminal

$ node --version
v20.11.0

02

VS Code 1.98.0 ou supérieur

Mettez à jour VS Code via Aide → Rechercher les mises à jour si nécessaire.

03

Un compte Anthropic actif

Créez votre compte sur claude.ai avec l'abonnement approprié.

Installer l'extension VS Code

1

Ouvrir le gestionnaire d'extensions

Appuyez sur Ctrl+Shift+X (Windows/Linux) ou Cmd+Shift+X (Mac) pour ouvrir le panneau Extensions.

2

Rechercher "Claude Code"

Dans la barre de recherche, tapez Claude Code. Installez l'extension publiée par l'éditeur officiel Anthropic.

Extensions: Marketplace

🔍 Claude Code

✦

Claude Code Anthropic · ✔ Vérifié · ⭐ 2M+ installs

AI coding agent by Anthropic — reads, edits, runs your code.

3

Vérifier l'installation (optionnel)

Une fois installée, l'icône étincelle ✦ apparaît dans la barre latérale ou la barre d'outils de l'éditeur.

💡

Vous pouvez aussi utiliser Claude Code sans l'extension, directement dans le terminal intégré de VS Code (Ctrl+`) en tapant claude. L'extension ajoute simplement les diffs visuels et les checkpoints.

03 — Authentification

Se connecter à son compte

Au premier lancement, Claude Code vous invite à vous authentifier avec votre compte Anthropic. Voici comment procéder.

1

Ouvrir Claude Code

Cliquez sur l'icône ✦ étincelle dans la barre latérale de VS Code, ou utilisez la palette de commandes :

Palette de commandes

> Claude Code: Open

2

S'authentifier

Un prompt de connexion apparaît. Cliquez sur "Sign in with Anthropic". Votre navigateur s'ouvre automatiquement pour valider la connexion. Revenez ensuite dans VS Code.

3

Confirmation

Le panneau Claude Code affiche votre compte connecté. Vous êtes prêt à travailler !

Claude Code

✔ Connecté en tant que : votre@email.com
✔ Plan : Pro
Démarrez une conversation avec Claude...

04 — Utilisation

Travailler avec Claude Code

Voici les flux de travail essentiels pour tirer le maximum de Claude Code directement dans VS Code.

Démarrer une conversation

→

Ouvrez une nouvelle conversation avec Ctrl+N (ou Cmd+N sur Mac) depuis le panneau Claude Code. Décrivez votre tâche en langage naturel.

Référencer des fichiers avec @

Prompt Claude Code

> Refactorise @src/utils/api.ts pour utiliser async/await
  partout et gère les erreurs HTTP avec un type Result.

> Écris des tests unitaires pour @src/components/Button.tsx
  et assure-toi qu'ils passent.

Lire le diff avant d'accepter

Chaque modification proposée apparaît dans la vue diff de VS Code. En rouge : supprimé. En vert : ajouté. Vous contrôlez tout avant que le code soit écrit.

api.ts — Diff proposé par Claude

- function fetchData(url) {
-   return fetch(url).then(r => r.json())
- }
+ async function fetchData(url: string): Promise<Result<Data>> {
+   const res = await fetch(url);
+   if (!res.ok) return { ok: false, error: res.statusText };
+   return { ok: true, data: await res.json() };
+ }

            
            
          

Exemples de tâches courantes

Debug

"Analyse cette stack trace et corrige le bug dans @src/router.ts"

Tests

"Génère des tests Jest pour tous les composants dans @src/components/"

Refacto

"Migre ce projet de JavaScript vers TypeScript en gardant toutes les fonctionnalités"

Docs

"Génère la documentation JSDoc pour toutes les fonctions de @src/utils/"

Git

"Crée une pull request avec un message de commit clair pour ces changements"

Review

"Revois @src/auth/ pour détecter les failles de sécurité potentielles"

05 — Astuces

Raccourcis & bonnes pratiques

Ctrl+Shift+X

Ouvrir les extensions VS Code

Ctrl+Shift+P

Palette de commandes → "Claude Code: Open"

Ctrl+N

Nouvelle conversation Claude Code

@

Référencer un fichier dans un prompt

Ctrl+`

Terminal intégré pour la CLI claude

✦ icône

Ouvrir Claude Code dans la barre latérale

Conseils pour de meilleurs résultats

⬡

Soyez précis dans vos prompts

Plus votre demande est spécifique, plus Claude Code sera efficace. Mentionnez le contexte, les contraintes et le résultat attendu.

⬡

Utilisez les checkpoints avant les gros changements

Créez un checkpoint avant de demander une refactorisation majeure pour pouvoir revenir en arrière facilement si besoin.

⬡

Combinez terminal et extension

Utilisez l'extension pour le travail en fichier avec diffs visuels, et le terminal (claude) pour les opérations plus larges ou automatisées.

⬡

Vérifiez les permissions par projet

Claude Code demande confirmation avant chaque commande shell par défaut. Configurez une liste blanche de commandes autorisées par projet pour fluidifier votre workflow.

⬡

Activez Extended Thinking

Pour les problèmes complexes, activez le bouton Extended Thinking (bas droite du prompt) — Claude prend plus de temps mais produit des raisonnements plus profonds.

→ Pour aller plus loin

Ressources officielles

📖

Documentation Claude Code docs.claude.com

🧩

Extension VS Code marketplace.visualstudio.com

⬡

Package npm @anthropic-ai/claude-code

✦

Créer un compte Anthropic claude.ai