# Comprendre le code existant (/fr/docs/verdent-for-vscode/task-based-guides/understanding-code)

> Utiliser Verdent pour explorer, analyser et comprendre des bases de code existantes



Verdent for VS Code vous aide à comprendre des bases de code inconnues grâce à des questions en langage naturel et à l'exploration automatisée. Le sous-agent Explorer intégré trouve rapidement des fichiers, recherche des motifs de code et répond à des questions architecturales sans consommer votre fenêtre de contexte principale.

### Ce que vous allez apprendre [#ce-que-vous-allez-apprendre]

* Explorer des bases de code inconnues à l'aide du sous-agent Explorer
* Poser des questions sur la structure et l'implémentation du code
* Obtenir des explications détaillées sur des fonctions, classes et modules
* Générer de la documentation à partir du code existant
* Comprendre l'architecture du projet et le flux de données
* Intégrer efficacement de nouveaux membres d'équipe

### Prérequis [#prérequis]

Avant d'utiliser Verdent pour comprendre du code :

* Visual Studio Code avec l'extension Verdent installée
* Une base de code ou un espace de travail de projet ouvert dans VS Code
* Un abonnement Verdent actif avec des crédits disponibles

***

## Explorer des bases de code inconnues [#explorer-des-bases-de-code-inconnues]

Lorsque vous posez des questions sur la structure d'une base de code ou demandez des recherches de fichiers, Verdent délègue automatiquement la tâche au **sous-agent Explorer** (`@Explorer`), un spécialiste économe en tokens optimisé pour une exploration rapide des bases de code.

Le sous-agent Explorer effectue rapidement les actions suivantes :

* Trouver des fichiers correspondant à des motifs ou des noms
* Rechercher des mots-clés ou fonctions spécifiques dans le code
* Répondre à des questions architecturales sur la base de code
* Identifier où une fonctionnalité est implémentée

**Exemples de questions d'exploration :**

```
What is the structure of this project?
```

```
Where is user authentication handled?
```

```
Find all API endpoint definitions
```

```
Show me where database queries are defined
```

L'Explorer travaille efficacement en arrière-plan, en fournissant des réponses rapides sans consommer votre fenêtre de contexte principale. Verdent présente les résultats avec les chemins de fichiers et extraits de code pertinents.

**Exploration parallèle pour les tâches complexes :**

Pour les tâches d'exploration complexes, plusieurs agents Explorer peuvent s'exécuter en parallèle afin de gagner du temps, chacun étudiant simultanément différents aspects de la base de code. Verdent synthétise ensuite les résultats en un résumé cohérent.

**Exemple :**

```
Use the Explorer agent to find all places where we manually validate email addresses
```

Cela garantit que Verdent découvre systématiquement chaque emplacement sans manquer d'occurrences dans la base de code.

***

## Poser des questions sur votre code [#poser-des-questions-sur-votre-code]

Verdent répond à pratiquement toutes les questions sur votre base de code en langage naturel. L'IA comprend le contexte et fournit des explications, analyses et informations détaillées.

<Tabs>
  <Tab title="Compréhension du code">
    Posez des questions sur le fonctionnement d'une fonctionnalité spécifique :

    ```
    Explain how authentication works in this project
    ```

    ```
    What does the calculateTotal function do?
    ```

    ```
    How are API requests handled?
    ```

    Verdent analyse le code pertinent, retrace les flux d'exécution et explique l'implémentation en se référant à des fichiers et numéros de ligne précis.
  </Tab>

  <Tab title="Architecture et structure">
    Comprenez la vue d'ensemble de votre application :

    ```
    What is the overall architecture of this application?
    ```

    ```
    How do the components communicate with each other?
    ```

    ```
    What design patterns are used in this codebase?
    ```

    Verdent examine la structure de votre projet, identifie les motifs et explique les décisions architecturales.
  </Tab>

  <Tab title="Implémentation">
    Obtenez des informations sur les décisions techniques :

    ```
    Why do you think Redux was chosen instead of Context API for state management?
    ```

    ```
    What would happen if I changed the API timeout from 30s to 60s?
    ```

    ```
    Is this validateUserInput function redundant?
    ```

    Verdent analyse le contexte du code et fournit des explications raisonnées basées sur les motifs de votre projet et les meilleures pratiques du secteur.
  </Tab>

  <Tab title="Découverte">
    Trouvez une fonctionnalité ou des dépendances spécifiques :

    ```
    Where is user data validated?
    ```

    ```
    Show me all database queries in the project
    ```

    ```
    What dependencies does this project have?
    ```

    Le sous-agent Explorer effectue des recherches efficaces à l'aide d'outils comme grep (recherche de contenu) et glob (correspondance de motifs de fichiers), en renvoyant les résultats pertinents sans consommer le contexte principal.
  </Tab>

  <Tab title="Apprentissage">
    Comprenez des algorithmes et des motifs :

    ```
    How does the quicksort algorithm work in the sortItems function?
    ```

    ```
    What are the best practices for error handling in React components?
    ```

    ```
    Explain the Observer pattern implementation in the EventEmitter class
    ```

    Verdent fournit des explications claires en se référant à des implémentations précises de votre base de code.
  </Tab>
