Cómo usar el modo Agente de VS Code para principiantes

¿Has oído hablar del Modo Agente de VS Code?

Si estás usando Visual Studio Code (VS Code), esta función está a punto de convertirse en tu nueva mejor amiga. Imagina tener un compañero de IA que no solo sugiera código, sino que realmente haga el trabajo pesado: editar archivos, ejecutar comandos y corregir errores, todo mientras tomas tu café y asientes con aprobación.

Eso es el Modo Agente en pocas palabras, y hoy, te guiaré paso a paso sobre cómo usarlo, con un ambiente divertido y amigable para principiantes. ¡Sumerjámonos en el mundo del Modo Agente de VS Code y veamos cómo puede turboalimentar tu juego de codificación!

¿Qué es el Modo Agente de VS Code? Una Introducción Rápida

Entonces, ¿de qué se trata este asunto del Modo Agente de VS Code? Imagina a GitHub Copilot, el asistente impulsado por IA de VS Code, pasando de "sugeridor útil" a "codificador autónomo". En el Modo Agente, Copilot no solo se sienta allí esperando a que escribas; toma el control. Le das una tarea de alto nivel, como "Constrúyeme una aplicación de tareas pendientes", y descubre los archivos que debe modificar, escribe el código, ejecuta comandos e incluso corrige errores, todo por sí solo. ¡Es como programar en pareja con un robot que nunca duerme!

A partir del 10 de abril de 2025, el Modo Agente se está desarrollando e implementando activamente, repleto de ventajas como el soporte del Protocolo de Contexto del Modelo (MCP), lo que significa que puede acceder a herramientas y datos externos. Tanto si eres un novato como un profesional, esto cambia las reglas del juego. ¿Listo para probarlo? ¡Vamos a configurarlo!

Por qué te encantará usar el Modo Agente de VS Code

Antes de ponernos manos a la obra, hablemos de por qué el Modo Agente de VS Code es genial:

• Codificación sin intervención: Dile lo que quieres y él hace el trabajo, perfecto para tareas de varios pasos.
• Correcciones inteligentes: Detecta errores (como errores de sintaxis o pruebas fallidas) y vuelve a corregirlos.
• Potencia de herramientas: Utiliza herramientas integradas, servidores MCP y extensiones para ir más allá de las ediciones básicas.
• Tú tienes el control: Apruebas cada cambio, por lo que no hay desastres de IA rebeldes.

Piensa en él como tu asistente de codificación personal que siempre está un paso por delante. ¡Ahora, pongámoslo en marcha!

Cómo configurar el Modo Agente de VS Code: Paso a Paso

Comenzar con el Modo Agente de VS Code es muy fácil. Aquí te mostramos cómo activar el interruptor y liberar la magia:

Paso 1: Actualiza VS Code

Lo primero es lo primero: asegúrate de tener una versión reciente de VS Code que admita el Modo Agente. Dirígete a code.visualstudio.com, descarga la versión estable o usa Insiders para obtener funciones de vanguardia.

Paso 2: Habilita el Modo Agente

Es posible que el Modo Agente no esté activado de forma predeterminada, según tu versión y el estado de implementación. Aquí te mostramos cómo activarlo potencialmente:

Abre VS Code.

Presiona Ctrl + , (o Cmd + , en Mac) para abrir la Configuración.

Busca chat.agent.enabled y asegúrate de que esté marcado.

Si no lo ves, vuelve a cargar VS Code después de actualizar; podría aparecer si está disponible en tu compilación. Busca actualizaciones a través de Ayuda > Buscar actualizaciones.

Consejo profesional: Este paso puede volverse innecesario a medida que el Modo Agente se implemente de forma más amplia. Por ahora, este interruptor (si está presente) te permite entrar antes.

Paso 3: Inicia sesión en GitHub

El Modo Agente de VS Code se ejecuta en GitHub Copilot, por lo que necesitarás una suscripción activa.

