Zovo-Anleitungen

Tags in VS Code automatisch umbenennen

Mit Tag Auto Rename & Close Tag Sync ändern Sie den Namen eines öffnenden Tags, und der schließende Tag ändert sich beim Tippen mit. Beides nehmen Sie mit einem einzigen Rückgängig-Schritt zurück. Umbenennen beim Tippen, automatisches Schließen, die Hervorhebung des passenden Tags und „Rename Tag Pair…“ sind kostenlos. Zovo Pro (einmalig 19 USD) ergänzt zwei Werkzeuge für das ganze Projekt, Rename Tag in All Files und Check Unclosed Tags in All Files, und jedes davon können Sie dreimal kostenlos ausprobieren.

In VS Code installierenMarketplace-SeiteOpen VSX (Cursor, Windsurf, VSCodium)

Kostenlos, MIT-Lizenz. Extension ID zovo.zovo-auto-rename-tag.

Schritte in VS Code

  1. Installieren Sie Tag Auto Rename & Close Tag Sync aus dem Marketplace, oder drücken Sie Ctrl+P (Cmd+P unter macOS) und führen Sie ext install zovo.zovo-auto-rename-tag aus.
  2. Öffnen Sie eine HTML-, Vue-, JSX-, TSX-, Svelte-, Astro- oder PHP-Datei und ändern Sie den Namen eines öffnenden Tags. Der passende Tag ändert sich mit, und ein Rückgängig-Schritt nimmt beides zurück.
  3. Tippen Sie am Ende eines öffnenden Tags >, fügt die Erweiterung den schließenden Tag ein, etwa in HTML, Vue, Svelte, PHP, Blade, Twig, XML und Markdown. In JSX und TSX schließt TypeScript die Tags selbst, und die Erweiterung überlässt das TypeScript.
  4. Der Tag unter dem Cursor und sein Gegenstück werden mit einem Rahmen hervorgehoben. Im Kontextmenü springen Sie mit „Go to Matching Tag“ zum Gegenstück. „Select Tag Content“ vergrößert die Auswahl bei jedem Aufruf, erst auf das ganze Element, dann auf das übergeordnete.
  5. Um beide Tags gezielt umzubenennen, führen Sie in der Befehlspalette „Tag Sync: Rename Tag Pair…“ aus.
  6. Für eine einzelne Sprache schalten Sie die Erweiterung über den Eintrag „Tags“ in der Statusleiste aus.

In Cursor, Windsurf und VSCodium

Diese Editoren installieren Erweiterungen aus Open VSX. Öffnen Sie die Extensions-Ansicht (Ctrl+Shift+X), suchen Sie nach zovo.zovo-auto-rename-tag und klicken Sie auf Install. Die Seite auf Open VSX ist zovo/zovo-auto-rename-tag. Danach funktioniert alles wie in VS Code.

Was kostenlos ist

Kostenlos sind Umbenennen beim Tippen, automatisches Schließen, die Hervorhebung passender Tags, „Go to Matching Tag“, „Select Tag Content“ und „Rename Tag Pair…“. Leere Elemente wie br, img, input, meta und hr werden nie gepaart und nie geschlossen. Reine .ts-Dateien lässt die Erweiterung in Ruhe, und in .tsx gelten nur echte JSX-Elemente als Tags, nicht Vergleiche oder Typparameter wie bei useState. Kommentare, Zeichenketten, der Inhalt von script- und style-Blöcken sowie Vorlagen-Blöcke wie {{ }} und {% %} werden übersprungen. Neue, noch nicht gespeicherte Dateien funktionieren, sobald ihnen eine Sprache zugewiesen ist. Die Erweiterung arbeitet offline, ohne Konto und ohne Telemetrie.

Was Zovo Pro hinzufügt

Rename Tag in All Files benennt eine Komponente oder ein Element im ganzen Projekt auf einmal um, zum Beispiel Button in UiButton in allen .tsx-, .vue-, .html- und Vorlagendateien. Geändert werden nur Tag-Namen, nie Text, Attribute, Zeichenketten oder Kommentare. Vorher sehen Sie, wie viele Stellen betroffen sind, und „Preview first“ öffnet die Refactoring-Vorschau von VS Code. Ein einziges Rückgängig stellt alle Dateien wieder her. Das ist sicherer als Suchen und Ersetzen, bei dem Sie jeden Treffer selbst prüfen müssen. Das zweite Pro-Werkzeug, Check Unclosed Tags in All Files, listet nicht geschlossene und nicht geöffnete Tags sowie falsch gepaarte JSX-Tags mit Datei und Zeile in der Ansicht „Probleme“ auf, und Sie können die Liste als CSV speichern.

So funktioniert Rename Tag in All Files

  1. Führen Sie in der Befehlspalette „Tag Sync: Rename Tag in All Files… (Pro)“ aus, oder klicken Sie im Explorer mit der rechten Maustaste auf eine .html-, .vue-, .jsx- oder .tsx-Datei und wählen „Zovo Pro: Rename Tag in All Files“.
  2. Geben Sie den alten und den neuen Tag-Namen ein. Die Erweiterung zeigt an, wie viele Stellen sich ändern.
  3. Übernehmen Sie die Änderung direkt, oder prüfen Sie sie zuerst mit „Preview first“ in der Refactoring-Vorschau.

Rename Tag in All Files läuft 3 Mal kostenlos, danach braucht es eine Lizenz. Beim Öffnen einer Datei erscheint kein Pop-up, und es läuft kein Countdown.

Per Karte zahlen, einmalig USD 19

Zovo Pro kostet einmalig USD 19. Es ist kein Abo und schaltet die Pro-Werkzeuge in allen Zovo-Erweiterungen frei. Nach der Zahlung per Karte (Stripe) steht der Lizenzschlüssel auf der nächsten Seite. Führen Sie in VS Code "Enter Zovo Pro license key" aus der Command Palette aus und fügen Sie den Schlüssel ein. Der Schlüssel wird auf Ihrem Rechner geprüft, ohne Netzwerkzugriff.

Ein Team mit 5 Personen zahlt einmalig USD 59, ebenfalls per Karte. Alle Regeln und Pro-Werkzeuge stehen auf der Zovo-Pro-Seite (Englisch).

Was es nicht kann

Fragen

Ist die Erweiterung kostenlos?

Ja. Umbenennen beim Tippen, automatisches Schließen, die Hervorhebung und „Rename Tag Pair…“ sind kostenlos. Nur die beiden Werkzeuge für das ganze Projekt gehören zu Zovo Pro. Jedes davon können Sie dreimal kostenlos ausprobieren, und ein Versuch zählt nur, wenn das Werkzeug seine Arbeit abgeschlossen hat.

Funktioniert das auch in Cursor?

Ja. Cursor installiert Erweiterungen aus Open VSX. Suchen Sie in der Erweiterungsansicht nach zovo.zovo-auto-rename-tag und installieren Sie sie.

Ist das dieselbe Erweiterung wie Auto Rename Tag von formulahendry?

Nein, es ist eine andere Erweiterung. Sind die ältere Auto Rename Tag oder Auto Close Tag ebenfalls aktiv, weist die Statusleiste darauf hin.

Was tun, wenn das Umbenennen nicht funktioniert?

Wenn Sie editor.linkedEditing selbst ausgeschaltet haben, zeigt die Statusleiste „Tags: rename off“. Ein Klick darauf schaltet die Funktion für diese Sprache wieder ein.

Alle Funktionen und Einstellungen stehen auf der Seite von Tag Auto Rename & Close Tag Sync (Englisch).

Geprüft mit Version 0.2.3 der Erweiterung am 2026-11-12.