Modifier plusieurs fichiers en une seule demande

Introduction

Jusqu'à présent, nous avons effectué des modifications chirurgicales : changer une couleur, un titre, ou ajouter une image dans un fichier précis. C'est idéal pour s'entraîner.

Cependant, dans le monde réel, une application moderne est un écosystème interconnecté. Une simple fonctionnalité peut nécessiter de créer une nouvelle page, de modifier le menu pour y ajouter un lien, de mettre à jour la base de données, et de styliser le tout.

Modifier 5 fichiers d'un coup est l'épreuve du feu. Codex excelle dans cet exercice, mais c'est également là que les erreurs d'incompréhension pardonnent le moins. Une demande vague se transformera en modifications aléatoires disséminées dans tout votre projet. Apprenons à maîtriser la bête.

Pourquoi plusieurs fichiers sont souvent concernés

Imaginons un cas simple : "Je veux une page Contact". Si l'on y réfléchit techniquement, cette demande implique forcément d'altérer la structure globale de l'application.

Comment préparer une demande multi-fichiers

Une tâche complexe nécessite une méthode rigoureuse. Ne foncez pas tête baissée.

1. Comprendre l'objectif : "Je veux un bouton qui permet de passer le site en mode nuit."
2. Identifier les risques : "Cela risque d'impacter toutes les couleurs de tous les fichiers CSS."
3. Décrire le résultat : "Le fond doit être noir et le texte blanc. Le bouton doit être dans l'en-tête."
4. Préciser les contraintes : "Je ne veux pas utiliser de bibliothèque externe, fais-le en CSS pur."
5. Demander une analyse : "Avant de coder, explique-moi quels fichiers tu vas modifier et comment."

graph TD;
    A[Idée] --> B[Identification des contraintes];
    B --> C[Analyse préalable par Codex];
    C --> D[Validation humaine de la stratégie];
    D --> E[Génération et modification du code];
    E --> F[Vérification visuelle et technique];

Expliquer clairement son objectif

Sur une requête complexe, le niveau de précision du prompt définit directement la qualité du code. Voici la différence entre un développeur débutant et un expert Codex :

Laisser Codex identifier les fichiers (L'audit préalable)

Ne prenez jamais le risque de laisser Codex parcourir vos fichiers et les écraser sans préavis.

L'erreur classique :
"Ajoute un système d'articles recommandés à la fin des pages d'articles de blog."
(Codex va analyser, trouver une solution, et générer massivement du code. S'il se trompe d'architecture, il faudra passer une heure à tout nettoyer).

L'approche de l'expert :
"Je souhaite ajouter un système d'articles recommandés à la fin des pages de blog. Analyse le projet. Identifie les fichiers concernés. Explique la stratégie que tu comptes adopter. N'effectue ENCORE AUCUNE modification."

Codex va vous répondre : "J'ai analysé le projet. Je devrai modifier `Article.html` pour l'affichage, `styles.css` pour la grille, et `données.json` pour ajouter des relations. Es-tu d'accord avec cette approche ?"

Modifier plusieurs fichiers sans perdre le contrôle

La règle d'or pour survivre à des modifications massives : découpez le problème.

Même si Codex peut modifier 10 fichiers simultanément, il est préférable de piloter l'opération étape par étape :

• Étape 1 : Les fondations. "Commence uniquement par créer le modèle de données JSON et les fonctions JavaScript pour récupérer les articles recommandés." (Vérifiez la console).
• Étape 2 : L'interface. "C'est bon. Maintenant, intègre uniquement le HTML à la fin des pages de blog, sans CSS." (Vérifiez l'apparition du texte brut).
• Étape 3 : Le style. "Parfait. Maintenant, applique un design en grille CSS pour ces recommandations." (Vérifiez le visuel final).

Ajouter une fonctionnalité complète (Cas pratiques)

Génère une page FAQ complète. Crée un nouveau fichier faq.html. Le comportement d'accordéon (déplier/plier) doit être géré avec les balises natives HTML <details> et <summary> (sans JavaScript). Ajoute un lien vers cette page dans le menu principal (header.html).

Analyse les fichiers d'articles. Crée un fichier search.js capable de filtrer les articles par titre selon ce que l'utilisateur tape. Intègre une barre de recherche visuelle dans le composant Navbar. N'utilise aucune base de données, fais un filtrage local en JavaScript.

Limiter les modifications

Souvent, le problème n'est pas ce que Codex fait de bien, c'est ce qu'il fait en trop. Encadrez-le avec des "Ne pas" absolus :

• "Ne renomme aucun fichier existant."
• "Conserve l'architecture CSS exacte telle qu'elle est. Utilise les classes utilitaires déjà présentes."
• "Modifie la fonction de tri, mais ne touche absolument pas à la fonction d'affichage qui se trouve juste en dessous."

Vérifier les modifications (Checklist)

Une fonctionnalité déployée sur plusieurs fichiers augmente exponentiellement le risque de "dommages collatéraux".

• [ ] Compilation : Si vous utilisez un framework (React, Vue), l'application compile-t-elle encore sans erreur ?
• [ ] Console vierge : Aucun message d'erreur rouge `ReferenceError` ou `undefined` dans la console du navigateur ?
• [ ] Cohérence visuelle : La nouvelle fonctionnalité utilise-t-elle la même police et les mêmes couleurs que le reste du site ?
• [ ] Les liens morts : Si un menu a été modifié, tous les anciens liens fonctionnent-ils encore ?
• [ ] Régression : Ce qui marchait hier marche-t-il toujours aujourd'hui ?

Les erreurs les plus fréquentes

• Symptôme : "Codex a tout cassé, mon site est un champ de ruines."
  Cause : Vous avez demandé "Refais mon site pour qu'il soit moderne" sans aucune précaution.
  Bonne pratique : Ne demandez jamais de refonte globale en un prompt.
• Symptôme : "Il a créé des fichiers en double."
  Cause : Au lieu d'utiliser `styles.css`, il a généré un `global.css` car vous ne lui avez pas donné le nom.
  Bonne pratique : "Utilise le fichier `styles.css` existant."
• Symptôme : "Ma modification marche, mais le design de l'accueil a explosé."
  Cause : Codex a modifié une classe CSS globale (ex: `.card`) utilisée partout.
  Bonne pratique : "Créé une classe CSS spécifique uniquement pour cette nouvelle fonctionnalité."
• Symptôme : Vous avez perdu le fil de la conversation.
  Cause : Vous avez effectué 25 retours en arrière dans la même session de chat.
  Bonne pratique : Fermez la conversation, faites un git commit, et ouvrez un nouveau terminal propre.
• Symptôme : Le code est fonctionnel mais impossible à relire.
  Cause : L'IA a accumulé des scripts sans les ranger.
  Bonne pratique : Demandez une pause refactoring : "Sépare ce gros fichier en 3 petits fichiers logiques."

Atelier pratique

Conseils vitaux

Tableau récapitulatif des stratégies

Foire aux questions

À retenir

Transition vers le chapitre suivant

Ajouter des fonctionnalités, c'est bien. Mais que faire lorsque le projet ne fonctionne plus et que la console clignote en rouge ?

Vous avez vu comment agir, vous allez maintenant apprendre à réagir. Le chapitre suivant est dédié à l'art fondamental du débogage. Vous allez découvrir comment transformer Codex en un détective privé implacable, capable de traquer et d'exterminer le moindre bug caché au fin fond de vos fichiers.