Como ya sabréis, trabajando con JavaScript, TypeScript o derivados, muchas veces se nos anidan unas cuantas llaves. A veces de un primer vistazo cuesta distinguir de qué bloque es cada una.
Si el código está bien alineado, suele ser más sencillo seguir el código. Pero no siempre es así, sobre todo cuando heredamos código antiguo o legacy. Además, cada programador tiene sus manías. Empezando por el típico dilema de usar el tabulador o los 4 espacios para organizar el código. Pero también otras manías cómo dónde poner la llave de apertura: en la misma línea o en la línea siguiente.
Cada lenguaje tiene sus buenas prácticas a la hora de programar. Pero muchos vicios vienen de gente que llega desde otros lenguajes de programación distintos en los cuales su manera de programar sí que seguían las buenas prácticas. Pero se las ha traído, la mayoría de veces sin querer, a otro lenguaje donde no lo son tanto.
Para ayudar a distinguirlos, en Visual Studio Code se pueden colorear estas llaves para que quede así, cada una de un color distinto:
Es más, no solo las llaves, sino los paréntesis con los parámetros también se colorean del mismo color para facilitar la lectura.
Cómo colorear las llaves
Para hacerlo, no se necesita ninguna extensión, simplemente hay que entrar en la configuración:
Archivo ➡️ Preferencias ➡️ Configuración
Y una vez dentro, buscar “bracket pair”. Aunque lo tengamos en castellano o cualquier otro idioma, lo encuentra igual.
La búsqueda nos devolverá varias opciones, pero nos interesan estas dos:
· La primera debe estar marcada. (Editor ➡️ Bracket Pair Colorization ➡️ Enabled)
· La segunda debe tener valor true. (Editor ➡️ Guides ➡️ Bracket Pairs)
Con esto ya te saldrán coloreadas. Así de sencillo, sin necesidad de instalar más extensiones, ya ha mejorado la legibilidad de nuestro código fuente.
¿Te ha servido? Yo lo veo muy útil. Incluso, quizás debería venir así por defecto.
