Git & GitHub – DÍA 6

VS Code + Git: staging visual, commits fáciles, resolución gráfica de conflictos, GitLens

(el flujo moderno y profesional que usa todo el mundo)

1. Objetivo del día

Hoy vas a aprender a usar Visual Studio Code como herramienta Git profesional:

abrir un repo Git en VS Code
ver cambios visualmente
usar staging y unstage
hacer commits desde la interfaz
hacer push/pull con un clic
resolver conflictos gráficamente
usar extensiones profesionales como GitLens

Este día está pensado para que incluso quien le tenga miedo a la terminal disfrute usando Git.

2. Asegúrate de tener Git instalado

VS Code detecta Git automáticamente si está instalado.

Puedes verificar:

Menu → Help → About

O simplemente abre un repo con Git y VS Code mostrará la sección Source Control.

3. Abrir un repositorio en VS Code

En tu PC:

cd mis-scripts
code .

Esto abre VS Code en esa carpeta.

También puedes hacerlo desde:

VS Code → File → Open Folder…

4. La vista de Source Control (Control de Código Fuente)

En la barra lateral izquierda, icono de ramita:

🔧 Source Control

Aquí ves:

cambios pendientes
staging area
archivos modificados
nuevas líneas
eliminaciones
commits recientes

5. Flujo visual de Git en VS Code

5.1. Ver cambios en un archivo

Haz clic en el archivo → VS Code mostrará:

en rojo → lo que borraste
en verde → lo que añadiste

Exactamente igual que git diff, pero visual.

5.2. Añadir al staging

En el archivo modificado:

icono + → añade al staging
icono – → lo saca del staging

Equivalente a:

git add archivo
git restore --staged archivo

5.3. Commit con un mensaje

Arriba, en Source Control, escribe tu mensaje:

Actualizo script de healthcheck

Después pulsa:

✔ Commit

También puedes hacer:

Ctrl + Enter

5.4. Push con un clic

En la barra inferior azul:

↑ Sync
o
↑ Push

Esto hace:

git push
git pull

automáticamente.

6. Resolver conflictos en VS Code (GRÁFICO)

Cuando un merge produce conflicto, VS Code muestra:

Current Change (tu versión)
Incoming Change (versión de la otra rama)

Con botones:

Accept Current
Accept Incoming
Accept Both
Compare Changes

Esto es MUCHÍSIMO más fácil que editar manualmente:

<<<<<<< HEAD
=======
>>>>>>>

Después de resolver:

git add archivo
git commit

Se puede hacer todo desde el menú gráfico.

7. GitLens: la extensión que debe tener cualquier profesional

Instálala desde:

VS Code → Extensions → GitLens

GitLens permite:

ver quién modificó cada línea (“blame”)
navegar entre commits
ver historial por archivo
comparar versiones antiguas y nuevas
ver gráficos de ramas
ver el autor de cada línea directamente en el editor

Es una auténtica maravilla y se usa muchísimo en entornos profesionales.

8. Ver historial gráfico

Con GitLens:

botón derecho sobre archivo
Open File History
Open Line History
Compare with Previous Revision

Esto te da una vista “tipo GitKraken” dentro de VS Code sin instalar más herramientas.

9. Clonar repos de GitHub desde VS Code

VS Code tiene integración directa:

Command Palette → “Git: Clone”

Pega la URL del repo, elige carpeta, listo.

10. Práctica guiada (20–30 minutos)

1️⃣ Abre un repositorio en VS Code:

code .

2️⃣ Cambia un archivo:
Verás lo marcado en verde/rojo.

3️⃣ Añade el archivo a staging con el botón +.

4️⃣ Escribe un mensaje de commit.

5️⃣ Haz commit con ✔.

6️⃣ Pulsa Sync en la barra inferior para hacer push.

7️⃣ Crea un conflicto (usar Día 4 como referencia)
y resuélvelo gráficamente con VS Code.

8️⃣ Instala GitLens y explora:

historial
blame
comparación de commits

11. Checklist del Día 6

Abriste un repo en VS Code
Viste cambios en modo gráfico
Hiciste staging visual
Hiciste commit desde interfaz
Hiciste push y pull
Resolviste un conflicto visualmente
Instalaste GitLens
Usaste historial gráfico

Si está todo marcado → Día 6 superado.

12. Ejercicio sugerido

Crea un repositorio de ejemplo:

Modifica un archivo
Commitea desde VS Code
Crea una rama
Crea conflicto
Resuélvelo gráficamente
Genera un historial visible con GitLens

Esto te pone al nivel de cualquier equipo devops moderno.

13. Día 6 completado

Ya sabes usar Git como un profesional moderno, con todas las comodidades de Visual Studio Code.

Y mañana cerramos el curso con un proyecto épico:

👉 Día 7 – Proyecto final: tu repositorio profesional de scripts, con estructura, README, wiki y versiones.

Tu repositorio quedará listo para enseñarlo a cualquier empresa.