Poradniki po polsku

Automatyczna zmiana nazw tagów HTML, JSX i Vue w VS Code

Zainstaluj darmowe rozszerzenie Auto Rename Tag & Close Tag Sync i zmień nazwę w tagu otwierającym albo zamykającym. Pasujący tag zmienia się, gdy piszesz. Zmiana nazwy to wbudowane w VS Code linked editing (editor.linkedEditing). Rozszerzenie włącza to ustawienie dla swoich języków i znajduje pasujący tag w HTML, JSX, TSX, Vue, Svelte, Astro, PHP, Blade, Twig, XML, Markdown i innych, więc jedno Undo przywraca oba tagi. Zmiana nazwy, automatyczne domykanie i ramka wokół pasującego tagu są za darmo. Zovo Pro (19 USD jednorazowo) dodaje Rename Tag in All Files i Check Unclosed Tags in All Files, a każde z tych narzędzi możesz uruchomić 3 razy za darmo.

Za darmo, licencja MIT. ID rozszerzenia zovo.zovo-auto-rename-tag, wersja 0.2.3.

Ten poradnik przeczytasz też w wersji English, Deutsch, Español, Français, Italiano, 日本語, Português (Brasil), 简体中文.

Kroki w VS Code

1. Zainstaluj Tag Auto Rename & Close Tag Sync z Marketplace albo naciśnij Ctrl+P (Cmd+P w macOS) i uruchom ext install zovo.zovo-auto-rename-tag.
2. Otwórz plik HTML, JSX, TSX, Vue, Svelte, PHP albo inny szablon i zmień nazwę w tagu otwierającym. Tag zamykający zmienia się, gdy piszesz, i odwrotnie.
3. Wpisz > po tagu otwierającym, a tag zamykający pojawi się za kursorem. Wpisz </, a nazwa otwartego elementu uzupełni się sama.
4. Ustaw kursor na tagu, a oba tagi dostaną ramkę w kolorach nawiasów z twojego motywu.
5. Kliknij prawym przyciskiem w edytorze, żeby użyć „Go to Matching Tag” albo „Select Tag Content”. Żeby wpisać nową nazwę w osobnym polu, uruchom z Command Palette polecenie „Tag Sync: Rename Tag Pair…”.
6. Kliknij element Tags na pasku stanu, żeby zobaczyć, co jest włączone dla tego pliku, albo wyłączyć rozszerzenie dla jednego języka. Jeśli widzisz „Tags: rename off”, kliknij go, żeby włączyć zmianę nazwy dla tego języka.

Co jest za darmo, a co dodaje Zovo Pro

Za darmo są zmiana nazwy w trakcie pisania, automatyczne domykanie po > i </, ramka wokół pasującego tagu, Go to Matching Tag, Select Tag Content, Rename Tag Pair… i menu na pasku stanu. Rozszerzenie nie ma reklam, nie wymaga logowania i działa offline.

To narzędzie zmienia nazwę komponentu albo elementu naraz we wszystkich plikach z tagami w obszarze roboczym, na przykład <Button> na <UiButton> w każdym pliku .tsx, .vue, .html i w szablonach. Zmieniają się tylko nazwy tagów, nigdy tekst, atrybuty, stringi ani komentarze. Najpierw widzisz liczbę zmian, „Preview first” otwiera podgląd refaktoryzacji w VS Code, a jedno Undo przywraca wszystkie pliki.

Narzędzie Rename Tag in All Files (Zovo Pro)

7. Otwórz folder projektu w VS Code. Narzędzie wymaga otwartego folderu.
8. Uruchom z Command Palette polecenie „Tag Sync: Rename Tag in All Files… (Pro)” albo kliknij prawym przyciskiem plik .html, .htm, .vue, .jsx, .tsx albo .svelte w widoku Explorer i wybierz „Zovo Pro: Rename Tag in All Files”.
9. Wpisz nazwę tagu tak, jak jest zapisana w plikach (na przykład Button), a potem nową nazwę.
10. Wybierz „Rename” albo „Preview first”, żeby sprawdzić zmiany w podglądzie refaktoryzacji. Pliki, które nie były otwarte, zostają zmienione, ale nie zapisane. File > Save All je zapisuje, a Undo je przywraca.

