Acaba de salir una nueva versión de Visual Studio Code y trae una novedad que no te puedes perder.
De hecho, estoy bastante seguro que te voy a quitar una extensión con lo que te voy a explicar.
Y es que cuando estabas trabajando con proyectos de React, como este que tenemos aquí,
cuando tú querías cambiar una etiqueta, imagínate que este div lo queremos cambiar por un section.
Si cambiabas el section, fíjate que ¿qué pasa aquí? Que no se ha cambiado automáticamente.
Claro, y te dice, oye, es que esperaba la etiqueta de cierre que fuese un section. Normal.
Ahora, vamos a darle otra vez. ¿Y qué podríamos intentar?
Podríamos seleccionar este de aquí y buscar el siguiente.
Pero es que resulta que el siguiente es este.
Hay formas de hacer que, oye, búscame el siguiente, pero este te lo saltas.
Y este te lo saltas.
Y entonces, fíjate que no es tan, no sé, no es cómodo, no es cómodo tener que ir buscando uno a uno.
Al menos así podías hacer el cambio, pero es muy complejo.
Por suerte, teníamos una extensión, pero esta no es la solución, ya verás.
Teníamos una extensión que se llama auto-rename-tags.
A ver si la encuentro, que yo creo que la tengo instalada.
¿Ves? La tengo instalada, pero la tengo desactivada, porque ya no la vas a necesitar.
La voy a habilitar y ahora, si vamos aquí a este div y yo empiezo a cambiar,
ves que ahora sí que se cambia correctamente.
Podemos ir cambiando con lo que sea y automáticamente se cambia.
Y esto mismo lo podríamos hacer aquí.
Sí, funcionaba muy bien esta extensión, la verdad es que funcionaba bastante bien.
Y a veces sí que me ha dado algún problema, que se volvía un poco loca la extensión,
pero en general funcionaba bien con JSX, con HTML, incluso con otros frameworks.
Ahora bien, seguramente si estás utilizando React, tienes que saber que ya no necesitas esta extensión.
Vamos a recargar, vamos a deshabilitar la extensión, recargamos el editor,
volvemos al estado anterior, donde teníamos este problema, ¿no?
Este problema, este problema.
Vamos a solucionarlo, pero de forma nativa,
porque la novedad de Visual Studio Code de su actualización de mayo
es que por fin tenemos la capacidad de modificar etiquetas enlazadas en JSX.
Para eso te vas a las configuraciones del usuario y busca aquí Linked Editing, Editing.
Y esta opción de aquí la activas.
Una cosa muy interesante de esto es que no solo funcionará con React,
sino que también te funcionará con HTML y así seguramente no necesitarás más la extensión.
Fíjate, con esto activado, ¿qué es lo que pasa?
Vamos a volver aquí y voy a cambiar este article.
¿Has visto que se pone en rojo?
Porque ahora el editor ha detectado que esta etiqueta es la que quieres cambiar.
Si tú vas borrando, ¿qué ha pasado?
Pues que ahora ya tienes enlazado totalmente cada una de las etiquetas.
Cualquiera, cualquiera, podemos ir a cualquiera.
Aquí también la podríamos cambiar, ¿ves?
Y se ha cambiado perfectamente.
Y detecta cuando te quieres ir para atrás como que se han cambiado las dos.
Solo estoy seleccionando una de las dos.
Fíjate que incluso podrías cambiar directamente la de cierre y funcionaría correctamente.
Una novedad brutal de Visual Studio Code que no te puedes perder.
Así que corre a actualizar tu versión de Visual Studio Code por si no tienes la última
y que sepas que esto es gracias a TypeScript 5.1 que ha añadido esta funcionalidad
y por eso el editor Visual Studio Code que está hecho con TypeScript
es capaz de detectar cada una de las etiquetas.
Así que espero que te haya servido.
Y nada, deja tu like si te ha gustado.
¡Chao!