Rinominare in automatico i tag HTML, JSX e Vue in VS Code

Q: Che differenza c’è con l’impostazione editor.linkedEditing?

L’estensione usa editor.linkedEditing per la rinomina. Attiva questa impostazione per ogni linguaggio supportato e trova il tag corrispondente in ognuno, da HTML e Vue a PHP, Twig, XML e JSX. In più chiude i tag, disegna un riquadro intorno al tag corrispondente e aggiunge Go to Matching Tag e Select Tag Content. Se hai disattivato tu editor.linkedEditing, la barra di stato mostra "Tags: rename off" e un clic la riattiva per quel linguaggio.

Installa l’estensione gratuita Auto Rename Tag & Close Tag Sync e cambia il nome in un tag di apertura o di chiusura. Il tag corrispondente cambia mentre scrivi. La rinomina è il linked editing di VS Code (editor.linkedEditing). L’estensione attiva questa impostazione per i suoi linguaggi e trova il tag corrispondente in HTML, JSX, TSX, Vue, Svelte, Astro, PHP, Blade, Twig, XML, Markdown e altri, quindi un solo undo riporta indietro entrambi i tag. Rinomina, chiusura automatica e riquadro sul tag corrispondente sono gratis, e Zovo Pro (19 USD, una volta sola) aggiunge Rename Tag in All Files e Check Unclosed Tags in All Files, con 3 prove gratuite per ogni strumento.

Installa in VS Code Pagina del Marketplace Open VSX (Cursor, Windsurf, VSCodium)

Gratis, licenza MIT. ID dell’estensione zovo.zovo-auto-rename-tag, versione 0.2.3.

Questa guida è anche in English · Deutsch · Español · Français · 日本語 · Polski · Português (Brasil) · 简体中文

Rinomina di section in section-card in un file Vue. Il tag di chiusura cambia insieme, ed entrambi i tag hanno un riquadro.

Passaggi in VS Code

Installa Tag Auto Rename & Close Tag Sync dal Marketplace, oppure premi Ctrl+P (Cmd+P su macOS) ed esegui ext install zovo.zovo-auto-rename-tag.
Apri un file HTML, JSX, TSX, Vue, Svelte, PHP o un altro template e cambia il nome in un tag di apertura. Il tag di chiusura cambia mentre scrivi, e vale anche il contrario.
Scrivi > dopo un tag di apertura e il tag di chiusura compare dopo il cursore. Scrivi </ e il nome dell’elemento aperto viene completato.
Metti il cursore su un tag ed entrambi i tag ricevono un riquadro nei colori delle parentesi del tuo tema.
Fai clic destro nell’editor per "Go to Matching Tag" e "Select Tag Content". Per scrivere un nuovo nome in una casella, esegui "Tag Sync: Rename Tag Pair…" dalla Command Palette.
Fai clic sulla voce Tags nella barra di stato per vedere cosa è attivo per questo file, o per disattivare l’estensione per un linguaggio. Se mostra "Tags: rename off", fai clic per attivare la rinomina per quel linguaggio.

Cosa è gratis e cosa aggiunge Zovo Pro

Sono gratis la rinomina mentre scrivi, la chiusura automatica con > e </, il riquadro sul tag corrispondente, Go to Matching Tag, Select Tag Content, Rename Tag Pair… e il menu nella barra di stato. Non ha pubblicità, non richiede login e funziona offline.

Rinomina un componente o un elemento in tutti i file con tag del workspace in una volta, per esempio <Button> in <UiButton> in ogni file .tsx, .vue, .html e template. Cambiano solo i nomi dei tag, mai testo, attributi, stringhe o commenti. Prima vedi un conteggio, "Preview first" apre l’anteprima di refactoring di VS Code e un solo Undo riporta indietro tutti i file.

Usare Rename Tag in All Files (Zovo Pro)

Apri la cartella del progetto in VS Code. Lo strumento richiede una cartella aperta.
Esegui "Tag Sync: Rename Tag in All Files… (Pro)" dalla Command Palette, oppure fai clic destro su un file .html, .htm, .vue, .jsx, .tsx o .svelte nell’Explorer e scegli "Zovo Pro: Rename Tag in All Files".
Scrivi il tag da rinominare come compare nei file (per esempio Button), poi il nuovo nome.
Scegli "Rename", oppure "Preview first" per controllare le modifiche nell’anteprima di refactoring. I file che non erano aperti vengono modificati ma non salvati. File > Save All li salva, e Undo li riporta indietro.

Rename Tag in All Files funziona 3 volte sul tuo computer prima di chiedere una licenza. Non ci sono finestre a comparsa né conti alla rovescia.

Paga con carta, 19 USD una volta GitHub Sponsors PayPal