En VS Code, haz clic en el icono de Copilot en la barra lateral (o usa el acceso directo correspondiente, por ejemplo, Ctrl+Shift+I / Cmd+Shift+I para el panel de Copilot).

Inicia sesión con tus credenciales de GitHub. Si no tienes una suscripción a Copilot, es posible que debas registrarte a través de GitHub.

Paso 4: Abre la vista de chat y selecciona el Modo Agente

Ahora, vamos a la parte divertida:

Abre la vista de Chat de Copilot (Ctrl+Shift+I / Cmd+Shift+I).

Busca el menú desplegable de modo en la parte inferior del área de entrada del Chat; podría decir "Preguntar", "Editar" o "Agente".

Selecciona Agente. ¡Boom, estás en el Modo Agente de VS Code!

Cómo usar el Modo Agente de VS Code: ¡Construyamos algo!

Bien, la configuración está lista, ¡es hora de ver el Modo Agente en acción! Construyamos juntos una sencilla aplicación de tareas pendientes de React. Toma un espacio de trabajo en blanco de VS Code y sigue los pasos.

Paso 1: Dale una tarea

En la vista de Chat (con el Modo Agente seleccionado), escribe una tarea clara y de alto nivel. Por ejemplo:

>> Crea una aplicación sencilla de tareas pendientes de React. Debe tener un campo de entrada para agregar tareas y mostrar la lista de tareas.

Presiona Enter. No necesitas especificar archivos: ¡el Modo Agente lo averigua!

Paso 2: Observa cómo se desarrolla el plan

Copilot comenzará a responder, transmitiendo su proceso de pensamiento. Podría decir:

"Está bien, puedo ayudarte con eso. Aquí está el plan:

1. Configurar una estructura básica de proyecto de React (si es necesario).
2. Crear el componente principal App.js para administrar el estado.
3. Crear un componente TodoForm.js para el campo de entrada.
4. Crear un componente TodoList.js para mostrar las tareas. Comenzaré creando los archivos necesarios..."

¡Es como ver a un amigo codificar en vivo! También propondrá comandos de terminal, como npm init react-app si tu proyecto es nuevo.

Paso 3: Aprueba las herramientas

Es posible que el Modo Agente necesite usar herramientas, como ejecutar npm install o usar operaciones de archivos integradas. Verás mensajes como:

"Ejecutar

npm install react react-dom

#terminal

#filesystem

src/App.js

Haz clic en "Continuar" para aprobar (o modificar el comando primero). Es posible que puedas aprobar automáticamente las herramientas para la sesión a través de un menú desplegable, ¡útil pero úsalo con prudencia!

Paso 4: Revisa las ediciones

A medida que el Modo Agente funciona, el código se transmite a tu editor con superposiciones que muestran los cambios (vistas de diferencias). Para nuestra aplicación de tareas pendientes, podrías ver:

App.js actualizado con la administración del estado (useState) para las tareas.

Un nuevo archivo src/TodoForm.js con un formulario y un elemento de entrada.

Un nuevo archivo src/TodoList.js que renderiza los elementos de la lista.

Navega por las ediciones con las flechas Arriba/Abajo en la superposición o el visor de diferencias, luego presiona "Aceptar" (o un botón similar) para mantener los cambios o "Descartar" para rechazarlos. La vista de Chat generalmente enumera los archivos modificados, lo que facilita el seguimiento.

Paso 5: Itera y refina

¿No es perfecto? Dile al Modo Agente qué corregir o agregar a continuación:

>> Ahora, agrega la funcionalidad para marcar las tareas como completadas cuando se haga clic y cambia el color de la fuente a negro para las tareas agregadas a la lista de tareas pendientes.

El Modo Agente volverá a iterar, analizará la solicitud, propondrá cambios, ejecutará pruebas (si está configurado en tasks.json) y actualizará el código. Seguirá así hasta que lo clave, o hasta que lo pauses.

Dominar el Modo Agente de VS Code: Consejos y trucos

