4 min read Tutoriales

Compara ramas en VSCode: encuentra las diferencias en segundos con GitLens

Compara ramas en VSCode: encuentra las diferencias en segundos con GitLens

Sumario:

  1. Paso 1: Instalar GitLens en VSCode
  2. Paso 2: Seleccionar las ramas a comprar
  3. Paso 3: Visualiza las diferencias
  4. Paso 4: Resuelve los conflictos
  5. Paso 5: Guarda tus cambios
  6. Extra
  7. Conclusión

En el desarrollo de software, a menudo trabajamos con diferentes ramas para experimentar con nuevas funcionalidades o correcciones de errores. Al final, necesitamos comparar los cambios realizados en una rama específica con otra para ver qué se ha modificado y si se han agregado nuevos errores o se han resuelto los existentes.

En esta publicación, te mostraré cómo comparar los cambios de dos ramas diferentes en VS Code utilizando la extensión "GitLens" y obtener una lista clara y rápida de los archivos que han cambiado.

Paso 1: Instalar GitLens en VSCode

Lo primero que tienes que hacer es instalar la extensión de GitLens, presionando el icono de extensions como se muestra en la imagen inferior y en el panel de búsqueda coloca "gitlens" y presiona el botón de instalar.

Paso 2: Seleccionar las ramas a comprar

Después debes presionar el icono de Source Control, y seleccionar la opción Search & Compare como se muestra en la imagen inferior

Se desplegará dos botones, a nosotros nos interesa el segundo que dice Compare Reference, deberemos de hacer clic en él.

En la parte superior aparecerá una caja de búsqueda donde nos mostrara las ramas que tenemos disponibles en nuestro repositorio local, las cuales son main y develop, para este ejemplo nosotros compararemos la rama main y ver las diferencias que hay respecto a la rama develop, así que seleccionamos primero la rama main.

Se actualizará la sección de Search & Compare como se muestra en la imagen inferior, y aparecerá nuevamente la caja de búsqueda para seleccionar la segunda rama con la que queremos comparar la rama main y en este caso yo seleccione la rama develop.

Paso 3: Visualiza las diferencias

Una vez que hayas seleccionado ambas ramas, VSCode abrirá una vista de comparación que muestra las diferencias entre las dos ramas, por ejemplo podemos ver que en este ejemplo la rama main está a un commit atrás respecto a la rama develop que está más actualizada, así como también los archivos que contienen diferencias, por ejemplo seleccionemos el archivo index.js para ver sus diferencias.

Una vez abierto el archivo haciendo clic en él se mostrará el contenido del mismo en pantalla dividida para ver sus diferencias, es importante notar que del lado izquierdo aparecerá la segunda rama que seleccionamos, en otras palabras primero aparecerá en mi caso la rama develop y del lado derecho la rama main.

Paso 4: Resuelve los conflictos

Si hay conflictos entre las dos ramas, VSCode mostrará los conflictos en la vista principal. Puedes resolver los conflictos manualmente haciendo clic en los botones de aceptar o rechazar los cambios según sea necesario.

Paso 5: Guarda tus cambios

Una vez que hayas resuelto los conflictos y estés satisfecho con los cambios, guarda tus cambios en la rama comparativa haciendo clic en "Commit" en el panel "Git".

Extra

Esto también lo puedes hacer directamente en la terminal utilizando el siguiente

# Estructura
git diff branch-1 branch-2

Primero seleccionamos la rama main y después la rama develop, y git nos mostrará los archivos que presentan cambios, así como los cambios que tienen.

# Ejemplo
git diff main develop

diff --git a/index.js b/index.js
index de88829..a22fff4 100644
--- a/index.js
+++ b/index.js
@@ -1 +1 @@
-console.log("Hello World!");
\ No newline at end of file
+console.log("Hello Jonathan!");
\ No newline at end of file

Conclusión

Comparar los cambios de dos ramas diferentes en VSCode es una tarea sencilla con la ayuda de la extensión "GitLens". Utilizando los pasos que hemos visto en este tutorial, puedes obtener de manera clara y rápida cuáles han sido los archivos que presentan cambios.

Esperamos que este tutorial te haya sido de ayuda y te permita trabajar de manera más eficiente en tus proyectos con control de versiones.