</Tabs>

***

## Expliquer des fonctions et des classes [#expliquer-des-fonctions-et-des-classes]

Verdent fournit des explications détaillées sur des fonctions ou classes spécifiques en analysant leur implémentation, leurs paramètres, leurs valeurs de retour et leur utilisation dans l'ensemble de la base de code.

**Exemples :**

```
Explain the UserAuth class
```

```
What does the processPayment function do?
```

```
Break down the ApiService class methods
```

**Ce que Verdent explique :**

* **Objectif** : ce que la fonction ou la classe accomplit
* **Paramètres** : types d'entrée, valeurs attendues et contraintes
* **Types de retour** : types de sortie et valeurs de retour possibles
* **Logique interne** : comment l'implémentation fonctionne étape par étape
* **Dépendances** : modules, fonctions ou services externes utilisés
* **Exemples d'utilisation** : comment la fonction/classe est utilisée ailleurs dans votre code

Verdent retrace le flux d'exécution du code, identifie les cas limites et explique le raisonnement derrière les choix d'implémentation.

***

## Générer de la documentation [#générer-de-la-documentation]

Verdent génère de la documentation dans de multiples formats, notamment des commentaires de code en ligne (JSDoc, docstrings Python, etc.), des fichiers README, de la documentation API et des guides d'architecture.

#### Utiliser Plan Mode pour la documentation [#utiliser-plan-mode-pour-la-documentation]

Dans Plan Mode, Verdent peut :

