Durante todo el curso hemos sido usado básicamente la terminal. Lo hemos hecho así para no liar la explicación y poder explicar bien los conceptos.
Pero ya dije en la introducción que no ibamos a hablar sólo de terminal. Hay programas interfaces gráficos (GUI) e integraciones en los IDE que nos ayudan a trabajar con Git más fácilmente.
La gran mayoría usamos una estrategia de trabajo híbrida:
- Interfaz gráfica (GUI): Para el trabajo cotidiano (add, commit, diff)
- Terminal: Para operaciones complejas o arreglar desastres
En cuanto a GUI, más o menos son todas parecidas. Vamos a basarnos en el de Visual Studio Code, porque es el más usado (pero cualquier otro que encontréis va a ser muy similar).
Sabiendo que, en líneas generales, todas comparten un enfoque similar, en este artículo tomaremos como base el gestor habitual de Visual Studio Code.
Simulador de Git en VS Code
Para que no tengas que instalar nada, y podamos seguir la explicación aquí mismo, me he montado un simulador Interactivo para que pruebes el flujo de trabajo real sin miedo a romper nada.
En la parte inferior, en la terminal emulada, te pongo el comando real de Git que se está ejecutando detrás de cada clic.
¿Que puedes probar hacer?
Inicializa: Pulsa el botón azul para hacer git init.
Crea contenido: Usa el botón “Simulate Edit” para generar cambios en los tres ficheros de tu proyecto app.js, style.css y index.html (en las tabs)
Prueba el flujo clásico: Pulsa al + en un archivo para pasarlo a Staged, y luego haz Commit.
Prueba el flujo Smart: Modifica un archivo y dale directamente a Commit sin pasarlo a Staged.
Practicas con las Ramas (avanzado): Haz clic en el nombre de la rama (main, arriba derecha) para crear una nueva rama (feature) y cámbiate a ella.
Sigue leyendo el resto del artículo, y puedes volver aquí para probar y entender los conceptos
El panel de control
Sigamos con el VS Code “real”. En la barra lateral izquierda de VS Code verás un icono que parece un grafo de ramas (tres bolitas conectadas). Ese es el panel de Source Control.
Cuando entras ahí, VS Code agrupa tus archivos en varias secciones.
- STAGED CHANGES: Archivos que ya has preparado con
git add. - CHANGES: Archivos modificados pero que aún no has preparado.
Si pasas el ratón por encima de un archivo en “Changes” y pulsas el botón +, VS Code ejecuta git add por ti. Si pulsas el botón - en “Staged”, ejecuta git restore --staged.
El “Smart Commit”
Esta es la funcionalidad más útil, pero que más se diferencia respecto a lo que hemos visto en la terminal.
En la terminal, el flujo es siempre:
git add .(Preparar)git commit -m "..."(Confirmar)
Pero en GUI como VS Code podemos hacer Commit simplemente esbribiendo el mensaje, sin haber hecho git add antes.
¿Cómo es posible? ¡Sagrilegio! Porque VS Code tiene una función llamada Smart Commit.
Si no tienes nada en el Staging Area, VS Code asume que querías decir añade todo lo que he cambiado y haz commit.
Esta funcionalidad es terriblemente cómoda 💜. Pero debes saber lo que está haciendo para no subir archivos basura (y para entender cómo funciona).
Includo con Smart Commit, el Stage puede ser útil:
- Si estás en mitad de un cambio, y quieres hacer una especie de “punto de guardado”, pero sin llegar a hacer commit.
- Si has modificado varios ficheros, y quieres hacer commit separados.
Diferencias clave con la Terminal
Aparte de Smart Commit, hay otras diferencias que VS Code hace para facilitarte la vida (y puedes notar en el simulador)
No necesitas escribir git status como un enfermo. VS Code vigila tus archivos.
- Si un archivo se pone Verde (U), es nuevo.
- Si se pone Amarillo (M), está modificado.
Olvídate de git checkout. En la parte inferior izquierda de VS Code siempre verás el nombre de tu rama actual (ej: main).
Si haces clic, se abre un menú para crear ramas o saltar a otras.
Cuidado al cambiar de rama Si tienes cambios “sucios” (sin commitear) e intentas cambiar de rama, VS Code (y nuestro simulador) te avisará. La terminal te dejaría colgado o te obligaría a hacer un stash manual. VS Code suele ofrecerte opciones para llevártelos contigo o guardarlos automáticamente.
Aunque el simulador no llega a tanto, cuando tengas un conflicto de fusión (Merge Conflict), VS Code te pintará el código con colores y te pondrá botones encima:
- Accept Current Change
- Accept Incoming Change
Además, te permitirá decidir individualmente cada cambio.
Es infinitamente más fácil que buscar los símbolos <<<<<<< HEAD en el bloc de notas.
Además de muchas muchas funciones con el botón derecho. Básicamente puedes hacer casi todo, aunque para cosas complicadas, yo recomiendo usar la terminal.
Extensiones de Git para VScode
Aunque VS Code trae lo básico de serie, hay dos extensiones que convierten el editor en una herramienta de Git completa.
- Git Graph: VS Code no trae un visualizador del árbol de historia por defecto. Esta extensión dibuja ese famoso “mapa de metro” con tus ramas y commits. Es imprescindible para entender visualmente dónde estás y qué ha pasado en el proyecto.
- GitLens: Es la extensión más potente que existe. Su función estrella es el “Blame” en línea: al hacer clic en cualquier línea de código, te dice en gris flojito quién la modificó, cuándo y en qué commit.
No os recomiendo instalar GitLens al principio. Añade un montón de funciones, de las que el 98% no usarás nunca. Igual os lía más que otra cosa.
