Git & GitHub – DÍA 6

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

(el flujo moderno que usa todo el mundo)

1. Objetivo del día

Hoy aprenderás a usar Visual Studio Code como interfaz gráfica para Git. Verás cómo:

abrir un repositorio Git en VS Code
ver cambios visualmente
usar staging y unstage
hacer commits desde la interfaz
hacer push/pull con un clic
resolver conflictos de merge de forma gráfica
usar la extensión GitLens como un profesional

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 en tu sistema.

Puedes comprobarlo:

Menú → Help → About, o
simple: abre cualquier carpeta con .git y VS Code activará la vista Source Control.

3. Abrir un repositorio en VS Code

Desde la terminal:

cd mis-scripts
code .

Esto abre VS Code en esa carpeta.

También puedes hacerlo desde el propio editor:

VS Code → File → Open Folder…

4. La vista de Source Control

En la barra lateral izquierda encontrarás el icono de control de versiones:

🔧 Source Control

Aquí puedes ver:

archivos modificados
líneas añadidas y eliminadas
staging area
commits recientes
ramas activas
cambios pendientes de sincronizar

Todo lo que harías por terminal, pero visual.

5. Flujo visual de Git en VS Code

5.1 Ver cambios en un archivo

Haz clic en un archivo modificado para abrir la vista de diferencias:

verde → líneas nuevas
rojo → líneas eliminadas

Es básicamente git diff, pero mucho más cómodo.

5.2 Añadir al staging (y sacarlo)

En cada archivo verás iconos:

+ → añadir al staging (equivale a git add)
– → quitar del staging (equivale a git restore --staged)

Es intuitivo y rápido.

5.3 Hacer commit desde VS Code

En la parte superior de Source Control escribe tu mensaje:

Actualizo script de healthcheck

Pulsa:

✔ Commit

O simplemente:

Ctrl + Enter

5.4 Push con un clic

En la barra inferior azul:

↑ Sync
o ↑ Push

VS Code hace internamente:

git push
git pull si hace falta

Ya no tienes excusa para no sincronizar tu repositorio.

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

Cuando un merge produce conflicto, VS Code te mostrará dos versiones:

Current Change (tu rama)
Incoming Change (la rama que estás fusionando)

Con botones fáciles:

Accept Current
Accept Incoming
Accept Both
Compare Changes

No necesitas editar:

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

Tras elegir la opción:

VS Code marca el conflicto como resuelto
Solo queda hacer commit

Todo se puede hacer sin tocar la terminal.

7. GitLens: imprescindible en entornos profesionales

Instala la extensión:

VS Code → Extensions → GitLens

GitLens te permite:

ver quién modificó cada línea (blame)
navegar por el historial de un archivo
comparar versiones anteriores
ver un gráfico de ramas
abrir diferencias entre commits
mostrar autoría en tiempo real sobre el propio editor

Es una herramienta estándar en DevOps, SRE, backend y equipos colaborativos.

8. Ver historial gráfico

Con GitLens puedes:

botón derecho sobre archivo → Open File History
ver cambios línea a línea → Open Line History
comparar con la versión anterior → Compare with Previous Revision

Tendrás una experiencia similar a GitKraken, pero integrada en VS Code y sin programas extra.

9. Clonar repos de GitHub desde VS Code

Abre la Command Palette:
Ctrl + Shift + P
Escribe:
Git: Clone
Pega la URL del repo.
Selecciona una carpeta.
VS Code abrirá el repositorio automáticamente.

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

1️⃣ Abre tu repositorio en VS Code:

code .

2️⃣ Modifica un archivo y observa los cambios en verde/rojo.
3️⃣ Añádelo al staging con el botón +.
4️⃣ Escribe un mensaje de commit.
5️⃣ Pulsa ✔ para hacer commit.
6️⃣ Haz Sync para hacer push.
7️⃣ Crea un conflicto siguiendo lo aprendido en el Día 4 y resuélvelo visualmente.
8️⃣ Instala GitLens y explora:

historial de archivo
blame
comparación entre commits

11. Checklist del Día 6

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

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

12. Ejercicio sugerido

Crea un repositorio de pruebas y:

Modifica un archivo
Haz commit desde VS Code
Crea una rama
Genera un conflicto a propósito
Resuélvelo con la interfaz de VS Code
Usa GitLens para visualizar tu historial

Este ejercicio te pone al nivel de cualquier profesional de DevOps y desarrollo moderno.

13. Día 6 completado

Ya sabes usar Git con todas las facilidades de VS Code, como se trabaja en entornos reales.

Mañana cerramos con el proyecto final:

👉 Día 7 – Tu repositorio profesional de scripts, con estructura, README impecable, wiki y versiones.

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