Rename Tag in All Files działa 3 razy na twoim komputerze, zanim poprosi o licencję. Przy otwieraniu pliku nie ma wyskakujących okienek ani odliczania.

Zovo Pro kosztuje 19 USD jednorazowo. To nie jest subskrypcja. Licencja włącza narzędzia Pro we wszystkich rozszerzeniach Zovo, nie tylko w Tag Auto Rename & Close Tag Sync. Po płatności kartą (Stripe) klucz licencyjny pojawi się na następnej stronie. W VS Code uruchom z Command Palette polecenie „Zovo Pro: Enter Zovo Pro license key” i wklej klucz. Klucz jest sprawdzany na twoim komputerze, bez połączenia z siecią. Przez GitHub Sponsors wybierz poziom "$19 one time", a potem uruchom „Zovo Pro: I already paid: unlock with GitHub Sponsors”.

Zespół 5 osób płaci 59 USD jednorazowo (kartą). Wszystkie zasady i narzędzia Pro opisuje strona Zovo Pro (po angielsku).

Kroki w Cursor, Windsurf lub VSCodium

1. Otwórz widok Extensions skrótem Ctrl+Shift+X (Cmd+Shift+X w macOS).
2. Wyszukaj zovo.zovo-auto-rename-tag i kliknij Install. Cursor, Windsurf i VSCodium instalują rozszerzenia z Open VSX, gdzie to rozszerzenie ma nazwę zovo/zovo-auto-rename-tag.
3. Jeśli edytor nie ma galerii rozszerzeń, pobierz plik .vsix ze strony Open VSX i uruchom „Extensions: Install from VSIX...”.
4. Dalej wszystko działa tak samo jak w VS Code.

Co otwiera Tag Auto Rename & Close Tag Sync

• Zmiana nazwy w HTML, JSX i TSX, Vue, Svelte, Astro, PHP, Blade, Twig, Jinja, Nunjucks, Liquid, ERB, EJS, Handlebars, XML, SVG i Markdown.
• Tagi puste (void), takie jak br, img, input, meta i hr, nigdy nie są parowane ani domykane.
• W plikach .tsx tagiem jest tylko prawdziwy JSX. Porównania typu a < b && c > d i typy generyczne jak useState<string>() zostają nietknięte, a pliki .ts są pomijane.
• Komentarze, stringi, zawartość <script> i <style> oraz bloki {{ }}, {% %}, <?php ?> i <% %> są pomijane.
• Nowe, niezapisane pliki działają, gdy tylko mają ustawiony język.

Czego nie robi

• W JSX i TSX tagi domyka sam TypeScript, więc to rozszerzenie zostawia mu domykanie. Tag domknięty przez TypeScript to osobny krok Undo.
• Gdy zainstalowane jest rozszerzenie Vue, Svelte, Astro albo Red Hat XML, to ono domyka tagi w swoim języku, a to rozszerzenie się nie wtrąca.
• Pliki większe niż 1 MB albo dłuższe niż 50 000 linii nie mają zmiany nazwy na żywo, domykania ani podświetlania (ustawienia zovoTags.maxFileSizeKB i zovoTags.maxFileLines). Pasek stanu o tym informuje, a polecenia nadal działają.
• Tagi zapisane w wyrażeniach {...} w Svelte i Astro nie są zmieniane.
• Jeśli włączone jest też starsze rozszerzenie Auto Rename Tag albo Auto Close Tag, oba mogą edytować ten sam tag. Zostaw tylko jedno.

Pytania

Więcej informacji

Więcej szczegółów i inne możliwości znajdziesz w angielskiej wersji poradnika. Wszystkie funkcje i ustawienia opisuje strona Tag Auto Rename & Close Tag Sync (po angielsku).

Fakty sprawdzone 12 listopada 2026 na wersji dostępnej w Marketplace.