在 VS Code 中自动重命名 HTML、JSX 和 Vue 标签
安装免费的 Auto Rename Tag & Close Tag Sync 扩展，然后修改开始标签或结束标签的名字，配对的标签会随着输入同步改变。重命名用的是 VS Code 自带的 linked editing（editor.linkedEditing）。扩展为它支持的语言打开这个设置，并在 HTML、JSX、TSX、Vue、Svelte、Astro、PHP、Blade、Twig、XML、Markdown 等语言里找到配对标签，所以撤销一次就能把两个标签一起还原。重命名、自动闭合和配对标签框都免费。Zovo Pro（一次性 19 美元）增加 Rename Tag in All Files 和 Check Unclosed Tags in All Files，每个工具可以免费试用 3 次。
免费，MIT 许可证。扩展 ID zovo.zovo-auto-rename-tag，版本 0.2.3。
其他语言版本 English · Deutsch · Español · Français · Italiano · 日本語 · Polski · Português (Brasil)
在 VS Code 中的步骤
- 从 Marketplace 安装 Tag Auto Rename & Close Tag Sync，或者按 Ctrl+P（macOS 上按 Cmd+P）后运行
ext install zovo.zovo-auto-rename-tag。 - 打开 HTML、JSX、TSX、Vue、Svelte、PHP 或其他模板文件，修改开始标签的名字，闭合标签会随输入同步改变，反过来也一样。
- 在开始标签后输入
>，闭合标签会出现在光标后面。输入</，当前未闭合元素的名字会自动填上。 - 把光标放在标签上，两个标签都会出现一个边框，颜色用的是当前主题的括号颜色。
- 在编辑器里右键点击，可以找到 “Go to Matching Tag” 和 “Select Tag Content”。如果想在输入框里输入新名字，从 Command Palette 运行 “Tag Sync: Rename Tag Pair…”。
- 点击状态栏里的 Tags 项，可以查看当前文件开启了哪些功能，或者对某种语言关闭这个扩展。如果显示 “Tags: rename off”，点击它即可为该语言打开重命名。
哪些免费，Zovo Pro 增加什么
随输入重命名、输入 > 和 </ 时自动闭合、配对标签框、Go to Matching Tag、Select Tag Content、Rename Tag Pair… 和状态栏菜单都免费。没有广告，不需要登录，离线可用。
它一次性重命名工作区里所有标签文件中的某个组件或元素，例如把每个 .tsx、.vue、.html 和模板文件里的 <Button> 改成 <UiButton>。只改标签名，不会改动文本、属性、字符串或注释。执行前会先显示数量，“Preview first” 会打开 VS Code 的重构预览，撤销一次就能把所有文件还原。
使用 Rename Tag in All Files（Zovo Pro）
- 在 VS Code 中打开项目文件夹。这个工具需要打开一个文件夹。
- 从 Command Palette 运行 “Tag Sync: Rename Tag in All Files… (Pro)”，或者在 Explorer 中右键点击
.html、.htm、.vue、.jsx、.tsx或.svelte文件，选择 “Zovo Pro: Rename Tag in All Files”。 - 输入要重命名的标签，写法和文件里一致（例如
Button），再输入新名字。 - 选择 “Rename”，或者选择 “Preview first” 在重构预览里检查改动。原本没打开的文件会被修改但不会保存，用 File > Save All 保存，或者用撤销还原。
Rename Tag in All Files 在你的电脑上可以免费用 3 次，之后才需要许可证。没有弹窗，也没有倒计时。
Zovo Pro 一次性付费 19 美元，不是订阅。许可证会启用所有 Zovo 扩展里的 Pro 工具，不只是 Tag Auto Rename & Close Tag Sync。用银行卡（Stripe）付款后，许可证密钥会显示在下一个页面上。在 VS Code 的 Command Palette 里运行 “Zovo Pro: Enter Zovo Pro license key”，粘贴密钥即可。密钥在你的电脑上本地校验，不联网。通过 GitHub Sponsors 付款时，选择 "$19 one time" 档位，然后运行 “Zovo Pro: I already paid: unlock with GitHub Sponsors”。
5 人团队一次性付费 59 美元（用银行卡付款）。 全部规则和 Pro 工具见 Zovo Pro 页面（英文）。
在 Cursor、Windsurf 或 VSCodium 中的步骤
- 按 Ctrl+Shift+X（macOS 上按 Cmd+Shift+X）打开 Extensions 视图。
- 搜索
zovo.zovo-auto-rename-tag，点击 Install。Cursor、Windsurf 和 VSCodium 从 Open VSX 安装扩展，这个扩展在那里的名称是zovo/zovo-auto-rename-tag。 - 如果编辑器没有扩展商店，就在 Open VSX 页面下载 .vsix 文件，然后运行 “Extensions: Install from VSIX...”。
- 之后的用法和 VS Code 里一样。
Tag Auto Rename & Close Tag Sync 能做什么
- 支持在 HTML、JSX 和 TSX、Vue、Svelte、Astro、PHP、Blade、Twig、Jinja、Nunjucks、Liquid、ERB、EJS、Handlebars、XML、SVG 和 Markdown 中重命名。
br、img、input、meta和hr这类空元素不会被配对，也不会被自动闭合。- 在
.tsx中只有真正的 JSX 才算标签。a < b && c > d这样的比较和useState<string>()这样的泛型不会被改动，.ts文件也不会被处理。 - 注释、字符串、
<script>和<style>的内容，以及{{ }}、{% %}、<?php ?>和<% %>块都会被跳过。 - 新建的未保存文件只要设置了语言就能用。
它做不到的事
- 在 JSX 和 TSX 中，TypeScript 会自己闭合标签，所以这个扩展把闭合交给它。TypeScript 插入的闭合标签是单独的一步撤销。
- 如果装了 Vue、Svelte、Astro 或 Red Hat XML 扩展，在对应语言里由那个扩展负责闭合标签，这个扩展不介入。
- 超过 1 MB 或 50,000 行的文件不会实时重命名、闭合或高亮（设置项
zovoTags.maxFileSizeKB和zovoTags.maxFileLines）。状态栏会提示这一点，命令仍然可用。 - 写在 Svelte 或 Astro
{...}表达式里的标签不会被重命名。 - 如果同时开着旧的 Auto Rename Tag 或 Auto Close Tag 扩展，两者可能同时修改同一个标签，只保留其中一个即可。
常见问题
它和 editor.linkedEditing 设置有什么区别？
扩展用 editor.linkedEditing 来完成重命名。它为支持的每种语言打开这个设置，并在这些语言中找到配对标签，从 HTML、Vue 到 PHP、Twig、XML 和 JSX。它还会自动闭合标签，给配对标签加边框，并提供 Go to Matching Tag 和 Select Tag Content。如果你自己关掉了 editor.linkedEditing，状态栏会显示 “Tags: rename off”，点一下就能为该语言重新打开。
撤销还正常吗？
正常。你的修改和配对标签的改动是同一步撤销，因为重命名用的是 VS Code 的 linked editing。自动闭合插入的闭合标签和你输入的 > 算同一步撤销，JSX 和 TSX 除外，那里由 TypeScript 闭合标签。
它免费吗？
免费。重命名、自动闭合、配对标签框和编辑器命令都免费。Rename Tag in All Files 和 Check Unclosed Tags in All Files 是 Zovo Pro 工具，各可免费试用 3 次，之后需要 Zovo Pro，一次性付费，适用于所有 Zovo 扩展。
能在 Cursor 中使用吗？
可以。Cursor、Windsurf 和 VSCodium 从 Open VSX 安装它，名称是 zovo/zovo-auto-rename-tag。
更多信息
英文版指南里有更多细节和其他方案。每个功能和设置都写在 Tag Auto Rename & Close Tag Sync 的页面上（英文）。
内容已于 2026 年 11 月 12 日对照 Marketplace 当前版本核实。