# Rédiger du nouveau code (/fr/docs/verdent-for-vscode/task-based-guides/writing-code)

> Guide pour utiliser Verdent afin d'écrire de nouvelles fonctionnalités, composants et logiques



Verdent for VS Code vous aide à écrire du nouveau code grâce à des requêtes en langage naturel, sans syntaxe spéciale requise. Décrivez ce que vous souhaitez construire, et Verdent crée des implémentations prêtes pour la production sur plusieurs fichiers tout en respectant les modèles et conventions de votre projet.

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

* Demander de nouvelles fonctionnalités via des prompts en langage naturel
* Générer du code sur plusieurs fichiers avec les bonnes dépendances
* Travailler avec divers langages de programmation et frameworks
* Générer des structures de projet complètes
* Itérer sur le code généré par affinement conversationnel

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

Avant d'écrire du code avec Verdent :

* Visual Studio Code avec l'extension Verdent installée
* Un abonnement Verdent actif avec des crédits disponibles
* Un espace de travail de projet ouvert dans VS Code (ou un répertoire vide pour la génération de structure)

***

## Demander de nouvelles fonctionnalités [#demander-de-nouvelles-fonctionnalités]

Verdent comprend les demandes de fonctionnalités en langage naturel sans nécessiter de commandes ou de syntaxe spéciales. Décrivez simplement ce dont vous avez besoin dans la zone de saisie.

**Demandes de fonctionnalités basiques :**

Commencez par des descriptions simples de ce dont vous avez besoin :

```
Create a UserProfile component that shows the user's avatar image, name as a heading, and email below it. Make the avatar circular.
```

```
Add a login form with email and password fields to the authentication page
```

```
Build a notification system that displays toast messages for success and error events
```

Verdent analyse votre demande, examine la structure de votre projet, et génère du code correspondant à vos modèles existants, y compris l'organisation des fichiers, les conventions de nommage, les styles d'import et les pratiques de codage.

**Demandes d'implémentation détaillées :**

Pour davantage de contrôle, spécifiez explicitement les exigences techniques :

```
Add a dark mode toggle to the settings page using React Context API. Store the theme preference in localStorage and apply CSS variables for light and dark themes across all components.
```

```
Create a POST /api/users/register endpoint that validates email format, password strength (min 8 chars, uppercase, number, special char), and checks for duplicate emails before creating the user in the database.
```

```
Implement pagination for the blog posts list with 10 posts per page. Add Previous/Next buttons and page number indicators. Update the URL query params (?page=2) and fetch data from /api/posts?page=X&limit=10.
```

Plus vous fournissez de contexte, plus l'implémentation correspondra à vos attentes.

