--- title: Escribir código nuevo description: Guía para usar Verdent para escribir nuevas funciones, componentes y funcionalidades --- 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. Usa descripciones concisas para funciones sencillas: ``` Add a search bar to the navigation ``` ``` Create a footer component with copyright and links ``` Verdent toma decisiones de implementación razonables basadas en los patrones de código existentes de tu proyecto. Para funciones de varios archivos o decisiones de arquitectura, usa **Plan Mode** para revisar el enfoque antes de la ejecución: **Paso 1:** Cambia a Plan Mode con el botón "Switch Mode" **Paso 2:** Envía tu solicitud de función: ``` Add a search feature to the product catalog with filtering by category and price range ``` **Paso 3:** Verdent crea un plan detallado que muestra: - Archivos nuevos que se crearán (componentes de búsqueda, interfaz de filtros, endpoints de API) - Archivos existentes que se modificarán (página del catálogo de productos, enrutamiento, gestión de estado) - Dependencias que se agregarán (si las hay) - Pasos de implementación en orden lógico **Paso 4:** Verdent puede hacer preguntas aclaratorias: - ¿La búsqueda debe ser en tiempo real o activada por un botón? - ¿Cómo manejar los resultados vacíos? - ¿Qué opciones de ordenamiento incluir? **Paso 5:** Revisa el plan y elige tu siguiente acción: - Elige **Edit** para refinar más el plan - Elige **Start Building** para comenzar la ejecución Este enfoque garantiza la alineación entre tus expectativas y la implementación de Verdent antes de hacer cambios. Usa Plan Mode cuando las funciones afecten a varios archivos o requieran decisiones de arquitectura. Puedes realizar varias rondas de revisión del plan para refinar el enfoque antes de la ejecución. --- ## 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. Lenguajes con resultados sobresalientes y comprensión profunda de frameworks: - **JavaScript & TypeScript** - React, Vue, Angular, Node.js, Next.js, patrones modernos de async/await, análisis de componentes - **Python** - Django, Flask, FastAPI, Pandas, NumPy, notebooks de Jupyter, servicios de backend, análisis de datos - **Java/Kotlin** - Spring Boot, Hibernate, ecosistema Maven/Gradle, desarrollo empresarial ```jsx "React Component" function UserProfile({ user }) { return (

{user.name}

{user.email}

); } ``` ```vue "Vue Component" ``` ```tsx "Angular Component" @Component({ selector: 'user-profile', template: `

{{ user.name }}

{{ user.email }}

` }) export class UserProfileComponent { @Input() user!: User; } ``` Lenguajes adicionales con conocimiento integral de frameworks: - **C++** - Gestión de memoria, optimización de rendimiento, programación de sistemas - **Rust** - Patrones de seguridad de memoria, conceptos de ownership, ecosistema cargo - **Go** - Patrones de concurrencia, microservicios, herramientas de CLI - **C#** - Ecosistema .NET, patrones LINQ, programación asíncrona - **Ruby** - Aplicaciones Rails, scripting - **PHP** - Laravel, WordPress, aplicaciones web - **Swift/Objective-C** - Desarrollo para iOS/macOS 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: | Categoría | Frameworks y patrones | |----------|----------------------| | **Frontend** | React hooks, Redux, Context API, Vue Composition API, inyección de dependencias de Angular, componentes de servidor de Next.js | | **Backend** | Express middleware, Django ORM, microservicios de Spring Boot, endpoints asíncronos de FastAPI, Rails Active Record | | **Testing** | Jest, Pytest, JUnit, Mocha/Chai, Cypress, React Testing Library | | **Base de datos** | Prisma, TypeORM, Sequelize, SQLAlchemy, Hibernate, Mongoose | Verdent se adapta a tu stack tecnológico en lugar de requerir lenguajes o frameworks específicos. Las bases de código bien organizadas con una clara separación de responsabilidades producen mejores resultados independientemente del lenguaje de programación. **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. Para funciones de varios archivos, Verdent genera los archivos en paralelo y mantiene la coherencia en todos los cambios relacionados de forma automática. --- ## 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. Usa Plan Mode para revisar el código base candidato antes de generarlo. Verdent puede hacer preguntas aclaratorias sobre el enfoque de estilos, las reglas de validación o la estrategia de manejo de errores para asegurar que el código generado coincida con tus requisitos exactos. #### 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 Para cambios importantes, describe qué está mal o qué quieres distinto en lugar de cómo arreglarlo. Verdent puede analizar el problema y proponer la mejor solución según los patrones de tu proyecto. --- ## Mejores prácticas Verdent entiende distintos niveles de detalle. Proporciona detalles técnicos cuando tengas requisitos, o usa descripciones generales y deja que Verdent tome decisiones informadas según los patrones de tu proyecto. Antes de solicitar funciones nuevas, deja que Verdent entienda tu base de código con preguntas como "Analiza el esquema de la base de datos" o "Explica el flujo de autenticación". Esto construye contexto y ayuda a Verdent a hacer mejores sugerencias. Revisa los planes de implementación detallados antes de la ejecución. Verdent hace preguntas aclaratorias y crea enfoques estructurados. Después de generar el plan, elige **Edit** para refinarlo o **Start Building** para ejecutarlo, asegurando la alineación antes de hacer cambios. Haz referencia a archivos específicos cuando quieras integrar cambios con código existente. Esto garantiza que las funciones nuevas se alineen con las implementaciones actuales. Para funciones de varios pasos, trabaja de forma incremental: crea la tabla de la base de datos, luego el endpoint de API y después el componente de la interfaz. Esto mantiene la claridad y permite la verificación en cada paso. Incluye detalles sobre las decisiones tecnológicas, las preferencias de diseño, las reglas de validación, las estrategias de manejo de errores o cualquier otro requisito que sea importante para tu implementación. --- ## Consulta también Aprende a explorar y analizar bases de código existentes con Verdent Genera pruebas completas y depura problemas con asistencia de IA