Ahora que tienes los conceptos básicos, ¡subamos de nivel tus habilidades en el Modo Agente de VS Code!

• Usa indicaciones específicas: Las tareas vagas como "Haz una aplicación" pueden ser menos efectivas. Prueba con objetivos enfocados: "Agrega un interruptor de modo oscuro a mi aplicación React usando la API de Contexto" o "Refactoriza este script de Python utils.py para usar clases para una mejor organización". ¡Objetivos claros = mejores resultados!
• Aprovecha las herramientas con # (u otra sintaxis): ¿Quieres que el Modo Agente use una capacidad específica? Usa la sintaxis designada (por ejemplo, #).
• #terminal para ejecutar comandos.
• #codebase para buscar en tu proyecto el contexto relevante.
• #fetch para extraer datos de una URL. Consulta las herramientas disponibles (a menudo indicadas por un icono o comando) en el área de entrada del Chat.

• Pausa o cancela cuando sea necesario: Si el Modo Agente se descontrola (por ejemplo, edita el archivo incorrecto o se atasca), presiona "Pausar" para refinar tu indicación o "Cancelar" para detener la operación actual. A menudo, aún puedes aceptar los cambios útiles realizados hasta ahora.
• Deshaz como un profesional: ¿Cometiste un error al aceptar cambios? Usa "Deshacer la última edición" (o un comando similar, que a menudo se encuentra cerca de la entrada/barra de título del chat) para revertir. ¿Cambiaste de opinión? "Rehacer la última edición" podría traerlo de vuelta. ¡Es como Ctrl+Z/Cmd+Z para la IA!

• Ajusta la configuración (si está disponible): Dirígete a Configuración (Ctrl + ,) y busca la configuración relevante del Modo Agente o del Chat de Copilot. Podrías encontrar opciones como:
• chat.agent.maxRequests: Limita cuántos pasos/iteraciones realiza.
• github.copilot.chat.agent.runTasks: Activa o desactiva la ejecución automática de tareas del espacio de trabajo (como compilaciones/pruebas definidas en tasks.json).

Modo Agente vs. Modo Edición: ¿Cuándo usar qué?

¿Confundido sobre el Modo Agente vs. el Modo Edición en el Chat de Copilot? Aquí está la primicia:

• Modo Agente: Lo mejor para tareas grandes de varios pasos donde quieres que la IA averigüe el plan, administre los archivos y potencialmente se autocorrija (por ejemplo, "Construir una función", "Refactorizar este módulo"). Es más autónomo.
• Modo Edición (o Chat en línea): Perfecto para cambios rápidos y limitados dentro del archivo o selección actual (por ejemplo, "Corregir esta función", "Cambiar el nombre de esta variable", "Agregar manejo de errores aquí"). Tienes un control más directo sobre el alcance.

Si no estás seguro exactamente de qué archivos necesitan cambios o cómo abordar una tarea más grande, deja que el Modo Agente tome la iniciativa. ¿Necesitas modificaciones precisas en un lugar específico? La Edición suele ser más rápida.

Conclusión: Tu programador de pares de IA ha llegado

El Modo Agente de VS Code representa un paso significativo hacia el desarrollo asistido por IA. Al delegar tareas de codificación complejas de varios pasos a GitHub Copilot, puedes concentrarte más en el diseño de alto nivel, la resolución de problemas y la revisión del código generado. Has visto cómo configurarlo, guiarlo a través de la construcción de una aplicación simple y refinar los resultados. Si bien requiere instrucciones claras y una revisión cuidadosa, el Modo Agente tiene el potencial de acelerar drásticamente los flujos de trabajo de desarrollo y abordar los desafíos de codificación de manera más eficiente.

¿Listo para probar a tu nuevo programador de pares de IA? Inicia VS Code, asegúrate de que Copilot esté configurado, cambia al Modo Agente y dale una tarea real de tu proyecto actual. ¿Qué construirás o refactorizarás primero?