9. Git y GitHub Integrado en VS Code: Stage, Diff Visual, Ramas y Conflictos
Gestiona commits, compara cambios línea por línea, sube ramas y resuelve conflictos de fusión con el editor visual de 3 vías.
El Panel de Control de Código Fuente (Ctrl+Shift+G)
Visual Studio Code nació con soporte nativo de primera clase para Git y GitHub. Aunque todo desarrollador debe conocer los comandos de terminal (git status, git add, git commit), la interfaz visual de VS Code multiplica tu precisión al permitirte inspeccionar cada línea modificada antes de hacer commit y elegir exactamente qué fragmentos subir y cuáles descartar.
Indicadores en el Margen (Gutter Indicators) y Flujo de Staging
Mientras editas un archivo dentro de un repositorio Git, verás marcas de colores junto a los números de línea y letras de estado en el explorador de archivos:
| Indicador / Icono | Significado en Git | Acción Directa en VS Code |
|---|---|---|
| Letra U (Verde) — Untracked | Archivo nuevo que Git aún no rastrea. | Clic en el icono + (Stage Changes) para prepararlo para commit. |
| Letra M (Amarillo/Naranja) — Modified | Archivo existente con cambios pendientes. | Clic sobre el archivo para abrir la vista comparativa Diff View (Antes vs Después). |
| Barra Verde / Azul / Roja en el margen | Líneas agregadas (verde), modificadas (azul) o eliminadas (triángulo rojo). | Haz clic sobre la barra de color en el margen para ver el cambio original o revertir solo ese bloque. |
| Stage Selected Ranges | Staging parcial por líneas (git add -p). |
Selecciona 5 líneas en el Diff, clic derecho ➔ Stage Selected Ranges para hacer commit solo de esa parte. |
git merge o git pull, VS Code resalta el archivo con ! y muestra el botón azul Resolve in Merge Editor, donde puedes comparar visualmente Incoming (remoto), Current (local) y el resultado combinado final con un solo clic.
⚡ Flujo Completo de Git y Resolución de Conflictos desde VS Code
Guía paso a paso para revisar cambios en el Diff View, hacer commits limpios y cambiar de rama desde la barra de estado.
# Flujo Profesional de Git en Visual Studio Code
## 1. Inspección antes del Commit (La Regla de Oro)
1. Presiona `Ctrl + Shift + G` para abrir el panel **Source Control**.
2. Haz clic sobre cualquier archivo en la lista **Changes**.
3. Se abrirá el **Diff Editor**: a la izquierda verás el código anterior (rojo) y a la derecha tu nuevo código (verde).
4. Si dejaste un `console.log()` o `var_dump()` olvidado, bórralo directamente en el panel derecho del Diff.
## 2. Preparación (Stage) y Commit
1. Pasa el ratón sobre el archivo verificado y haz clic en el símbolo `+` (**Stage Changes**).
2. El archivo pasará a la sección **Staged Changes**.
3. Escribe un mensaje claro en la caja superior (ej: `feat(auth): validar token de sesion`) o haz clic en el icono de chispas `✨` para que **GitHub Copilot** redacte el resumen de los cambios automáticamente.
4. Presiona `Ctrl + Enter` para confirmar el **Commit**.
## 3. Gestión de Ramas desde la Barra Inferior
1. En la esquina inferior izquierda de la barra azul (Status Bar), haz clic sobre el nombre de la rama actual (ej: `🌿 main` o `🌿 develop`).
2. Se desplegará la paleta superior con la opción **+ Create new branch...**.
3. Escribe el nombre de tu nueva rama (ej: `feature/carrito-compras`) y presiona Enter.
4. Para subir la rama a GitHub, haz clic en el botón **Publish Branch** (icono de nube con flecha).Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lecciónModificaste dos funciones distintas dentro de un mismo archivo PHP, pero quieres hacer commit únicamente de la primera función y dejar la segunda para después. ¿Qué herramienta nativa de VS Code te permite hacerlo visualmente?
¿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.