Escribir código nuevo

Verdent for VS Code te ayuda a escribir código nuevo mediante solicitudes en lenguaje natural, sin necesidad de una sintaxis especial. Describe lo que quieres construir y Verdent crea implementaciones listas para producción en varios archivos, manteniendo los patrones y convenciones de tu proyecto.

Lo que aprenderás

• Solicitar funciones nuevas con prompts en lenguaje natural
• Generar código en varios archivos con las dependencias adecuadas
• Trabajar con diversos lenguajes de programación y frameworks
• Crear estructuras de proyecto completas
• Iterar sobre el código generado mediante refinamiento conversacional

Requisitos previos

Antes de escribir código con Verdent:

• Visual Studio Code con la extensión Verdent instalada
• Suscripción activa a Verdent con créditos disponibles
• Un espacio de trabajo de proyecto abierto en VS Code (o un directorio vacío para crear la estructura)

Solicitar funciones nuevas

Verdent entiende las solicitudes de funciones en lenguaje natural sin requerir comandos ni sintaxis especiales. Simplemente describe lo que quieres en el cuadro de entrada.

Solicitudes básicas de funciones:

Comienza con descripciones sencillas de lo que necesitas:

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 analiza tu solicitud, examina la estructura de tu proyecto y genera código que coincide con tus patrones existentes, incluida la organización de archivos, las convenciones de nombres, los estilos de importación y las prácticas de codificación.

Solicitudes detalladas de implementación:

Para tener más control, especifica los requisitos técnicos de forma explícita:

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.

Cuanto más contexto proporciones, más alineada estará la implementación con tus expectativas.

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

Agregar contexto con menciones @

Haz referencia a archivos o componentes específicos cuando quieras agregar funciones dirigidas:

@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

El símbolo @ seguido de una ruta de archivo le indica a Verdent que se centre en código específico al implementar tu solicitud. Esto garantiza que las funciones nuevas se integren sin problemas con las implementaciones existentes.

Compatibilidad con lenguajes y frameworks

Verdent funciona con prácticamente cualquier lenguaje de programación y comprende la semántica del código, los patrones de sintaxis y los frameworks comunes en todos los ecosistemas principales sin requerir plugins específicos del lenguaje.

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 también admite scripting de shell (Bash, Zsh), SQL, HTML/CSS, Markdown, YAML, JSON y lenguajes de configuración.

Comprensión de frameworks

Más allá de los lenguajes, Verdent reconoce patrones específicos de frameworks:

Optimización para lenguajes menos comunes:

Para frameworks especializados o lenguajes menos comunes, mejora los resultados así:

• Proporciona ejemplos de código que muestren los patrones que quieres seguir
• Incluye fragmentos de la base de código existente con menciones @
• Usa servidores MCP (Model Context Protocol) para inyectar contexto específico del lenguaje

Generación de código en varios archivos

Verdent crea varios archivos coordinados en una sola solicitud, gestionando automáticamente las importaciones, las dependencias y las referencias entre archivos.

Ejemplo:

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 principal
• components/UserDashboard/useUserData.ts - Hook personalizado
• components/UserDashboard/UserDashboard.module.css - Estilos
• components/UserDashboard/types.ts - Interfaces de TypeScript
• components/UserDashboard/UserDashboard.test.tsx - Pruebas

Todos los archivos incluyen las importaciones y conexiones correctas entre ellos.

Generación paralela vs. secuencial:

Para archivos poco acoplados (componentes independientes, módulos separados, archivos de prueba paralelos), Verdent puede usar subagentes para escribir varios archivos en paralelo, mejorando la velocidad y la eficiencia.

Para archivos muy acoplados con interdependencias (archivos que se importan entre sí, tipos compartidos, componentes dependientes), Verdent escribe de forma secuencial para asegurar una gestión adecuada de las dependencias y las importaciones correctas.

Generar código base y estructura de proyectos

Generación de código base

Verdent genera código base entendiendo los patrones existentes de tu proyecto y creando código nuevo que sigue el mismo estilo y estructura:

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 analiza tu base de código para coincidir con las convenciones (estilos de nombres, patrones de importación, estructura de carpetas) y genera código base que se integra sin problemas en lugar de usar plantillas genéricas.

Estructura de proyectos

Verdent crea estructuras de proyecto completas con jerarquías de carpetas, archivos de configuración, dependencias y código inicial:

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

Verdent genera la estructura completa del proyecto, incluidos package.json, tsconfig.json, directorios de componentes, configuración de enrutamiento, proveedores de contexto, archivos de prueba y configuración de control de versiones (.gitignore, commit inicial).

Mejor práctica para la creación de estructuras:

Usa Plan Mode al crear la estructura de proyectos. Verdent hará lo siguiente:

1. Hacer preguntas aclaratorias sobre tus preferencias (solución de estilos, estructura de componentes, enfoque de pruebas)
2. Presentar un plan detallado con la estructura de archivos completa y la disposición de directorios
3. Permitirte revisar y refinar la estructura antes de crearla
4. Generar el proyecto con verificación para asegurar que todos los archivos se creen correctamente

Para estructuras complejas, Verdent puede usar subagentes para paralelizar tareas de configuración independientes (instalar dependencias, crear archivos de configuración, configurar esquemas de base de datos). Mantiene escrituras secuenciales para los archivos interdependientes a fin de preservar las dependencias.

Después de crear la estructura, Verdent puede verificar la configuración ejecutando pruebas iniciales y comandos de compilación para asegurar que la estructura del proyecto funcione correctamente.

Iterar sobre el código generado

Verdent usa un flujo de trabajo conversacional en el que refinas el código generado mediante solicitudes de seguimiento en lenguaje natural dentro de la misma sesión de chat.

Flujo básico de iteración:

1. Verdent genera el código inicial
2. Revisas el resultado
3. Proporcionas comentarios o solicitas cambios
4. Verdent actualiza el código según tus comentarios
5. Repite hasta quedar satisfecho

Ejemplo de iteración:

Initial: Create a login form component

Verdent genera un formulario básico.

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

Verdent actualiza el componente con validación.

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

Verdent refina los estilos y agrega comportamiento de carga.

Bucles de retroalimentación ágiles:

Verdent mantiene el contexto a lo largo de la conversación, lo que te permite:

• Solicitar cambios incrementales sin repetir el contexto
• Probar el código y reportar problemas para que Verdent los corrija
• Hacer preguntas de "por qué" sobre las decisiones de implementación
• Probar enfoques diferentes pidiendo alternativas

Mejores prácticas

Consulta también