Shippable Studio

Démarrez avec Claude Code : Le Guide du Développeur

Dans notre dernier article, nous avons exploré pourquoi Claude Code change la donne. Maintenant, passons au comment.

Ce guide vous accompagnera dans l'installation de Claude Code et son utilisation pour effectuer votre première refactorisation.

Prérequis

Avant de commencer, assurez-vous d'avoir :

  1. Node.js (v18 ou supérieur) installé.
  2. Une Clé API Anthropic (vous pouvez en générer une depuis la Console Anthropic).
  3. Un terminal (iTerm2, Terminal.app, ou votre terminal VS Code).

Installation

Claude Code est distribué sous forme de paquet npm. Ouvrez votre terminal et lancez :

bash
npm install -g @anthropic-ai/claude-code

Une fois installé, authentifiez-vous avec votre compte Anthropic :

bash
claude auth

Cela ouvrira une fenêtre de navigateur. Connectez-vous, approuvez les permissions, et copiez le code de vérification dans votre terminal.

Votre première tâche : Refactorisation "Hello World"

Testons-le sur un projet réel. Naviguez vers l'un de vos repository.

bash
cd ~/my-projects/awesome-app

Maintenant, initialisez Claude :

bash
claude
# ou tapez simplement une commande
claude "Analyse ce répertoire et dis-moi quelle est la stack technique principale."

La magie du "Contexte Profond"

Contrairement à ChatGPT, où vous devez coller des fichiers, Claude Code va exécuter ls, lire votre package.json, et peut-être jeter un coup d'œil à quelques fichiers sources pour vous donner une réponse précise.

Exemple de réponse :

Je vois que vous utilisez Next.js 16 avec TypeScript et Tailwind CSS. Le point d'entrée principal semble être app/layout.tsx.

Un flux de travail réel : Créer un composant

Demandons-lui de faire quelque chose d'utile.

Prompt :

"Crée un nouveau composant React appelé Button.tsx dans le dossier components/ui. Il doit accepter des props variant ('primary', 'secondary') et size. Utilise Tailwind CSS pour le style. Assure-toi qu'il correspond aux design tokens trouvés dans tailwind.config.js."

Les Actions de Claude :

  1. Lit tailwind.config.js pour comprendre vos couleurs/espacements.
  2. Vérifie si components/ui existe (le crée sinon).
  3. Écrit le fichier Button.tsx.

Vous n'avez pas écrit une seule ligne de code. Vous avez simplement décrit l'intention.

Meilleures pratiques pour les prompts

Pour tirer le meilleur parti de Claude Code, traitez-le comme un développeur junior :

  1. Soyez Spécifique : Au lieu de "Corrige le bug", dites "La page de connexion plante quand le mot de passe est vide. Améliore la logique de validation dans LoginForm.tsx."
  2. Nourrissez le Contexte (Optionnel) : Bien qu'il puisse chercher, vous pouvez le guider : "En utilisant lib/utils.ts, refactorise..."
  3. Révisez Avant de Commit : Claude Code vous montrera souvent un diff avant d'appliquer les changements. LISEZ-LE. C'est un agent, pas un magicien ; il peut faire des erreurs.

Sécurité avant tout

Claude Code est puissant—il a un accès en écriture à votre système de fichiers.

  • Lancez-le toujours dans un état git propre (git status doit être clean).
  • Lisez les commandes shell proposées avant de les autoriser (il demande généralement la permission).
  • Utilisez git diff après qu'il a fini pour vérifier exactement ce qui a changé.