Scrivere nuovo codice

Verdent for VS Code ti aiuta a scrivere nuovo codice tramite richieste in linguaggio naturale, senza sintassi speciali. Descrivi ciò che vuoi realizzare e Verdent crea implementazioni pronte per la produzione su più file, mantenendo i pattern e le convenzioni del tuo progetto.

Cosa imparerai

• Richiedere nuove funzionalità con prompt in linguaggio naturale
• Generare codice su più file con le dipendenze corrette
• Lavorare con diversi linguaggi di programmazione e framework
• Impostare intere strutture di progetto
• Iterare sul codice generato tramite un affinamento conversazionale

Prerequisiti

Prima di scrivere codice con Verdent:

• Visual Studio Code con l'estensione Verdent installata
• Un abbonamento Verdent attivo con crediti disponibili
• Un workspace di progetto aperto in VS Code (oppure una directory vuota per l'impostazione iniziale)

Richiedere nuove funzionalità

Verdent comprende le richieste di funzionalità in linguaggio naturale senza bisogno di comandi o sintassi speciali. Descrivi semplicemente ciò che vuoi nella casella di input.

Richieste di funzionalità di base:

Inizia con descrizioni semplici di ciò che ti serve:

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 analizza la tua richiesta, esamina la struttura del progetto e genera codice che rispetta i pattern esistenti, inclusi organizzazione dei file, convenzioni di denominazione, stili di import e pratiche di scrittura del codice.

Richieste di implementazione dettagliate:

Per un maggiore controllo, specifica esplicitamente i requisiti tecnici:

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.

Più contesto fornisci, più l'implementazione sarà allineata alle tue aspettative.

Add a search bar to the navigation

Create a footer component with copyright and links

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

Aggiungere contesto con le @-menzioni

Fai riferimento a file o componenti specifici quando vuoi aggiunte mirate di funzionalità:

@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

Il simbolo @ seguito da un percorso di file indica a Verdent di concentrarsi su codice specifico durante l'implementazione della tua richiesta. In questo modo le nuove funzionalità si integrano perfettamente con le implementazioni esistenti.

Supporto di linguaggi e framework

Verdent funziona praticamente con qualsiasi linguaggio di programmazione e comprende la semantica del codice, i pattern sintattici e i framework più comuni in tutti i principali ecosistemi, senza richiedere plugin specifici per linguaggio.

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

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

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

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

Verdent supporta anche gli script shell (Bash, Zsh), SQL, HTML/CSS, Markdown, YAML, JSON e i linguaggi di configurazione.

Comprensione dei framework

Oltre ai linguaggi, Verdent riconosce i pattern specifici dei framework:

Ottimizzare per i linguaggi meno comuni:

Per framework specializzati o linguaggi meno comuni, migliora i risultati così:

• Fornendo esempi di codice che mostrano i pattern da seguire
• Includendo snippet dalla codebase esistente tramite @-menzioni
• Usando server MCP (Model Context Protocol) per iniettare contesto specifico del linguaggio

Generazione di codice su più file

Verdent crea più file coordinati in una singola richiesta, gestendo automaticamente import, dipendenze e riferimenti tra file.

Esempio:

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 genera:

• components/UserDashboard/UserDashboard.tsx - Componente principale
• components/UserDashboard/useUserData.ts - Hook personalizzato
• components/UserDashboard/UserDashboard.module.css - Stili
• components/UserDashboard/types.ts - Interfacce TypeScript
• components/UserDashboard/UserDashboard.test.tsx - Test

Tutti i file includono import corretti e le connessioni tra di essi.

Generazione parallela vs. sequenziale:

Per file poco accoppiati (componenti indipendenti, moduli separati, file di test paralleli), Verdent può usare sottoagenti per scrivere più file in parallelo, migliorando velocità ed efficienza.

Per file strettamente accoppiati con interdipendenze (file che importano l'uno dall'altro, tipi condivisi, componenti dipendenti), Verdent scrive in modo sequenziale per garantire una corretta gestione delle dipendenze e import corretti.

Generare boilerplate e struttura di progetto

Generazione di codice boilerplate

Verdent genera boilerplate comprendendo i pattern esistenti del tuo progetto e creando nuovo codice che segue lo stesso stile e la stessa struttura:

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 analizza la tua codebase per uniformarsi alle convenzioni (stili di denominazione, pattern di import, struttura delle cartelle) e genera boilerplate che si integra perfettamente invece di usare template generici.

Impostazione della struttura di progetto

Verdent imposta intere strutture di progetto con gerarchie complete di cartelle, file di configurazione, dipendenze e codice iniziale:

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

Verdent genera la struttura completa del progetto, inclusi package.json, tsconfig.json, directory dei componenti, configurazione del routing, context provider, file di test e configurazione del controllo di versione (.gitignore, commit iniziale).

Buona pratica per l'impostazione della struttura:

Usa Plan Mode quando imposti la struttura dei progetti. Verdent:

1. Pone domande di chiarimento sulle preferenze (soluzione di stile, struttura dei componenti, approccio al testing)
2. Presenta un piano dettagliato con la struttura completa dei file e la disposizione delle directory
3. Ti consente di rivedere e affinare la struttura prima della creazione
4. Genera il progetto con verifica per garantire che tutti i file siano creati correttamente

Per strutture complesse, Verdent può usare sottoagenti per parallelizzare le attività di configurazione indipendenti (installazione delle dipendenze, creazione dei file di configurazione, impostazione degli schemi di database). Mantiene la scrittura sequenziale per i file interdipendenti, così da preservare le dipendenze.

Dopo aver impostato la struttura, Verdent può verificare la configurazione eseguendo i test iniziali e i comandi di build per assicurarsi che la struttura del progetto funzioni correttamente.

Iterare sul codice generato

Verdent usa un flusso di lavoro conversazionale in cui affini il codice generato tramite richieste di follow-up in linguaggio naturale, nella stessa sessione di chat.

Flusso di iterazione di base:

1. Verdent genera il codice iniziale
2. Tu rivedi l'output
3. Fornisci feedback o richiedi modifiche
4. Verdent aggiorna il codice in base al tuo feedback
5. Ripeti finché non sei soddisfatto

Esempio di iterazione:

Initial: Create a login form component

Verdent genera un modulo di base.

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

Verdent aggiorna il componente con la validazione.

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

Verdent affina lo stile e aggiunge il comportamento di caricamento.

Cicli di feedback rapidi:

Verdent mantiene il contesto per tutta la conversazione, consentendoti di:

• Richiedere modifiche incrementali senza ripetere il contesto
• Testare il codice e segnalare i problemi affinché Verdent li corregga
• Porre domande "perché" sulle scelte di implementazione
• Provare approcci diversi chiedendo alternative

Buone pratiche

Vedi anche