* Analyser votre documentation existante pour en respecter le style et la densité
* Poser des questions de clarification sur les préférences de formatage (style de commentaire, niveau de détail, inclusion d'exemples)
* Analyser la base de code pour comprendre les motifs de documentation actuels
* Présenter un plan de documentation montrant ce qui sera documenté et dans quel style

**Exemple :**

```
Generate JSDoc comments for all functions in the utils folder
```

Verdent examine les commentaires JSDoc existants dans votre projet, pose des questions sur vos préférences (descriptions de paramètres, inclusion d'exemples d'utilisation), puis génère une documentation conforme à vos conventions établies.

**Formats de documentation pris en charge :**

* **Commentaires en ligne** : JSDoc, docstrings Python, Javadoc, commentaires de documentation XML
* **Fichiers README** : aperçus de projet, instructions d'installation, guides d'utilisation
* **Documentation API** : descriptions des points de terminaison, formats de requête/réponse, détails d'authentification
* **Guides d'architecture** : explications de la conception du système, relations entre composants, diagrammes de flux de données

<Tip>
  Utilisez Plan Mode lorsque vous générez une documentation étendue. Verdent examinera le style de votre documentation existante et posera des questions de clarification pour s'assurer que la documentation générée correspond aux conventions de votre projet.
</Tip>

<Tip>
  Utilisez Plan Mode lorsque vous générez de la documentation pour plusieurs fichiers, et vérifiez la structure de la documentation avant de valider.
</Tip>

***

## Résumer des fichiers et des modules [#résumer-des-fichiers-et-des-modules]

Verdent analyse et résume des fichiers ou des modules en lisant le code, en comprenant sa structure et en expliquant son objectif en langage clair.

**Exemples :**

```
Summarize what the authMiddleware.js file does
```

```
Explain the purpose of the UserService module
```

```
What's the main responsibility of the PaymentController?
```

**Ce que Verdent fournit :**

* **Objectif principal** : ce que le fichier/module accomplit dans le système
* **Fonctions clés** : fonctions ou méthodes principales et leurs rôles
* **Dépendances** : modules et services externes utilisés
* **Exports** : API publics et ce à quoi les autres parties du système peuvent accéder
* **Motifs** : motifs de conception ou approches architecturales utilisées
* **Points d'intégration** : comment il se connecte aux autres parties du projet

Verdent lit le fichier, identifie les fonctions clés, retrace les dépendances et explique comment le code s'intègre dans l'architecture globale du projet.

***

## Comprendre l'architecture [#comprendre-larchitecture]

Verdent explique l'architecture au moyen de descriptions textuelles détaillées, de relations entre composants et d'explications sur le flux de données. Bien qu'il ne génère pas directement de diagrammes graphiques, il peut créer des diagrammes en art ASCII ou du code de diagramme Mermaid que vous pouvez restituer.

**Exemple :**

```
Explain the architecture of this application and show component relationships
```

Verdent pourrait produire une représentation ASCII :

```
Frontend (React)
    ↓
API Layer (Express)
    ↓
Service Layer (Business Logic)
    ↓
Database Layer (PostgreSQL)
```

Ou générer du code Mermaid pour le rendu :

```mermaid
graph TD
    A[React Frontend] --> B[API Gateway]
    B --> C[Auth Service]
    B --> D[User Service]
    C --> E[Database]
    D --> E
```

**Les explications d'architecture incluent :**

* **Interactions entre composants** : comment les différentes parties du système communiquent
* **Flux de données** : comment l'information circule dans l'application
* **Motifs architecturaux** : MVC, microservices, architecture en couches, etc.
* **Pile technologique** : frontend, backend, base de données, services externes
* **Points d'intégration** : APIs, files de messages, webhooks, services tiers
* **Motifs de scalabilité** : équilibrage de charge, mise en cache, partitionnement de base de données

Verdent analyse la structure de votre projet, retrace les imports et les dépendances, identifie les motifs et explique les décisions architecturales derrière la conception de votre système.

***

## Intégrer de nouveaux membres d'équipe [#intégrer-de-nouveaux-membres-déquipe]

Verdent facilite l'intégration de nouveaux membres d'équipe en répondant à des questions sur la base de code, en expliquant les décisions architecturales, en identifiant les fichiers et motifs clés, et en générant une documentation adaptée pour aider les nouveaux arrivants à comprendre la structure et les conventions du projet.

**Dans Plan Mode**, Verdent peut poser des questions de clarification pour comprendre quels aspects de la base de code sont les plus pertinents pour le rôle du nouveau membre de l'équipe avant de créer un guide d'intégration personnalisé.

**Exemples de questions d'intégration :**

```
What's the best starting point for understanding this codebase?
```

```
How does data flow from the API to the frontend?
```

```
Where should I look to understand the authentication system?
```

```
What are the naming conventions and code style guidelines used here?
```

**Verdent peut générer :**

* **Guides d'intégration** : présentations étape par étape de l'architecture de la base de code
* **Cartes des composants** : guides visuels ou textuels montrant les relations entre composants
* **Motifs courants** : documentation des motifs et conventions fréquemment utilisés
* **Instructions de configuration** : comment configurer l'environnement de développement et exécuter le projet
* **Premières tâches** : suggestions de premières contributions simples pour se familiariser

Les nouveaux membres de l'équipe peuvent explorer la base de code de manière conversationnelle, en obtenant des réponses immédiates sans avoir besoin d'interrompre les développeurs seniors ou de passer des heures à lire du code.

<Note>
  Le sous-agent Explorer de Verdent rend la découverte de la base de code efficace pour les nouveaux arrivants. Ils peuvent poser des questions larges comme « Montre-moi tous les composants React » ou des requêtes précises comme « Où la journalisation des erreurs est-elle implémentée ? » et obtenir des réponses immédiates et précises.
</Note>

***

## Bonnes pratiques [#bonnes-pratiques]

<Accordion title="Commencez par des questions larges, puis affinez">
  Commencez par des questions de haut niveau comme « Quelle est l'architecture ? » avant de vous plonger dans des implémentations spécifiques. Cela permet de construire le contexte progressivement.
</Accordion>

<Accordion title="Utilisez explicitement le sous-agent Explorer pour les recherches exhaustives">
  Pour des recherches approfondies dans l'ensemble de la base de code, mentionnez explicitement l'agent Explorer afin de ne manquer aucune occurrence : « Utilise Explorer pour trouver toutes les vérifications d'authentification. »
</Accordion>

<Accordion title="Posez des questions sur le « pourquoi », pas seulement sur le « quoi »">
  Comprendre le raisonnement derrière les décisions est souvent plus précieux que de comprendre l'implémentation. Posez « Pourquoi ce motif a-t-il été choisi ? » en plus de « Que fait ce code ? »
</Accordion>

<Accordion title="Tirez parti de Plan Mode pour la génération de documentation">
  Lorsque vous générez de la documentation, utilisez Plan Mode pour examiner l'approche de Verdent, vous assurer qu'elle correspond à votre style et affiner le plan avant l'exécution.
</Accordion>

<Accordion title="Utilisez les mentions @ pour des explications ciblées">
  Référencez des fichiers spécifiques lorsque vous voulez des explications détaillées : « @components/UserProfile.tsx explique ce composant » garantit que Verdent se concentre sur le bon code.
</Accordion>

<Accordion title="Construisez le contexte avant de demander des modifications">
  Avant d'apporter des modifications, demandez à Verdent d'expliquer l'implémentation actuelle. Cela aide Verdent à formuler de meilleures suggestions alignées sur les motifs existants.
</Accordion>

<Accordion title="Posez librement des questions de suivi">
  Verdent conserve le contexte de la conversation, ce qui vous permet de poser des questions de clarification, de demander des explications plus approfondies ou d'explorer des sujets connexes sans répéter le contexte.
</Accordion>

***

## Voir aussi [#voir-aussi]

<CardGroup cols="2">
  <Card title="Écrire du nouveau code" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    Découvrez comment écrire de nouvelles fonctionnalités et composants avec Verdent
  </Card>

  <Card title="Refactoriser le code" icon="wrench" href="/docs/verdent-for-vscode/task-based-guides/refactoring">
    Améliorez et refactorisez le code existant en toute sécurité grâce à l'assistance de l'IA
  </Card>
</CardGroup>
