15. Copilot Edits y Modo Agente: Creación y Refactorización Multi-Archivo
Orquesta cambios arquitectónicos que abarcan múltiples archivos simultáneamente revisando diffs interactivos antes de aplicar.
De Asistente de una Línea a Orquestador Multi-Archivo
Cuando construyes una nueva funcionalidad web (por ejemplo, añadir el campo telefono al formulario de registro), no basta con editar un solo archivo: debes actualizar la vista HTML, la validación en JavaScript, el controlador PHP y la consulta SQL del modelo. Hacerlo copiando y pegando fragmentos desde el chat tradicional es lento. Para esto nacieron Copilot Edits y el Modo Agente (Ctrl+Shift+I).
Copilot Chat vs Copilot Edits vs Agent Mode
| Modo | Alcance de Acción | Flujo de Revisión del Desarrollador |
|---|---|---|
| Modo Ask (Chat Clásico) | Solo conversa y muestra bloques de código en la barra lateral sin tocar tus archivos. | Debes hacer clic manualmente en Apply in Editor o copiar el fragmento. |
| Modo Edit (Copilot Edits) | Tú eliges el Working Set (ej. 3 archivos específicos) y Copilot aplica los cambios directamente en ellos. | Aparece una barra con botones Accept (Aceptar) y Discard (Descartar) para revisar cada diff línea por línea. |
| Modo Agent (Agente Autónomo) | Descubre por sí mismo qué archivos editar, propone comandos de terminal y verifica errores de sintaxis en bucle. | Pide tu confirmación antes de ejecutar cualquier comando en la terminal y muestra el resumen de archivos editados. |
⚡ Guía Paso a Paso para una Refactorización Multi-Archivo con Copilot Edits
Cómo seleccionar tu Working Set y aplicar un cambio transversal en Vista, Controlador y Modelo con control de Diffs.
# Flujo Práctico con Copilot Edits (Ctrl + Shift + I)
## Escenario:
Queremos agregar el campo `telefono_celular` al formulario de registro de clientes, validarlo en el backend y guardarlo en la base de datos.
## Paso 1: Definir el Conjunto de Trabajo (Working Set)
1. Presiona `Ctrl + Shift + I` para abrir la vista de **Copilot Edits**.
2. Haz clic en **+ Add Files...** y selecciona únicamente los 3 archivos involucrados:
- `views/auth/registro.php`
- `app/controllers/AuthController.php`
- `app/models/Usuario.php`
## Paso 2: Escribir el Prompt Arquitectónico Claro
> "Agrega el campo obligatorio `telefono_celular` al flujo de registro:
> 1. En `views/auth/registro.php`, añade el input HTML5 con clases Bootstrap 5 y patrón de 10 dígitos.
> 2. En `AuthController.php`, sanitiza el campo y verifica con preg_match que contenga exactamente 10 números.
> 3. En `Usuario.php`, actualiza el INSERT preparado de PDO para guardar `:telefono_celular`."
## Paso 3: Revisión Quirúrgica de Diffs (Human-in-the-Loop)
1. Copilot aplicará los cambios en vivo sobre los 3 archivos mostrándote las líneas nuevas en verde.
2. Usa las flechas **Next Change (`Alt+F5`)** para recorrer cada modificación.
3. Si los 3 archivos son correctos, haz clic en **Keep / Accept All** (`Ctrl+Enter`). Si alguno no te convence, haz clic en **Undo / Discard**.Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección¿Qué es el "Working Set" dentro de la herramienta Copilot Edits de Visual Studio Code?
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.🚀 ¿Quieres dominar Visual Studio Code & GitHub Copilot Profesional y crear proyectos reales?
Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.
🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.