Guías de Zovo

Renombrar y cerrar etiquetas en VS Code

Instala Tag Auto Rename & Close Tag Sync y edita el nombre de una etiqueta de apertura o de cierre: la otra cambia al mismo tiempo, y todo se deshace con un solo Deshacer. Renombrar al escribir, cerrar etiquetas, resaltar la pareja y “Rename Tag Pair…” son gratis en HTML, JSX y TSX, Vue, Svelte, Astro, PHP, Blade, Twig, Jinja, ERB, Handlebars, XML, SVG y Markdown. Zovo Pro (USD 19, un solo pago) añade dos herramientas para todo el proyecto, y puedes probar cada una 3 veces gratis.

Gratis, licencia MIT. Extension ID zovo.zovo-auto-rename-tag.

Pasos en VS Code

1. Instala Tag Auto Rename & Close Tag Sync desde el Marketplace, o pulsa Ctrl+P (Cmd+P en macOS) y ejecuta ext install zovo.zovo-auto-rename-tag.
2. Abre un archivo HTML, Vue, JSX o de otro de los lenguajes admitidos y cambia el nombre de una etiqueta. La etiqueta pareja se actualiza mientras escribes, y tu cambio y el de la pareja forman un único paso de deshacer.
3. Escribe una etiqueta de apertura: al cerrarla, la etiqueta de cierre aparece sola. Si escribes el inicio de una etiqueta de cierre, se completa el nombre del elemento abierto. En JSX y TSX es TypeScript quien cierra las etiquetas.
4. Coloca el cursor sobre una etiqueta para ver su pareja recuadrada con los colores de corchetes de tu tema.
5. Haz clic derecho en el editor y elige “Go to Matching Tag” para saltar a la pareja, o “Select Tag Content” para seleccionar el contenido; si lo repites, la selección crece al elemento completo y luego a su padre.
6. Para cambiar el nombre de las dos etiquetas desde un cuadro de texto, ejecuta “Rename Tag Pair…” en la paleta de comandos. El elemento Tags de la barra de estado muestra qué está activo en el archivo y te permite desactivar la extensión para un lenguaje.

En Cursor, Windsurf y VSCodium

Estos editores instalan extensiones desde Open VSX. Abre la vista Extensions (Ctrl+Shift+X), busca zovo.zovo-auto-rename-tag y pulsa Install. Su página en Open VSX es zovo/zovo-auto-rename-tag. Después se usa igual que en VS Code.

Qué es gratis

Todo lo que necesitas mientras escribes es gratis: renombrar la etiqueta pareja, cerrar etiquetas, resaltar la pareja, “Go to Matching Tag”, “Select Tag Content” y “Rename Tag Pair…”. Las etiquetas vacías como br, img, input, meta o hr nunca se emparejan ni se cierran. Los archivos .ts no se tocan, y en .tsx los genéricos y las comparaciones no cuentan como etiquetas. El escáner ignora comentarios, cadenas, el contenido de los bloques script y style, y los bloques de plantilla de Twig, Jinja, PHP y ERB. Los archivos nuevos sin guardar funcionan en cuanto tienen un lenguaje asignado. No hay peticiones de red, telemetría ni cuenta.

Qué añade Zovo Pro

Rename Tag in All Files cambia el nombre de un componente o elemento en todo el proyecto de una vez, por ejemplo Button por UiButton en todos los archivos .tsx, .vue, .html y de plantillas. Solo cambian los nombres de las etiquetas, nunca el texto, los atributos, las cadenas ni los comentarios. Antes de aplicar el cambio ves cuántas etiquetas se van a modificar, y “Preview first” abre la vista previa de refactorización de VS Code. Un solo Deshacer restaura todos los archivos. Es más seguro que buscar y reemplazar, donde tienes que revisar cada coincidencia a mano. La otra herramienta Pro, Check Unclosed Tags in All Files, lista en el panel Problemas, con archivo y línea, las etiquetas abiertas sin cerrar, las de cierre sin apertura y las parejas JSX con nombres distintos, y puedes guardar la lista como CSV.

Cómo se usa Rename Tag in All Files

7. Ejecuta “Tag Sync: Rename Tag in All Files… (Pro)” en la paleta de comandos, o haz clic derecho en un archivo .html, .vue, .jsx o .tsx en el Explorador y elige “Zovo Pro: Rename Tag in All Files”.
8. Escribe el nombre de la etiqueta tal como aparece en los archivos y después el nombre nuevo. La extensión te muestra cuántas etiquetas cambiarán.
9. Elige “Rename” para aplicar el cambio o “Preview first” para revisarlo antes en la vista previa de refactorización.

Rename Tag in All Files funciona 3 veces gratis antes de pedir una licencia. Al abrir un archivo no aparece ninguna ventana emergente ni cuenta atrás.

Zovo Pro cuesta USD 19 en un solo pago. No es una suscripción y activa las herramientas Pro en todas las extensiones de Zovo. Después de pagar con tarjeta (Stripe), la clave de licencia aparece en la página siguiente. En VS Code, ejecuta "Enter Zovo Pro license key" desde la Command Palette y pega la clave. La clave se comprueba en tu equipo, sin conexión a la red.

Un equipo de 5 personas paga USD 59 en un solo pago, también con tarjeta. Todas las reglas y herramientas Pro están en la página de Zovo Pro (en inglés).

Lo que no hace

• En archivos de más de 1 MB o de más de 50.000 líneas se desactivan el renombrado al escribir, el cierre y el resaltado (zovoTags.maxFileSizeKB, zovoTags.maxFileLines). Los comandos siguen funcionando.
• En JSX y TSX cierra las etiquetas TypeScript. Si tienes instalada la extensión de Vue, Svelte, Astro o la de XML de Red Hat, esa es la que cierra las etiquetas en su lenguaje.
• Las etiquetas escritas dentro de expresiones entre llaves de Svelte y Astro no se renombran, y en .tsx algunas expresiones de tipo genérico se leen como genéricos y no como JSX.
• La extensión no añade atajos de teclado. Usa la paleta de comandos o el menú contextual.

Preguntas

Todas las funciones y ajustes están en la página de Tag Auto Rename & Close Tag Sync (en inglés).

Otras guías

• Escuchar audio en VS Code y medir LUFS
• Historial de Claude Code y Codex en VS Code
• Ver archivos DXF en VS Code
• Editar bases de datos SQLite en VS Code
• Ver binarios ELF, PE y Mach-O en VS Code
• Previsualizar fuentes en VS Code

Comprobado con la versión 0.2.3 de la extensión el 2026-11-12.