Chapitre 2

Guide d’utilisation de l’IA

Comprenez les principes économiques de la programmation IA, établissez des flux de travail standard, configurez un environnement de développement efficace et laissez l’IA mieux travailler pour vous.

L’économie de la programmation assistée par l’IA

Principe fondamental : les tokens, c’est de l’argent

Chaque fois que vous laissez l’IA lire des fichiers de projet, rechercher du code ou générer des réponses, vous engagez des coûts réels.Plus le contexte est grand, plus le coût est élevé. Lire l’ensemble du projet par rapport à un seul fichier, la différence est d’un ordre de grandeur.

Mais plus important encore —Un contexte précis permet non seulement d’économiser de l’argent, mais rend aussi les résultats plus précis. L’optimisation des prompts ne consiste pas à « peaufiner la formulation », mais à réduire l’étendue du contexte que l’IA doit lire.

Stratégie de contexte précise

❌ Description floue

« Veuillez jeter un œil et voir s’il y a des problèmes avec le projet »

→ L’IA doit lire l’ensemble du projet, ce qui consomme un grand nombre de tokens

✅ Spécifier avec précision

"Vérifier la logique de connexion dans `src/utils/auth.ts`"

→ L’IA ne lit que les fichiers pertinents, réduisant la consommation de tokens de 90 %

Astuces d’optimisation

  • Spécifiez le chemin du fichier : mieux qu’une description vague
  • Préciser le périmètre de la fonctionnalité: plus ciblé que de dire vaguement « le projet a des problèmes »
  • Supprimer les formules de politesse : ne définissez pas de rôle d’expert, indiquez directement la tâche
  • Utiliser des résumés: Utiliser des résumés plutôt que le texte intégral pour les longs documents
  • Utilisation de la surveillance:Vérifier régulièrement les statistiques d’utilisation des tokens pour identifier le gaspillage

Exemple d'optimisation des coûts

Lire l’ensemble du projet (100+ fichiers)~50,000 Tokens
Ne lire que les fichiers pertinents (3 à 5 fichiers)~5,000 Tokens
💡 Un contexte précis peut faire économiser 90 % du coûttout en améliorant la précision des sorties

Flux de travail VibeCoding

Insight clé : le cœur du Vibecoding est le Workflow, pas le Prompt

Auparavant, vous avanciez au fil de vos idées et laissiez l’IA écrire directement, mais cela entraîne souvent des retouches. Les vrais experts ne s’appuient pas sur la configuration, mais surL’art de parleretProcessus standard

Donner une « sortie » à l'IA

Parfois, l’IA ne connaît pas la réponse mais en invente une de force. Dites-lui : « Si vous n’êtes pas sûr, dites-le clairement et attendez ma confirmation au lieu d’inventer. »

Exemple de prompt :
« Si vous n’êtes pas certain d’un détail d’implémentation, veuillez le marquer clairement comme [À confirmer],
et expliquez vos hypothèses, puis attendez ma confirmation avant de continuer."

Processus standard en cinq étapes

1

Explorer la structure du projet

Commencez par comprendre la structure du projet afin d’éviter de découvrir à mi-chemin que le fichier a déjà été écrit

2

Planifier les étapes de mise en œuvre

Énumérez les étapes d’implémentation pour que l’IA exécute le plan au lieu d’écrire au fil de l’inspiration

3

Implémentation du code

Implémentez progressivement les fonctionnalités selon le plan, en vérifiant après chaque étape

4

Validation des tests

Vérifier que la fonctionnalité fonctionne correctement, et vérifier les cas limites et la gestion des erreurs

5

Soumettre le code

Validez le code à chaque fois qu’une fonctionnalité indépendante est terminée afin de créer un historique des versions

Comment éviter les reprises

  • Explorer avant de coder: Commencez à écrire du code après avoir compris la structure du projet
  • Planifier les étapes de mise en œuvre: Énumérez les étapes pour faire exécuter l’IA selon le plan
  • Validation étape par étape: Vérifiez à chaque étape, n’attendez pas la fin
  • Soumettre dans les délais: effectuer un commit à chaque fonctionnalité terminée, afin de faciliter le retour en arrière

Extension : systèmes multi-agents

Une fois que vous maîtrisez le flux de travail principal, vous pouvez explorer les systèmes multi-agents : faire collaborer plusieurs IA, l’une écrit le code, une autre le relit ; l’une écrit les tests, une autre la documentation. Elles peuvent travailler en parallèle pour améliorer l’efficacité, ou de manière séquentielle pour garantir la qualité.

Gestion de version Git

Le codage par IA est très radical, il faut donc mettre en place un filet de sécurité