Zovo Pro costa 19 USD, una volta sola. Non è un abbonamento, e la licenza attiva gli strumenti Pro in tutte le estensioni Zovo, non solo in Tag Auto Rename & Close Tag Sync. Dopo il pagamento con carta (Stripe), la chiave di licenza compare nella pagina successiva. In VS Code esegui "Zovo Pro: Enter Zovo Pro license key" dalla Command Palette e incolla la chiave. La chiave viene controllata sul tuo computer, senza connessione di rete. Con GitHub Sponsors scegli il livello "$19 one time", poi esegui "Zovo Pro: I already paid: unlock with GitHub Sponsors".

Un team di 5 persone paga 59 USD una volta sola (con carta). Tutte le regole e tutti gli strumenti Pro sono nella pagina di Zovo Pro (in inglese).

Passaggi in Cursor, Windsurf o VSCodium

Apri la vista Extensions con Ctrl+Maiusc+X (Cmd+Maiusc+X su macOS).
Cerca zovo.zovo-auto-rename-tag e fai clic su Install. Cursor, Windsurf e VSCodium installano le estensioni da Open VSX, dove questa si chiama zovo/zovo-auto-rename-tag.
Se il tuo editor non ha una galleria, scarica il file .vsix dalla pagina di Open VSX ed esegui "Extensions: Install from VSIX...".
Da lì in poi funziona tutto come in VS Code.

Cosa fa Tag Auto Rename & Close Tag Sync

Rinomina in HTML, JSX e TSX, Vue, Svelte, Astro, PHP, Blade, Twig, Jinja, Nunjucks, Liquid, ERB, EJS, Handlebars, XML, SVG e Markdown.
I tag void come br, img, input, meta e hr non vengono mai accoppiati né chiusi.
Nei file .tsx solo il vero JSX è un tag. Confronti come a < b && c > d e generics come useState<string>() restano come sono, e i file .ts non vengono toccati.
Commenti, stringhe, il contenuto di <script> e <style> e i blocchi {{ }}, {% %}, <?php ?> e <% %> vengono saltati.
I nuovi file non salvati funzionano appena hanno un linguaggio.

Cosa non fa

In JSX e TSX i tag li chiude TypeScript, quindi lì questa estensione lascia fare a lui. La chiusura di TypeScript è un passo di undo separato.
Se è installata l’estensione Vue, Svelte, Astro o Red Hat XML, è quella a chiudere i tag nel suo linguaggio e questa non interviene.
I file oltre 1 MB o 50.000 righe non hanno rinomina, chiusura ed evidenziazione live (impostazioni zovoTags.maxFileSizeKB e zovoTags.maxFileLines). La barra di stato lo segnala, e i comandi funzionano comunque.
I tag scritti dentro le espressioni {...} di Svelte o Astro non vengono rinominati.
Se è attiva anche la vecchia estensione Auto Rename Tag o Auto Close Tag, entrambe possono modificare lo stesso tag. Tienine una sola.

Domande frequenti

Che differenza c’è con l’impostazione editor.linkedEditing?

L’estensione usa editor.linkedEditing per la rinomina. Attiva questa impostazione per ogni linguaggio supportato e trova il tag corrispondente in ognuno, da HTML e Vue a PHP, Twig, XML e JSX. In più chiude i tag, disegna un riquadro intorno al tag corrispondente e aggiunge Go to Matching Tag e Select Tag Content. Se hai disattivato tu editor.linkedEditing, la barra di stato mostra "Tags: rename off" e un clic la riattiva per quel linguaggio.

L’undo funziona ancora?

Sì. La tua modifica e quella al tag corrispondente sono un unico passo di undo, perché la rinomina usa il linked editing di VS Code. Un tag di chiusura aggiunto in automatico entra nel passo di undo del > che hai scritto, tranne in JSX e TSX, dove i tag li chiude TypeScript.

È gratis?

Sì. Rinomina, chiusura automatica, riquadro sul tag corrispondente e i comandi dell’editor sono gratis. Rename Tag in All Files e Check Unclosed Tags in All Files sono strumenti Zovo Pro con 3 prove gratuite ciascuno. Dopo serve Zovo Pro, 19 USD una volta sola per tutte le estensioni Zovo.

Funziona in Cursor?

Sì. Cursor, Windsurf e VSCodium la installano da Open VSX come zovo/zovo-auto-rename-tag.

Per saperne di più

La guida in inglese ha più dettagli e altre opzioni. Ogni funzione e impostazione è descritta nella pagina di Tag Auto Rename & Close Tag Sync (in inglese).

Dati verificati il 12 novembre 2026 sulla versione attuale del Marketplace.