<Tabs>
  <Tab title="Demandes simples">
    Utilisez des descriptions concises pour des fonctionnalités simples :

    ```
    Add a search bar to the navigation
    ```

    ```
    Create a footer component with copyright and links
    ```

    Verdent fait des choix d'implémentation raisonnables en se basant sur les modèles de code existants de votre projet.
  </Tab>

  <Tab title="Demandes complexes avec Plan Mode">
    Pour les fonctionnalités multi-fichiers ou les décisions architecturales, utilisez **Plan Mode** pour examiner l'approche avant l'exécution :

    **Étape 1 :** Passez en Plan Mode via le bouton « Switch Mode »

    **Étape 2 :** Soumettez votre demande de fonctionnalité :

    ```
    Add a search feature to the product catalog with filtering by category and price range
    ```

    **Étape 3 :** Verdent crée un plan détaillé présentant :

    * Les nouveaux fichiers à créer (composants de recherche, interface de filtre, points d'entrée API)
    * Les fichiers existants à modifier (page du catalogue produits, routage, gestion d'état)
    * Les dépendances à ajouter (le cas échéant)
    * Les étapes d'implémentation dans un ordre logique

    **Étape 4 :** Verdent peut poser des questions de clarification :

    * La recherche doit-elle être en temps réel ou déclenchée par un bouton ?
    * Comment gérer les résultats vides ?
    * Quelles options de tri inclure ?

    **Étape 5 :** Examinez le plan et choisissez votre prochaine action :

    * Choisissez **Edit** pour affiner davantage le plan
    * Choisissez **Start Building** pour lancer l'exécution

    Cette approche garantit l'alignement entre vos attentes et l'implémentation de Verdent avant d'apporter des modifications.
  </Tab>
</Tabs>

<Tip>
  Utilisez Plan Mode lorsque les fonctionnalités affectent plusieurs fichiers ou nécessitent des décisions architecturales. Vous pouvez effectuer plusieurs cycles de révision du plan pour affiner l'approche avant l'exécution.
</Tip>

***

## Ajouter du contexte avec les mentions @ [#ajouter-du-contexte-avec-les-mentions-]

Référencez des fichiers ou composants spécifiques lorsque vous souhaitez des ajouts de fonctionnalités ciblés :

```
@auth.js Add password reset functionality to this authentication module
```

```
@components/Dashboard.js Add a statistics widget showing user activity for the past 30 days
```

Le symbole `@` suivi d'un chemin de fichier indique à Verdent de se concentrer sur du code spécifique lors de l'implémentation de votre demande. Cela garantit que les nouvelles fonctionnalités s'intègrent parfaitement aux implémentations existantes.

***

## Prise en charge des langages et frameworks [#prise-en-charge-des-langages-et-frameworks]

Verdent fonctionne avec pratiquement tous les langages de programmation et comprend la sémantique du code, les modèles syntaxiques et les frameworks courants dans tous les principaux écosystèmes, sans nécessiter de plugins spécifiques à un langage.

<Tabs>
  <Tab title="Prise en charge exceptionnelle">
    Langages avec des résultats exceptionnels et une compréhension approfondie des frameworks :

    * **JavaScript et TypeScript** - React, Vue, Angular, Node.js, Next.js, modèles async/await modernes, analyse de composants
    * **Python** - Django, Flask, FastAPI, Pandas, NumPy, notebooks Jupyter, services backend, analyse de données
    * **Java/Kotlin** - Spring Boot, Hibernate, écosystème Maven/Gradle, développement d'entreprise

    <CodeGroup>
      ```jsx "React Component"
      function UserProfile({ user }) {
        return (
          <div className="profile">
            <h1>{user.name}</h1>
            <p>{user.email}</p>
          </div>
        );
      }
      ```

      ```vue "Vue Component"
      <template>
        <div class="profile">
          <h1>{{ user.name }}</h1>
          <p>{{ user.email }}</p>
        </div>
      </template>

      <script setup>
      defineProps(['user']);
      </script>
      ```

      ```tsx "Angular Component"
      @Component({
        selector: 'user-profile',
        template: `
          <div class="profile">
            <h1>{{ user.name }}</h1>
            <p>{{ user.email }}</p>
          </div>
        `
      })
      export class UserProfileComponent {
        @Input() user!: User;
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Bonne prise en charge">
    Langages supplémentaires avec une connaissance approfondie des frameworks :

    * **C++** - Gestion de la mémoire, optimisation des performances, programmation système
    * **Rust** - Modèles de sécurité mémoire, concepts de propriété, écosystème cargo
    * **Go** - Modèles de concurrence, microservices, outils CLI
    * **C#** - Écosystème .NET, modèles LINQ, programmation asynchrone
    * **Ruby** - Applications Rails, scripting
    * **PHP** - Laravel, WordPress, applications web
    * **Swift/Objective-C** - Développement iOS/macOS
  </Tab>
</Tabs>

Verdent prend également en charge le scripting Shell (Bash, Zsh), SQL, HTML/CSS, Markdown, YAML, JSON et les langages de configuration.

#### Compréhension des frameworks [#compréhension-des-frameworks]

Au-delà des langages, Verdent reconnaît les modèles propres à chaque framework :

| Catégorie           | Frameworks et modèles                                                                                                  |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Frontend**        | Hooks React, Redux, Context API, Composition API de Vue, injection de dépendances Angular, composants serveur Next.js  |
| **Backend**         | Middleware Express, ORM Django, microservices Spring Boot, points d'entrée asynchrones FastAPI, Active Record de Rails |
| **Tests**           | Jest, Pytest, JUnit, Mocha/Chai, Cypress, React Testing Library                                                        |
| **Base de données** | Prisma, TypeORM, Sequelize, SQLAlchemy, Hibernate, Mongoose                                                            |

<Note>
  Verdent s'adapte à votre stack technologique plutôt que d'exiger des langages ou frameworks spécifiques. Des bases de code bien organisées avec une séparation claire des responsabilités produisent de meilleurs résultats, quel que soit le langage de programmation.
</Note>

**Optimiser pour les langages moins courants :**

Pour des frameworks spécialisés ou des langages moins courants, améliorez les résultats en :

* Fournissant des exemples de code montrant les modèles que vous souhaitez suivre
* Incluant des extraits de la base de code existante via des mentions @
* Utilisant des serveurs MCP (Model Context Protocol) pour injecter du contexte spécifique au langage

***

## Génération de code multi-fichiers [#génération-de-code-multi-fichiers]

Verdent crée plusieurs fichiers coordonnés en une seule requête, en gérant automatiquement les imports, les dépendances et les références inter-fichiers.

**Exemple :**

```
Create a UserDashboard component with a separate hooks file for data fetching, a styles file, a types file for TypeScript interfaces, and a test file
```

Verdent génère :

* `components/UserDashboard/UserDashboard.tsx` - Composant principal
* `components/UserDashboard/useUserData.ts` - Hook personnalisé
* `components/UserDashboard/UserDashboard.module.css` - Styles
* `components/UserDashboard/types.ts` - Interfaces TypeScript
* `components/UserDashboard/UserDashboard.test.tsx` - Tests

Tous les fichiers incluent des imports et des connexions correctes entre eux.

**Génération parallèle ou séquentielle :**

Pour les **fichiers faiblement couplés** (composants indépendants, modules séparés, fichiers de tests parallèles), Verdent peut utiliser des sous-agents pour écrire plusieurs fichiers en parallèle, améliorant ainsi la rapidité et l'efficacité.

Pour les **fichiers fortement couplés** avec des interdépendances (fichiers qui s'importent mutuellement, types partagés, composants dépendants), Verdent écrit de manière séquentielle pour garantir une gestion correcte des dépendances et des imports.

<Tip>
  Pour les fonctionnalités multi-fichiers, Verdent génère les fichiers en parallèle et maintient automatiquement la cohérence sur l'ensemble des modifications liées.
</Tip>

***

## Générer du code standard et des structures de base [#générer-du-code-standard-et-des-structures-de-base]

#### Génération de code standard [#génération-de-code-standard]

Verdent génère du code standard en comprenant les modèles existants de votre projet et en créant du nouveau code qui suit le même style et la même structure :

```
Create a new ProductCard component with props for title, price, and image
```

```
Write an Express route handler for user registration with validation
```

```
Generate unit tests for the authentication service using Jest
```

Verdent analyse votre base de code pour respecter les conventions (styles de nommage, modèles d'import, structure de dossiers) et génère du code standard qui s'intègre parfaitement plutôt que d'utiliser des modèles génériques.

<Tip>
  Utilisez Plan Mode pour examiner le code standard candidat avant sa génération. Verdent peut poser des questions de clarification sur l'approche de style, les règles de validation ou la stratégie de gestion des erreurs afin de garantir que le code généré corresponde exactement à vos exigences.
</Tip>

#### Génération de structure de projet [#génération-de-structure-de-projet]

Verdent génère des structures de projet complètes avec des hiérarchies de dossiers entières, des fichiers de configuration, des dépendances et du code initial :

```
Create a new React application with TypeScript, React Router, Context API for state management, and Jest testing setup
```

Verdent génère la structure de projet complète, incluant `package.json`, `tsconfig.json`, les répertoires de composants, la configuration du routage, les fournisseurs de contexte, les fichiers de tests et la configuration du contrôle de version (`.gitignore`, commit initial).

**Bonne pratique pour la génération de structure :**

Utilisez Plan Mode lors de la génération de structures de projet. Verdent va :

1. Poser des questions de clarification sur vos préférences (solution de style, structure des composants, approche de test)
2. Présenter un plan détaillé avec la structure de fichiers et la disposition des répertoires complètes
3. Vous permettre de revoir et d'affiner la structure avant sa création
4. Générer le projet avec vérification pour s'assurer que tous les fichiers sont créés correctement

Pour les structures complexes, Verdent peut utiliser des sous-agents pour paralléliser des tâches de configuration indépendantes (installation des dépendances, création des fichiers de configuration, mise en place des schémas de base de données). Il maintient des écritures séquentielles pour les fichiers interdépendants afin de préserver les dépendances.

Après la génération de la structure, Verdent peut vérifier la configuration en exécutant des tests initiaux et des commandes de build pour s'assurer que la structure du projet fonctionne correctement.

***

## Itérer sur le code généré [#itérer-sur-le-code-généré]

Verdent utilise un flux de travail conversationnel dans lequel vous affinez le code généré via des demandes de suivi en langage naturel dans la même session de discussion.

**Flux d'itération basique :**

1. Verdent génère le code initial
2. Vous examinez le résultat
3. Vous fournissez des retours ou demandez des modifications
4. Verdent met à jour le code en fonction de vos retours
5. Répétez jusqu'à satisfaction

**Exemple d'itération :**

```
Initial: Create a login form component
```

Verdent génère un formulaire basique.

```
Follow-up: Add email validation and show error messages below each field
```

Verdent met à jour le composant avec la validation.

```
Follow-up: Style it with Tailwind CSS and add a loading state for the submit button
```

Verdent affine le style et ajoute un comportement de chargement.

**Cycles de retour rapprochés :**

Verdent maintient le contexte tout au long de la conversation, vous permettant de :

* Demander des modifications incrémentales sans répéter le contexte
* Tester le code et signaler des problèmes à Verdent pour qu'il les corrige
* Poser des questions « pourquoi » sur les choix d'implémentation
* Essayer différentes approches en demandant des alternatives

<Tip>
  Pour des modifications importantes, décrivez ce qui ne va pas ou ce que vous souhaitez différemment plutôt que la façon de le corriger. Verdent peut analyser le problème et proposer la meilleure solution en fonction des modèles de votre projet.
</Tip>

***

## Bonnes pratiques [#bonnes-pratiques]

<Accordion title="Soyez aussi précis ou général que nécessaire">
  Verdent comprend différents niveaux de détail. Fournissez des spécifications techniques lorsque vous avez des exigences précises, ou utilisez des descriptions générales et laissez Verdent faire des choix éclairés en fonction des modèles de votre projet.
</Accordion>

<Accordion title="Commencez par explorer avant d'apporter des modifications">
  Avant de demander de nouvelles fonctionnalités, laissez Verdent comprendre votre base de code avec des questions comme « Analyse le schéma de la base de données » ou « Explique le flux d'authentification ». Cela construit du contexte et aide Verdent à faire de meilleures suggestions.
</Accordion>

<Accordion title="Utilisez Plan Mode pour les fonctionnalités complexes ou multi-fichiers">
  Examinez les plans d'implémentation détaillés avant l'exécution. Verdent pose des questions de clarification et crée des approches structurées. Après avoir généré le plan, choisissez **Edit** pour l'affiner ou **Start Building** pour l'exécuter, garantissant l'alignement avant d'apporter des modifications.
</Accordion>

<Accordion title="Exploitez les mentions @ pour une intégration ciblée">
  Référencez des fichiers spécifiques lorsque vous souhaitez que les modifications s'intègrent au code existant. Cela garantit que les nouvelles fonctionnalités s'alignent avec les implémentations actuelles.
</Accordion>

<Accordion title="Décomposez les tâches complexes en étapes incrémentales">
  Pour les fonctionnalités multi-étapes, travaillez de manière incrémentale : créez la table de base de données, puis le point d'entrée API, puis le composant d'interface utilisateur. Cela maintient la clarté et permet une vérification à chaque étape.
</Accordion>

<Accordion title="Plus vous fournissez de contexte, plus les résultats seront alignés">
  Incluez des détails sur les choix technologiques, les préférences de conception, les règles de validation, les stratégies de gestion des erreurs, ou toute autre exigence importante pour votre implémentation.
</Accordion>

***

## Voir aussi [#voir-aussi]

<CardGroup cols="2">
  <Card title="Comprendre le code" icon="book" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    Découvrez comment explorer et analyser des bases de code existantes avec Verdent
  </Card>

  <Card title="Tests et débogage" icon="bug" href="/docs/verdent-for-vscode/task-based-guides/testing-debugging">
    Générez des tests complets et déboguez des problèmes avec l'assistance de l'IA
  </Card>
</CardGroup>