Zovo ガイド

HTML・JSX・Vue のタグを対で自動リネームする

Tag Auto Rename & Close Tag Sync を入れると、開始タグの名前を書き換えたときに対になる閉じタグも一緒に変わり、> を入力すると閉じタグが自動で入ります。入力中のリネームと自動クローズ、対タグのハイライト、Rename Tag Pair… などは無料です。Zovo Pro(USD 19 の買い切り)を使うと、プロジェクト全体でタグ名を一括変更するツールと閉じ忘れのタグを探すツールが加わり、それぞれ 3 回まで無料で試せます。

無料、MIT ライセンス。 Extension ID zovo.zovo-auto-rename-tag.

VS Code での手順

1. Marketplace から Tag Auto Rename & Close Tag Sync をインストールします。Ctrl+P (macOS では Cmd+P) を押して ext install zovo.zovo-auto-rename-tag を実行しても入ります。
2. HTML、Vue、JSX/TSX、Svelte、Astro、PHP などのファイルを開き、開始タグの名前を書き換えます。対になるタグも同時に変わり、編集と対タグの変更は 1 回の Undo でまとめて元に戻せます。
3. 開始タグの最後で > を入力すると、閉じタグが自動で入ります。JSX と TSX では TypeScript が閉じタグを入れるので、この拡張機能はその処理を TypeScript に任せます。
4. カーソルのあるタグと対のタグは枠で強調表示されます。右クリックメニューの「Go to Matching Tag」で対のタグへ移動でき、「Select Tag Content」を繰り返すと選択範囲が要素全体、さらに親要素へと広がります。
5. 開始タグと閉じタグの名前をまとめて変えたいときは、コマンドパレットで「Tag Sync: Rename Tag Pair…」を実行します。
6. 特定の言語だけで止めたいときは、ステータスバーの「Tags」をクリックして、その言語をオフにします。

Cursor、Windsurf、VSCodium の場合

これらのエディターは Open VSX から拡張機能を入れます。Extensions ビュー (Ctrl+Shift+X) で zovo.zovo-auto-rename-tag を検索して Install を押してください。Open VSX のページは zovo/zovo-auto-rename-tag です。あとは VS Code と同じ手順で使えます。

無料でできること

入力中のタグのリネーム、自動クローズ、対タグのハイライト、Go to Matching Tag、Select Tag Content、Rename Tag Pair… は無料です。br、img、input、meta、hr などの void タグは対にも閉じタグにもならず、.ts ファイルには手を付けません。コメント、文字列、script と style の中身、{{ }} や {% %} などのテンプレート部分、PHP のブロックはスキップされます。サインインは不要で、ネットワーク通信やテレメトリもありません。

Zovo Pro で追加されるもの

Rename Tag in All Files は、コンポーネントや要素の名前をプロジェクト全体で一度に変更します。たとえば Button を UiButton に変えると、すべての .tsx、.vue、.html やテンプレートファイルのタグ名だけが書き換わり、テキスト、属性、文字列、コメントには触れません。実行前に変更件数が表示され、すべてのファイルを 1 回の Undo で元に戻せるので、検索と置換で一つずつ確かめるより安全で速く済みます。もう 1 つの Pro ツール Check Unclosed Tags in All Files は、閉じていないタグ、開始タグのない閉じタグ、名前の食い違う JSX のペアをファイル名と行番号付きで Problems パネルに一覧表示し、CSV に保存できます。

Rename Tag in All Files の使い方

7. コマンドパレットで「Tag Sync: Rename Tag in All Files… (Pro)」を実行します。.html、.vue、.jsx、.tsx などのファイルを右クリックして「Zovo Pro: Rename Tag in All Files」を選んでも始められます。
8. 変更するタグ名と新しい名前を順に入力すると、変更される件数が表示されます。
9. 「Rename」ですぐに変更するか、「Preview first」で VS Code のリファクタリングプレビューを確認してから適用します。

Rename Tag in All Files はライセンスなしで 3 回まで使えます。ファイルを開いたときにポップアップが出たり、残り日数が表示されたりすることはありません。

Zovo Pro は USD 19 の買い切りです。サブスクリプションではなく、すべての Zovo 拡張機能の Pro ツールが使えるようになります。カード (Stripe) で支払うと、次のページにライセンスキーが表示されます。VS Code のコマンドパレットで "Enter Zovo Pro license key" を実行し、キーを貼り付けてください。キーはネットワークを使わずに手元のパソコンで確認されます。

5 人までのチーム向けは USD 59 の買い切りで、カードで支払えます。ルールと Pro ツールの一覧は Zovo Pro のページ (英語) にあります。

できないこと

• 1 MB または 50,000 行を超えるファイルでは、入力中のリネーム、クローズ、ハイライトは動きません(zovoTags.maxFileSizeKB、zovoTags.maxFileLines で変更できます)。コマンドは使えます。
• JSX と TSX の閉じタグは TypeScript が入れます。Vue、Svelte、Astro、Red Hat XML の拡張機能が入っている場合は、その言語では各拡張機能が閉じタグを入れます。
• Svelte や Astro の {...} 式の中にあるタグはリネームされません。
• キーボードショートカットは登録されていません。コマンドパレットか右クリックメニューから使います。

よくある質問

すべての機能と設定は Tag Auto Rename & Close Tag Sync のページ (英語) にあります。

ほかのガイド

• VS Code で音声ファイルを再生・解析する
• Claude Code と Codex の履歴を VS Code で読む
• DXF 図面を VS Code で表示する
• VS Code で SQLite データベースを編集する
• EXE・DLL・ELF を VS Code で解析する
• VS Code でフォントファイルをプレビューする

拡張機能のバージョン 0.2.3 で確認しました (2026-11-12)。