--- title: Comprender código existente description: Usar Verdent para explorar, analizar y comprender bases de código existentes --- Verdent for VS Code te ayuda a comprender bases de código desconocidas mediante preguntas en lenguaje natural y exploración automatizada. El subagente Explorer integrado encuentra archivos rápidamente, busca patrones de código y responde preguntas de arquitectura sin consumir tu ventana de contexto principal. ### Lo que aprenderás - Explorar bases de código desconocidas con el subagente Explorer - Hacer preguntas sobre la estructura y la implementación del código - Obtener explicaciones detalladas de funciones, clases y módulos - Generar documentación a partir del código existente - Comprender la arquitectura del proyecto y el flujo de datos - Incorporar a nuevos integrantes del equipo de manera eficiente ### Requisitos previos Antes de usar Verdent para comprender código: - Visual Studio Code con la extensión Verdent instalada - Una base de código o espacio de trabajo de proyecto abierto en VS Code - Una suscripción activa a Verdent con créditos disponibles --- ## Explorar bases de código desconocidas Cuando haces preguntas sobre la estructura de la base de código o solicitas búsquedas de archivos, Verdent delega automáticamente en el **subagente Explorer** (`@Explorer`), un especialista eficiente en tokens y optimizado para la exploración rápida de bases de código. El subagente Explorer realiza rápidamente lo siguiente: - Encuentra archivos que coinciden con patrones o nombres - Busca en el código palabras clave o funciones específicas - Responde preguntas de arquitectura sobre la base de código - Identifica dónde se implementa cada funcionalidad **Ejemplos de preguntas de exploración:** ``` What is the structure of this project? ``` ``` Where is user authentication handled? ``` ``` Find all API endpoint definitions ``` ``` Show me where database queries are defined ``` El Explorer trabaja de forma eficiente en segundo plano y ofrece respuestas rápidas sin consumir tu ventana de contexto principal. Verdent presenta los hallazgos con las rutas de archivo y los fragmentos de código relevantes. **Exploración en paralelo para tareas complejas:** Para tareas de exploración complejas, varios agentes Explorer pueden ejecutarse en paralelo para ahorrar tiempo, cada uno investigando distintos aspectos de la base de código de forma simultánea. Luego, Verdent sintetiza los hallazgos en un resumen coherente. **Ejemplo:** ``` Use the Explorer agent to find all places where we manually validate email addresses ``` Esto garantiza que Verdent descubra cada ubicación de forma sistemática, sin pasar por alto instancias en la base de código. --- ## Hacer preguntas sobre tu código Verdent responde prácticamente cualquier pregunta sobre tu base de código usando lenguaje natural. La IA entiende el contexto y ofrece explicaciones, análisis e información detallada. Pregunta sobre cómo funciona una funcionalidad específica: ``` Explain how authentication works in this project ``` ``` What does the calculateTotal function do? ``` ``` How are API requests handled? ``` Verdent analiza el código relevante, sigue los flujos de ejecución y explica la implementación con referencias a archivos y números de línea específicos. Comprende la visión general de tu aplicación: ``` 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 examina la estructura de tu proyecto, identifica patrones y explica las decisiones de arquitectura. Obtén información sobre las decisiones técnicas: ``` 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 analiza el contexto del código y ofrece explicaciones fundamentadas en los patrones de tu proyecto y en las mejores prácticas del sector. Encuentra funcionalidades o dependencias específicas: ``` Where is user data validated? ``` ``` Show me all database queries in the project ``` ``` What dependencies does this project have? ``` El subagente Explorer realiza búsquedas eficientes con herramientas como grep (búsqueda de contenido) y glob (coincidencia de patrones de archivo), y devuelve resultados relevantes sin consumir el contexto principal. Comprende algoritmos y patrones: ``` 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 ofrece explicaciones claras con referencias a implementaciones específicas de tu base de código. --- ## Explicar funciones y clases Verdent ofrece explicaciones detalladas de funciones o clases específicas analizando su implementación, parámetros, valores de retorno y uso en toda la base de código. **Ejemplos:** ``` Explain the UserAuth class ``` ``` What does the processPayment function do? ``` ``` Break down the ApiService class methods ``` **Lo que Verdent explica:** - **Propósito**: Qué logra la función o la clase - **Parámetros**: Tipos de entrada, valores esperados y restricciones - **Tipos de retorno**: Tipos de salida y posibles valores de retorno - **Lógica interna**: Cómo funciona la implementación paso a paso - **Dependencias**: Módulos, funciones o servicios externos utilizados - **Ejemplos de uso**: Cómo se usa la función o la clase en otras partes de tu código Verdent sigue el flujo de ejecución del código, identifica casos límite y explica la justificación de las decisiones de implementación. --- ## Generar documentación Verdent genera documentación en varios formatos, incluidos comentarios en el código (JSDoc, docstrings de Python, etc.), archivos README, documentación de API y guías de arquitectura. #### Usar Plan Mode para la documentación En Plan Mode, Verdent puede: - Analizar tu documentación existente para ajustarse a su estilo y densidad - Hacer preguntas aclaratorias sobre las preferencias de formato (estilo de comentarios, nivel de detalle, inclusión de ejemplos) - Analizar la base de código para comprender los patrones de documentación actuales - Presentar un plan de documentación que muestre qué se documentará y con qué estilo **Ejemplo:** ``` Generate JSDoc comments for all functions in the utils folder ``` Verdent examina los comentarios JSDoc existentes en tu proyecto, hace preguntas sobre las preferencias (descripciones de parámetros, inclusión de ejemplos de uso) y luego genera documentación que coincide con tus convenciones establecidas. **Formatos de documentación compatibles:** - **Comentarios en el código**: JSDoc, docstrings de Python, Javadoc, comentarios de documentación XML - **Archivos README**: Resúmenes del proyecto, instrucciones de configuración, guías de uso - **Documentación de API**: Descripciones de endpoints, formatos de solicitud/respuesta, detalles de autenticación - **Guías de arquitectura**: Explicaciones del diseño del sistema, relaciones entre componentes, diagramas de flujo de datos Usa Plan Mode al generar documentación extensa. Verdent revisará el estilo de tu documentación existente y hará preguntas aclaratorias para asegurar que los documentos generados coincidan con las convenciones de tu proyecto. Usa Plan Mode al generar documentación para varios archivos; revisa la estructura de la documentación antes de confirmar. --- ## Resumir archivos y módulos Verdent analiza y resume archivos o módulos leyendo el código, comprendiendo su estructura y explicando su propósito en lenguaje claro. **Ejemplos:** ``` Summarize what the authMiddleware.js file does ``` ``` Explain the purpose of the UserService module ``` ``` What's the main responsibility of the PaymentController? ``` **Lo que Verdent ofrece:** - **Propósito principal**: Qué logra el archivo o módulo en el sistema - **Funciones clave**: Las funciones o métodos principales y su rol - **Dependencias**: Módulos y servicios externos utilizados - **Exportaciones**: API públicas y a qué pueden acceder otras partes del sistema - **Patrones**: Patrones de diseño o enfoques de arquitectura utilizados - **Puntos de integración**: Cómo se conecta con otras partes del proyecto Verdent lee el archivo, identifica las funciones clave, sigue las dependencias y explica cómo encaja el código en la arquitectura general del proyecto. --- ## Comprender la arquitectura Verdent explica la arquitectura mediante descripciones de texto detalladas, relaciones entre componentes y explicaciones del flujo de datos. Aunque no genera diagramas gráficos directamente, puede crear diagramas en ASCII art o código de diagramas Mermaid que puedes renderizar. **Ejemplo:** ``` Explain the architecture of this application and show component relationships ``` Verdent podría producir una representación en ASCII: ``` Frontend (React) ↓ API Layer (Express) ↓ Service Layer (Business Logic) ↓ Database Layer (PostgreSQL) ``` O generar código Mermaid para renderizar: ```mermaid graph TD A[React Frontend] --> B[API Gateway] B --> C[Auth Service] B --> D[User Service] C --> E[Database] D --> E ``` **Las explicaciones de arquitectura incluyen:** - **Interacciones entre componentes**: Cómo se comunican las distintas partes del sistema - **Flujo de datos**: Cómo se mueve la información a través de la aplicación - **Patrones de arquitectura**: MVC, microservicios, arquitectura por capas, etc. - **Stack tecnológico**: Frontend, backend, base de datos, servicios externos - **Puntos de integración**: API, colas de mensajes, webhooks, servicios de terceros - **Patrones de escalabilidad**: Balanceo de carga, caché, fragmentación de bases de datos Verdent analiza la estructura de tu proyecto, sigue las importaciones y dependencias, identifica patrones y explica las decisiones de arquitectura detrás del diseño de tu sistema. --- ## Incorporar a nuevos integrantes del equipo Verdent ayuda a incorporar a nuevos integrantes del equipo respondiendo preguntas sobre la base de código, explicando las decisiones de arquitectura, identificando archivos y patrones clave, y generando documentación adaptada para ayudar a quienes recién llegan a comprender la estructura y las convenciones del proyecto. **En Plan Mode**, Verdent puede hacer preguntas aclaratorias para entender qué aspectos de la base de código son más relevantes para el rol del nuevo integrante antes de crear una guía de incorporación personalizada. **Ejemplos de preguntas de incorporación:** ``` 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 puede generar:** - **Guías de incorporación**: Recorridos paso a paso por la arquitectura de la base de código - **Mapas de componentes**: Guías visuales o en texto que muestran cómo se relacionan los componentes - **Patrones comunes**: Documentación de los patrones y convenciones de uso frecuente - **Instrucciones de configuración**: Cómo configurar el entorno de desarrollo y ejecutar el proyecto - **Primeras tareas**: Sugerencias de primeras contribuciones sencillas para ganar familiaridad Las nuevas personas del equipo pueden explorar la base de código de forma conversacional y obtener respuestas inmediatas sin tener que interrumpir a los desarrolladores con más experiencia ni pasar horas leyendo código. El subagente Explorer de Verdent hace que el descubrimiento de la base de código sea eficiente para quienes recién llegan. Pueden hacer preguntas amplias como "Muéstrame todos los componentes de React" o consultas específicas como "¿Dónde se implementa el registro de errores?" y obtener respuestas inmediatas y precisas. --- ## Mejores prácticas Empieza con preguntas de alto nivel como "¿Cuál es la arquitectura?" antes de profundizar en implementaciones específicas. Esto construye el contexto de forma progresiva. Para búsquedas exhaustivas en toda la base de código, menciona explícitamente el agente Explorer para no pasar por alto ninguna instancia: "Usa Explorer para encontrar todas las verificaciones de autenticación". Comprender la justificación detrás de las decisiones suele ser más valioso que entender la implementación. Pregunta "¿Por qué se eligió este patrón?" junto con "¿Qué hace este código?". Al generar documentación, usa Plan Mode para revisar el enfoque de Verdent, asegurarte de que coincida con tu estilo y refinar el plan antes de ejecutarlo. Haz referencia a archivos concretos cuando quieras explicaciones detalladas: "@components/UserProfile.tsx explica este componente" garantiza que Verdent se centre en el código correcto. Antes de hacer modificaciones, pídele a Verdent que explique la implementación actual. Esto ayuda a Verdent a ofrecer mejores sugerencias que se alineen con los patrones existentes. Verdent mantiene el contexto de la conversación, así que puedes hacer preguntas aclaratorias, pedir explicaciones más profundas o explorar temas relacionados sin repetir el contexto. --- ## Véase también Aprende a escribir nuevas funcionalidades y componentes con Verdent Mejora y refactoriza código existente de forma segura con asistencia de IA