VSCode的Auto Rename Tag：自动重命名配对的HTML/XML标签

Auto Rename Tag 扩展未启用或配置异常会导致 HTML/XML 文件开始标签修改后结束标签不同步更新。需依次启用扩展、检查 editor.autoRenameTag 设置为 true、确认文件语言模式为 HTML/XML、禁用冲突扩展、重载窗口刷新缓存。

如果您在 VSCode 中编辑 HTML 或 XML 文件时，修改开始标签但结束标签未同步更新，则可能是 Auto Rename Tag 扩展未启用或配置异常。以下是解决此问题的步骤：

本文运行环境：MacBook Air，macOS Sequoia。

一、启用 Auto Rename Tag 扩展

VSCode 默认不内置 Auto Rename Tag 功能，需通过安装并启用对应扩展来实现标签自动重命名。该扩展监听标签名编辑行为，在光标位于开始标签内时触发同步重命名逻辑。

1、点击左侧活动栏的扩展图标（方块拼图形状）。

立即学习 “ 前端免费学习笔记（深入）”；

2、在搜索框中输入Auto Rename Tag。

3、在搜索结果中找到作者为 Jun Han 的扩展，确认其名称为“Auto Rename Tag”且已安装。

4、若显示“禁用”，点击右侧的“启用”按钮；若显示“已启用”，则跳过此步。

二、检查工作区设置是否覆盖全局设置

某些项目可能在。vscode/settings.json 中显式关闭了 autoRenameTag 选项，导致扩展在当前工作区失效。需验证该设置值是否为 true。

1、按下Cmd+,（macOS）打开设置界面。

2、在搜索框中输入editor.autoRenameTag。

3、确认设置项状态为 Enabled，且 作用域 为“Workspace”或“User”时值为 true。

4、若该设置被设为 false，点击右侧铅笔图标，选择“Edit in settings.json”，将对应行改为"editor.autoRenameTag": true。

三、验证文件语言模式是否正确识别

Auto Rename Tag 仅对被 VSCode 识别为 HTML、XML、Vue、Svelte 等支持语言的文件生效。若文件后缀非标准或语言模式被误设，扩展将不响应。

1、打开目标文件，观察窗口右下角状态栏中的语言标识（如“HTML”、“Plain Text”）。

2、若显示为 Plain Text 或其他非支持语言，点击该标识。

3、在弹出菜单中选择Configure File Association for ‘.xxx’（xxx 为当前文件后缀）。

4、从列表中选择 HTML 或XML，完成关联。

四、禁用冲突扩展

部分格式化或代码补全类扩展（如 Auto Close Tag、Prettier、Ember Language Support）可能劫持编辑器事件，干扰 Auto Rename Tag 的标签匹配逻辑。

1、打开扩展视图，按 Cmd+Shift+P 调出命令面板。

2、输入并选择Extensions: Show Enabled Extensions。

3、逐个查找名称含“close”、“tag”、“format”的扩展，临时禁用其中一项。

4、重启 VSCode，测试重命名功能是否恢复；若恢复，说明该扩展为冲突源，可保持其禁用或调整其设置。

五、重置扩展缓存并重新加载窗口

扩展内部状态可能因频繁启用 / 禁用或版本升级而异常，需强制刷新其运行上下文以恢复监听能力。

1、按下 Cmd+Shift+P 打开命令面板。

2、输入并选择Developer: Reload Window。

3、等待窗口完全重载后，打开一个 HTML 文件。

4、将光标置于

是否同步变为。