L’IA peut casser trois anciennes fonctionnalités pour corriger un seul bug. Il faut donc la configurer correctement Git, établir des éléments à haute fréquenceHistorique de la version locale

Stratégie de commits fréquents

Chaque fois que vous terminez le développement d’une fonctionnalité indépendante, ou qu’après avoir corrigé un bug et validé son bon fonctionnement, exécutez automatiquement git commit pour valider le code.

Processus standard :
1. L’IA termine la fonctionnalité → la vérification réussit
2. Exécutez `git add .`
3. Exécutez `git commit -m "feat: ajouter la fonctionnalité de connexion utilisateur"`
4. Passer à la fonctionnalité suivante

Conventions de Commit Message

Utilisez un message de commit chinois concis qui décrit clairement les modifications apportées par ce commit.

✅ Bon exemple
feat: Ajouter la fonctionnalité de connexion utilisateur
fix : corriger le problème de style de la page de connexion
refactor : refactoriser la logique d’authentification des utilisateurs
❌ Mauvais exemple
Mettre à jour le code
fix bug
changes

Vous pouvez revenir en arrière à tout moment

Si le code casse, vous pouvez toujours revenir à la version stable précédente.

Commande de retour en arrière :
# Voir l’historique des commits
git log --oneline
# Revenir au commit précédent
git reset --hard HEAD~1
# Revenir à un commit spécifié
git reset --hard <commit-hash>

Astuces de configuration

En plus de choisir le bon outil, il existe trois astuces pour rendre l’IA encore plus utile, en résolvant les problèmes de mémoire faible et de textes incohérents. Les méthodes de configuration varient selon les outils, nous les présentons donc ci-dessous par catégorie d’outil.

4.1 Configuration de Cursor

Règles du projet (.cursorrules)

Créer dans le répertoire racine du projet .cursorrules Fichier, définissez les normes du projet.

Exemple .cursorrules :
# Normes de code
- Interdire l’utilisation du type `any`
- L’utilisation de `pnpm` comme gestionnaire de paquets est obligatoire
- Tous les composants doivent utiliser TypeScript
- Respecter la configuration ESLint et Prettier
- Utiliser des composants fonctionnels et des Hooks
- Tous les appels API doivent inclure une gestion des erreurs

Créer des Skills

Les Skills sont stockées dans .cursor/skills/ Dans le répertoire, utilisez le format Markdown.

Étapes de création :
  1. Créer .cursor/skills/ Table des matières
  2. Créer skill-name.md Fichier
  3. Rédiger les descriptions et instructions de Skill
  4. Appeler Skill dans Cursor
Exemple de Skill :
# Compétence de revue de code ## Utilité Examiner automatiquement la qualité du code ## Instructions Vérifiez si le code respecte les normes de l’équipe : - sécurité de type TypeScript - exhaustivité de la gestion des erreurs - lisibilité du code

Configuration du serveur MCP

dans .cursor/mcp.json Configurez le serveur MCP dans.

.cursor/mcp.json:
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem"],
      "env": {
        "ALLOWED_DIRECTORIES": ["/path/to/allowed"]
      }
    }
  }
}

Utilisation du mode Agent

Appuyez dans Cursor Cmd/Ctrl + K Ouvrez le mode Agent, ou utilisez Cmd/Ctrl + L Ouvrez le mode Chat.

  • Mode agent: L’IA peut exécuter automatiquement des tâches en plusieurs étapes et modifier plusieurs fichiers
  • Mode Chat : échangez avec l’IA pour obtenir des conseils et des extraits de code
  • Composer: Combiner plusieurs opérations pour traiter des tâches par lots

4.2 Configuration de Claude Code

Configuration du serveur MCP

La configuration MCP de Claude Code est ~/.claude/mcp.json ou du répertoire du projet .claude/mcp.json

~/.claude/mcp.json:
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token"
      }
    },
    "sequential-thinking": {
      "command": "node",
      "args": ["path/to/sequential-thinking-server.js"]
    }
  }
}

Créer des Skills

Claude Code Skills sont stockés dans ~/.claude/skills/ dans le répertoire.

Étapes de création :
  1. Créer ~/.claude/skills/ Table des matières
  2. Créer skill-name.md Fichier
  3. Rédiger la description du Skill (format Markdown)
  4. Utiliser dans le terminal @skill-name Appeler

4.3 Configuration de Codex CLI

Règles du projet (.codexrules)

Créer dans le répertoire racine du projet .codexrules fichier, ou utilisez /init Les commandes sont générées automatiquement.

