Como ya he comentado en muchas ocasiones, soy un gran fan de Visual Studio Code como herramienta de desarrollo. Una de sus grandes virtudes es su buena integración con Git, el gestor de código fuente, que se además puede mejorar mucho gracias a un puñado de extensiones bien elegidas. Algunas de estas extensiones podrían ser perfectamente completos productos comerciales.

Una de mis extensiones "indispensables" es GitLens. Se trata de una herramienta para trabajar con Git que es una de las grandes "culpables" de que use Visual Studio Code para casi todo hoy en día. Tiene tantas características y tan útiles que mejor te remito al enlace anterior para verlas, pero si usas Git con VSCode, tienes que usar GitLense. Encima es gratuita, pero si la usas y le sacas partido, por favor, por favor, dónale algo a Eric Amodio, su desarrollador, que lleva más de 2 años trabajando en un producto alucinante sin cobrar nada.

Bueno, que me disperso... Lo que quiero comentar hoy es un truco rápido sencillo para mejorar todavía un poquito más el uso de Git en general y en VSCode en particular....

Se trata de usar una herramienta externa como comparador de versiones de archivos de código.

VSCode tiene un visor de diferencias (diff viewer) integrado que está muy bien y que te muestra las diferencias lado a lado o una encima de otra, además de permitirte hacer muchas otras cosas:

Herramienta de diff de VSCode

Por ejemplo, en este caso estoy viendo en el lateral la historia de un línea concreta (o sea, no del archivo, sino todos los cambios que ha sufrido la línea 114 de este archivo 😯) y al pulsarle encima me muestra las diferencias entre la versión sobre la que pulso y la versión actual del archivo (y de la línea). En la parte de arriba, al lado de la pestaña, tengo un montón de botones para hacer muchas cosas, y en el desplegable (que aquí muestro abierto) puedo cambiar a ver las líneas lado a lado y no una encima de otra. En este caso, la de arriba (en color rojo) es la versión anterior y la de abajo (en verde) es la actual. También lo puedes usar para comparar dos archivos cualesquiera de tu carpeta de proyecto, lo cual es muy útil a veces.

Con este visor me arreglo en el 95% de los casos. Pero ¿qué pasa si por el motivo que sea necesito abrir la comparación entre versiones en una herramienta externa?

Y con "herramienta externa", en mi caso que trabajo en Windows, sin duda la que quiero utilizar es Winmerge. Es otra excelente herramienta gratuita y de código abierto que vale su peso en oro y que llevo utilizando muchos años, porque funciona incluso sin GIT: con archivos y carpetas guardados en tu disco. Nuevamente, si la utilizas y le sacas partido, ¡dónale algo al proyecto!.

Usar Winmerge te puede dar algunas ventajas sobre el visor por defecto de Visual Studio Code, como por ejemplo que puedes hacer comparaciones a tres bandas, y no solo a dos (3 versiones del mismo archivo o 3 archivos en disco), o que soporta la comparación de muchos tipos de archivos de imagen:

Winmerge es un hacha jugando a buscar las diferencias :-D

¿Mola o no mola? 😉

Para usar Winmerge tenemos que configurar Git (no VSCode) para que use Winmerge como herramienta de diferenciación, y no el comparador por defecto.

Hay muchas formas esotéricas de lograrlo, pero la más sencilla y directa en Windows es la siguiente:

  1. Vete a la carpeta de datos de tu usuario en C:\Users\<usuario>\.gitconfig, siendo <usuario>, obviamente, tu nombre de usuario. Ábrelo con cualquier editor de texto, como el propio VSCode.
  2. Localiza una sección llamada [difftool "XXXXX"], siendo "XXXXX" cualquier cosa. Esta sección, de existir, la habrá creado alguna herramienta que uses para Git, como por ejemplo SourceTree, que se mete como herramienta de diferenciación por defecto y entonces pondría [difftool "SourceTree"].
  3. Sustituye esas "XXXXX" por "winmerge", (si no existe la sección, créala) de modo que quede [difftool "winmerge"], y en el apartado cmd de esta mete la ruta a donde tengas instalado Winmerge, entre comillas simples, seguido de los parámetros \"$LOCAL\" \"$REMOTE\".
  4. Localiza o añade la sección llamada [diff], y en su parámetro tool escribe simplemente winmerge para apuntar a lo anterior.

Debería quedarte algo así:

[diff]
 tool = winmerge
[difftool "winmerge"]
 cmd = 'C:/Program Files (x86)/WinMerge/WinMergeU.exe' \"$LOCAL\" \"$REMOTE\"

Si tienes Winmerge en el path del sistema ni siquiera hace falta que pongas la ruta completa.

Listo. Ahora ya tienes configurado WinMerge como herramienta de diferenciación externa de Git.

Ahora, desde cualquier interfaz de Git puedes lanzar las comparaciones con ella usando la opción de la herramienta externa (difftool), e incluso desde la línea de comandos con git difftool .

Por ejemplo, en Visual Studio Code, con Gitlense, puedes abrir la comparación de dos versiones de un archivo con Winmerge usando el menú contextual y eligiendo la opción de difftool:

que abrirá inmediatamente WinMerge con las dos versiones del archivo una al lado de la otra, comparándose.

Una cosa simple, pero muy interesante a veces.

¡Espero que te resulte útil!

💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor

Escrito por un humano, no por una IA