Guias em português

Renomeie tags HTML, JSX e Vue automaticamente no VS Code

Instale a extensão grátis Auto Rename Tag & Close Tag Sync e mude o nome em uma tag de abertura ou de fechamento. A tag correspondente muda enquanto você digita. A renomeação é o linked editing do próprio VS Code (editor.linkedEditing). A extensão liga essa configuração nas linguagens que ela atende e encontra a tag correspondente em HTML, JSX, TSX, Vue, Svelte, Astro, PHP, Blade, Twig, XML, Markdown e outras, então um único undo traz as duas tags de volta. A renomeação, o fechamento automático e a caixa na tag correspondente são grátis, e o Zovo Pro (19 USD, pagos uma vez) acrescenta Rename Tag in All Files e Check Unclosed Tags in All Files, com 3 usos grátis em cada ferramenta.

Grátis, licença MIT. ID da extensão zovo.zovo-auto-rename-tag, versão 0.2.3.

Este guia também está em English · Deutsch · Español · Français · Italiano · 日本語 · Polski · 简体中文

Passo a passo no VS Code

1. Instale o Tag Auto Rename & Close Tag Sync pelo Marketplace, ou aperte Ctrl+P (Cmd+P no macOS) e rode ext install zovo.zovo-auto-rename-tag.
2. Abra um arquivo HTML, JSX, TSX, Vue, Svelte, PHP ou de outro template e mude o nome em uma tag de abertura. A tag de fechamento muda enquanto você digita, e o contrário também funciona.
3. Digite > depois de uma tag de abertura e a tag de fechamento aparece depois do cursor. Digite </ e o nome do elemento aberto é preenchido.
4. Coloque o cursor em uma tag e as duas tags ganham uma caixa nas cores de colchetes do seu tema.
5. Clique com o botão direito no editor para usar "Go to Matching Tag" e "Select Tag Content". Para digitar um nome novo em uma caixa, rode "Tag Sync: Rename Tag Pair…" pela Command Palette.
6. Clique no item Tags da barra de status para ver o que está ligado neste arquivo, ou para desligar a extensão em uma linguagem. Se ele mostrar "Tags: rename off", clique nele para ligar a renomeação nessa linguagem.

O que é grátis e o que o Zovo Pro acrescenta

São grátis a renomeação enquanto você digita, o fechamento automático com > e </, a caixa na tag correspondente, Go to Matching Tag, Select Tag Content, Rename Tag Pair… e o menu da barra de status. Não tem anúncios, não pede login e funciona offline.

Esta ferramenta renomeia um componente ou elemento em todos os arquivos com tags do workspace de uma vez, por exemplo <Button> para <UiButton> em todos os arquivos .tsx, .vue, .html e de template. Só os nomes de tag mudam, nunca texto, atributos, strings ou comentários. Primeiro você vê uma contagem, "Preview first" abre o preview de refatoração do VS Code, e um único Undo volta todos os arquivos ao que eram.

Como usar Rename Tag in All Files (Zovo Pro)

7. Abra a pasta do projeto no VS Code. A ferramenta precisa de uma pasta aberta.
8. Rode "Tag Sync: Rename Tag in All Files… (Pro)" pela Command Palette, ou clique com o botão direito em um arquivo .html, .htm, .vue, .jsx, .tsx ou .svelte no Explorer e escolha "Zovo Pro: Rename Tag in All Files".
9. Digite a tag que vai ser renomeada do jeito que ela está escrita nos arquivos (por exemplo Button) e depois o novo nome.
10. Escolha "Rename", ou "Preview first" para conferir as mudanças no preview de refatoração. Os arquivos que não estavam abertos são alterados, mas não são salvos. File > Save All grava esses arquivos, e Undo volta tudo ao que era.

Rename Tag in All Files funciona 3 vezes no seu computador antes de pedir uma licença. Não há janela pop-up nem contagem regressiva.

O Zovo Pro custa 19 USD, pagos uma vez só. Não é assinatura, e a licença libera as ferramentas Pro em todas as extensões Zovo, não só no Tag Auto Rename & Close Tag Sync. Depois do pagamento com cartão (Stripe), a chave de licença aparece na página seguinte. No VS Code, rode "Zovo Pro: Enter Zovo Pro license key" pela Command Palette e cole a chave. A chave é conferida no seu computador, sem acesso à rede. Pelo GitHub Sponsors, escolha o nível "$19 one time" e depois rode "Zovo Pro: I already paid: unlock with GitHub Sponsors".

Uma equipe de 5 pessoas paga 59 USD uma vez só (com cartão). Todas as regras e ferramentas Pro estão na página do Zovo Pro (em inglês).

Passo a passo no Cursor, Windsurf ou VSCodium

1. Abra a visão Extensions com Ctrl+Shift+X (Cmd+Shift+X no macOS).
2. Busque zovo.zovo-auto-rename-tag e clique em Install. Cursor, Windsurf e VSCodium instalam extensões do Open VSX, onde esta se chama zovo/zovo-auto-rename-tag.
3. Se o seu editor não tiver galeria, baixe o arquivo .vsix na página do Open VSX e rode "Extensions: Install from VSIX...".
4. Depois disso, tudo funciona como no VS Code.

O que o Tag Auto Rename & Close Tag Sync faz

• Renomeação em HTML, JSX e TSX, Vue, Svelte, Astro, PHP, Blade, Twig, Jinja, Nunjucks, Liquid, ERB, EJS, Handlebars, XML, SVG e Markdown.
• Tags void como br, img, input, meta e hr nunca ganham par nem fechamento.
• Em .tsx, só JSX de verdade conta como tag. Comparações como a < b && c > d e genéricos como useState<string>() ficam como estão, e arquivos .ts não são tocados.
• Comentários, strings, o conteúdo de <script> e <style> e blocos {{ }}, {% %}, <?php ?> e <% %> são ignorados.
• Arquivos novos ainda não salvos funcionam assim que têm uma linguagem definida.

O que ele não faz

• Em JSX e TSX, o próprio TypeScript fecha as tags, então esta extensão deixa o fechamento com ele. A tag fechada pelo TypeScript é um passo de undo separado.
• Quando a extensão Vue, Svelte, Astro ou Red Hat XML está instalada, ela fecha as tags na linguagem dela e esta extensão não interfere.
• Arquivos acima de 1 MB ou 50.000 linhas ficam sem renomeação, fechamento e destaque ao vivo (configurações zovoTags.maxFileSizeKB e zovoTags.maxFileLines). A barra de status avisa, e os comandos continuam funcionando.
• Tags escritas dentro de expressões {...} do Svelte ou do Astro não são renomeadas.
• Se a extensão antiga Auto Rename Tag ou Auto Close Tag também estiver ligada, as duas podem editar a mesma tag. Mantenha só uma.

Perguntas frequentes

Saiba mais

O guia em inglês traz mais detalhes e outras opções. Cada recurso e configuração está na página do Tag Auto Rename & Close Tag Sync (em inglês).

Informações conferidas em 12 de novembro de 2026 na versão atual do Marketplace.