Utilisez la commande /init :
codex /init
→ Analyser automatiquement la structure du projet
→ Générer le fichier .codexrules
Créer manuellement :
# .codexrules Le projet utilise TypeScript + React Utiliser pnpm comme gestionnaire de paquets Respecter la configuration ESLint d'Airbnb

Configuration d’analyse Monorepo

Codex CLI peut analyser de grands projets Monorepo et nécessite la configuration des informations de l'espace de travail.

  • Détection automatique: Codex détecte automatiquement les structures Monorepo
  • Paramètres de l’espace de travail: spécifier le chemin de l’espace de travail dans .codexrules
  • Gestion du contexte: charger uniquement le code de l’espace de travail pertinent

4.4 Autres configurations d’outils

Windsurf

  • Fast Context: Configuration automatique, aucune configuration manuelle requise
  • Cascade Agent: activer dans les paramètres
  • Règles du projet : utiliser .windsurfrules Fichier

GitHub Copilot

  • Règles du projet : utiliser .github/copilot-instructions.md
  • Fichiers associés: identifier automatiquement le contexte des fichiers associés
  • Complétion de code: Configurer le comportement de complétion dans les paramètres

Continue.dev

  • Fichier de configuration.continue/config.json
  • Modèles personnalisés:configurer un modèle local (Ollama)
  • Fournisseur de contexte: Configurer le contexte du dépôt

Fabric

  • Patterns: stocké dans ~/.config/fabric/patterns/
  • Pattern personnalisé : Créer pattern-name.md
  • API Key:Configurer dans les variables d’environnement

Les bases d’un débogage efficace

Avec l’IA, pas de panique en cas d’erreur

Mais pour que l’IA vous aide, vous devez apprendreLa bonne façon de demander de l’aide

D'abord : fournissez le journal d'erreurs complet

Les débutants ont souvent peur lorsqu’ils voient un écran rempli d’erreurs rouges et copient seulement la dernière ligne. Mais l’IA est comme un médecin : elle a besoin de voir tous les symptômes pour poser un diagnostic précis.

❌ Méthode incorrecte
Error: Cannot read property 'x' of undefined

→ Informations insuffisantes, l’IA ne peut pas diagnostiquer

✅ Bonne pratique
Error: Cannot read property 'x' of undefined at UserService.getUser (src/services/user.ts:45:12) at UserComponent.handleClick (src/components/User.tsx:23:5) ...informations complètes de la pile...

→ Avec des informations complètes, l’IA peut localiser précisément

💡 Suggestions d’utilisation: Prenez le message d’erreur rouge qui paraît le plus long et le plus complexe — sélectionnez-le intégralement tel quel, copiez-le et envoyez-le à l’IA.

Deuxième : mode de réparation en boucle

Si l’IA ne le corrige pas du premier coup, n’abandonnez pas. Décrivez le résultat après vos essais et laissez l’IA continuer à essayer.

Processus de correction itératif :
  1. L'IA propose une solution de correction
  2. Vous modifiez le code conformément au plan
  3. Si une nouvelle erreur apparaît, décrivez le résultat : « J’ai modifié selon votre méthode, mais maintenant une nouvelle erreur apparaît... »
  4. L’IA continue de corriger en fonction des nouvelles informations
  5. Répéter les étapes 2 à 4 jusqu’à ce que le problème soit résolu

💡 Expérience: la plupart des bugs nécessitent 2 à 3 itérations pour être résolus. N’attendez pas de l’IA qu’elle corrige tous les problèmes en une seule fois.

Types d’erreurs courantes et traitement

Erreur de type
Incompatibilité de types TypeScript
💡 Fournir des définitions de type et des messages d'erreur
Erreur d’exécution
Crash lors de l’exécution du code
💡 Fournir des informations de pile complètes et le code associé
Erreur logique
La fonctionnalité ne correspond pas aux attentes
💡 Décrire le comportement attendu et le comportement réel
Erreur de dépendance
Échec de l’installation ou de l’importation du package
💡 Fournissez package.json et le message d'erreur

Résultats d’apprentissage

À la fin de ce chapitre, vous pourrez :

  • 1Maîtriser les stratégies d’optimisation des coûts des tokens, contrôler précisément le périmètre du contexte et économiser 90 % des coûts
  • 2Mettre en place un workflow VibeCoding standard, maîtriser le processus de développement en cinq étapes et éviter les retouches
  • 3Configurez les règles du projet et les Skills pour que l’IA se souvienne des conventions du projet et améliore la qualité du code
  • 4Maîtriser des méthodes de débogage efficaces, apprendre à demander de l'aide correctement et résoudre rapidement les problèmes
  • 5Prendre l’habitude de commits Git fréquents afin de pouvoir revenir en arrière à tout moment et constituer un filet de sécurité