Solución:
¿Quieres cambiar el nombre de las etiquetas emparejadas? Si es así, hay una manera mucho más fácil: solo necesita instalar la extensión Auto Rename Tag. Cuando cambie el nombre de una etiqueta HTML, cambiará automáticamente el nombre de la etiqueta HTML emparejada.
V1.41 agrega esta funcionalidad, consulte https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#html-rename-tags
Etiquetas de cambio de nombre HTML
Ahora puede usar F2 para cambiar el nombre de los pares de etiquetas de apertura / cierre en HTML.
F2 cuando el cursor está sobre una de las etiquetas y obtendrá un pequeño cuadro de entrada con el cursor para ingresar el nombre de la nueva etiqueta y las etiquetas de inicio / fin serán reemplazadas con lo que escriba.
Consulte https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#html-mirror-cursor-off-by-default
También puede ser de interés la funcionalidad de “etiquetas espejo” que se acaba de agregar en v1.41 (https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#html-mirror- cursor):
Al hacer clic dentro de una etiqueta, se creará otro cursor en la etiqueta de inicio o final correspondiente.
VS Code ahora agrega un “cursor espejo” cuando está editando etiquetas HTML. Este comportamiento está controlado por la configuración
html.mirrorCursorOnMatchingTag, que está activado de forma predeterminada.
———- v1.42 está cambiando el estado predeterminado del cursor espejo:
HTML Mirror Cursor desactivado de forma predeterminada
Hemos hecho de Mirror Cursor una función opcional. En la próxima iteración, continuaremos mejorando su implementación para que esta función sea más comprensible y esté disponible para más idiomas. Puede seguir utilizando esta función activando
html.mirrorCursorOnMatchingTag.
Gracias a la respuesta de JerryGoyal a continuación (la he votado a favor), he continuado con esta respuesta en curso.
Debido a que he estado rastreando esto durante más de medio año, la v1.44 ha cambiado de nombre una vez más. Desde regiones sincronizadas:
Regiones sincronizadas
Hemos mejorado la función de cursor espejo que se presentó en noviembre pasado con una nueva implementación llamada Regiones sincronizadas. Actualmente, esta función está disponible para HTML y puede probarla de una de las siguientes formas:
Ejecutando el comando
On Type Rename Symbolen una etiqueta HTML (enlazada a Ctrl + Shift + F2 de forma predeterminada).
Encendiendo el editor.renameOnType ajuste y mueva el cursor a una etiqueta HTML.
Las regiones rojas son regiones sincronizadas. Como sugiere su nombre, cualquier cambio en una región se sincronizará con otras regiones. Puede salir de este modo moviendo el cursor fuera de las regiones o presionando
ESC. Además, al escribir o pegar cualquier contenido con un espacio en blanco en cualquier región, se sale de este modo.Esperamos proporcionar una API que pueda hacer que esta experiencia de cambio de nombre por tipo esté disponible para otros lenguajes como JSX, XML o incluso variables locales en TypeScript.
Como señala la última parte, funciona en html listo para usar, pero otros lenguajes deben implementarse por sí mismos. A partir de junio de 2020, según mis pruebas, todavía no funciona en archivos jsx en etiquetas html incrustadas.
Debe habilitar esto en su configuración, es desactivado por defecto.
Puede hacer esto sin una extensión usando Emmet Update Tag
- Coloque su cursor en la etiqueta de apertura
- Presione CTRL + MAYÚS + P para abrir la paleta de comandos
- Busque “Emmet: Actualizar etiqueta” escribiendo algo como “em up t” y / o búsquelo en la lista.
- Presione enter para seleccionar “Emmet: Actualizar etiqueta”
- Ingrese la nueva etiqueta
- Presione enter
La etiqueta de apertura y cierre se actualiza a la nueva.