15. Bonus - VSCode add y commits

 

Bonus - Usando VSCode para Add y Commits

Bienvenidos a esta clase bonus. Hasta ahora hemos estado trabajando principalmente con la terminal, lo cual es ideal porque te da un control total y profundo de Git. Sin embargo, hoy vamos a ver cómo Visual Studio Code (VSCode) puede facilitarnos mucho la vida con su interfaz gráfica integrada para Git. ¡Verán lo intuitivo que puede ser!

1. Accediendo al Control de Fuentes (Source Control)

Si ustedes están trabajando en Visual Studio Code y tienen la instalación estándar, en la barra de actividades (generalmente a la izquierda) deberían observar un icono que parece un "ramal" (una especie de Y invertida). Si dejan el cursor encima, verán que dice "Source Control" (Control de Código Fuente).

Hagan clic ahí. Se abrirá un panel lateral con información valiosa sobre el estado de su repositorio Git.

En la parte superior, verán un mensaje similar a: ** mensaje (ctrl+enter) commit on main. Esto nos indica en qué rama estamos trabajando (en este caso, main). En Windows, el atajo probablemente sea Ctrl+Enter; en Mac, sería Cmd+Enter.

2. Visualizando Cambios en el Editor

Vamos a hacer una prueba práctica. Abran su archivo README.md y añadan una línea nueva, por ejemplo:

markdown

Esto fue añadido mediante VSCode

Guarden los cambios (Ctrl+S o Cmd+S).

Ahora, si observan en el panel de "Source Control" o incluso en el explorador de archivos al lado del nombre del archivo, notarán que aparece una letra M junto al README.md. Esa M significa "Modified" (Modificado). Git nos está indicando que este archivo ha sufrido cambios desde el último commit.

Existen otros indicadores que pueden ver más adelante:

• U: Untracked (Archivo nuevo, no trackeado).

• D: Deleted (Archivo eliminado).

• A: Added (Archivo añadido al stage).

3. El Panel de Source Control en Detalle

Regresando al panel de Source Control, verán una sección llamada "Changes" (Cambios). Aquí aparecen todos los archivos que han sido modificados desde el último commit. En nuestro caso, debería aparecer README.md (y quizás index.html si también lo modificaron).

Al lado de cada archivo, verán varios iconos muy útiles:

• Icono de archivo (generalmente el nombre del archivo): Si hacen clic en el nombre del archivo, se abrirá una vista de diferencias (diff) mostrando exactamente qué líneas se añadieron (verde) y cuáles se eliminaron (rojo). Es una forma visual y muy clara de ver los cambios.

• Icono + (Plus): Este es el equivalente a git add <archivo>. Al hacer clic aquí, moverán el archivo al "stage" (escenario). Verán que el archivo desaparece de la sección "Changes" y aparece en una nueva sección llamada "Staged Changes".

• Icono de flecha hacia atrás (deshacer): Si pasan el cursor por encima, probablemente dirá "Discard Changes" (Descartar cambios). ¡Cuidado con este botón! Si lo presionan, básicamente están haciendo un git restore o un git checkout -- <archivo>, lo que significa que descartarán permanentemente los cambios que hicieron y el archivo volverá a ser exactamente como estaba en el último commit. VSCode les pedirá confirmación: "¿Estás seguro de que quieres descartar los cambios?". Esto es súper útil cuando te equivocas y quieres volver al punto anterior rápidamente.

4. Manejando el Stage desde VSCode

Hagamos un ejercicio completo:

1. Modificar el archivo: Asegúrense de tener cambios sin añadir en el README.md. Verán el archivo en "Changes" con una M.

2. Añadir al stage: Hagan clic en el icono + al lado del README.md. El archivo se moverá a la sección "Staged Changes". Ahora está listo para el commit. Fíjense que ahora, en la sección "Staged Changes", al lado del archivo aparece un icono - (menos). Este botón hace lo contrario que el +: saca el archivo del stage (equivalente a git reset o git restore --staged), pero sin eliminar los cambios que hicieron. Es como decir: "Bájate del escenario, aún no estás listo".

5. Haciendo el Commit desde VSCode

Ahora que tenemos el archivo en "Staged Changes", vamos a hacer el commit.

1. En la parte superior del panel de Source Control, verán un cuadro de texto que dice "Message (Ctrl+Enter to commit on 'main')". Aquí es donde escribimos el mensaje del commit.

2. Escriban un mensaje, por ejemplo: README actualizado desde VSCode.

3. Una vez escrito el mensaje, pueden hacer el commit de dos maneras:

   • Presionar Ctrl+Enter (Windows/Linux) o Cmd+Enter (Mac).

   • Hacer clic en el icono de "check" (✓) que aparece arriba del cuadro de texto.

¡Y listo! Acaban de hacer su primer commit usando la interfaz gráfica de VSCode.

Si ahora vuelven a mirar el panel de Source Control, verán que ya no hay archivos en "Staged Changes" ni en "Changes". Todo está limpio, porque el snapshot ya se guardó.

6. Verificando con git log

Para confirmar que todo salió bien, abran la terminal integrada en VSCode (Ctrl+ñ o Cmd+ñ) y ejecuten:

bash

git log

Deberían ver su nuevo commit en la parte superior, con el mensaje que acaban de escribir. ¡Perfecto!

Conclusión

VSCode es un editor de código increíblemente útil porque ya viene con esta funcionalidad de Git integrada. El panel de Source Control facilita mucho el trabajo diario: puedes ver los cambios de forma visual, añadir y quitar archivos del stage con un clic, descartar cambios fácilmente y hacer commits sin necesidad de recordar todos los comandos de memoria.

Aunque es importante saber los comandos de la terminal (y por eso los hemos estado practicando), tener una herramienta visual como esta acelera el flujo de trabajo y reduce errores. Muchos desarrolladores usan VSCode como su entorno de desarrollo principal por estas razones.

---

Cuestionario de Repaso

Respondamos las siguientes preguntas para reforzar lo aprendido:

1. ¿Qué significa la letra M que aparece junto a un archivo en el explorador de VSCode o en el panel de Source Control?
   a) Que el archivo es nuevo y Git no le da seguimiento (Untracked).
   b) Que el archivo ha sido modificado (Modified) desde el último commit.
   c) Que el archivo está listo para ser eliminado.

2. En el panel de Source Control de VSCode, ¿qué acción realiza el icono + (plus) que aparece al lado de un archivo en la sección "Changes"?
   a) Descarta todos los cambios del archivo.
   b) Abre el archivo en el editor.
   c) Añade el archivo al "stage" (equivalente a git add).

3. ¿Qué precaución debemos tener al hacer clic en el icono de "flecha hacia atrás" (descartar cambios) en VSCode?
   a) Que puede generar un conflicto con la rama principal.
   b) Que eliminará permanentemente las modificaciones sin posibilidad de recuperarlas fácilmente (a menos que las tengamos en otro lado).
   c) Que solo funciona si el archivo está en el stage.

4. ¿Cuál es el atajo de teclado para hacer un commit directamente desde el cuadro de mensaje en VSCode (en Windows/Linux)?
   a) Alt+Enter
   b) Ctrl+S
   c) Ctrl+Enter

5. ¿Cuál es la principal ventaja de usar el panel de Source Control de VSCode para Git?
   a) Es la única forma correcta de usar Git.
   b) Permite ver los cambios de forma visual (diffs), gestionar el stage con clics y hacer commits de manera intuitiva, agilizando el flujo de trabajo.
   c) No tiene ventajas, es mejor usar siempre la terminal.

---

Respuestas:

1. b) Que el archivo ha sido modificado (Modified) desde el último commit.

2. c) Añade el archivo al "stage" (equivalente a git add).

3. b) Que eliminará permanentemente las modificaciones sin posibilidad de recuperarlas fácilmente (a menos que las tengamos en otro lado).

4. c) Ctrl+Enter (en Mac es Cmd+Enter).

5. b) Permite ver los cambios de forma visual (diffs), gestionar el stage con clics y hacer commits de manera intuitiva, agilizando el flujo de trabajo.