Auto Rename Tag插件可实现HTML标签自动同步重命名：安装后重启VSCode，确保文件为HTML模式并在起始标签内修改名称即可生效；支持通过settings.json添加vue等自定义语言；也可按语言禁用。

如果您在VSCode中编辑HTML文件时，手动修改起始标签后需逐个更改对应结束标签，容易遗漏或出错，则可能是由于缺乏自动同步标签名称的功能。以下是启用并正确使用Auto Rename Tag插件实现配对HTML标签自动重命名的方法：

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

一、安装Auto Rename Tag插件

该插件由Jun Han开发，专为VSCode设计，可在用户修改开始标签（如

）时，实时同步更新其闭合标签（如

），前提是标签结构符合HTML语法规范且未被破坏。

1、打开VSCode，点击左侧活动栏的扩展图标（四个方块组成的图标）。

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

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

3、在搜索结果中找到作者为Jun Han的插件，点击“安装”按钮。

4、安装完成后，点击“重新加载”或手动重启VSCode以激活插件功能。

二、验证插件是否生效

插件启用后，无需额外配置即可默认工作，但需确保当前文件语言模式为HTML，并且光标位于合法的开始标签内部（如

中的section部分），此时修改名称才会触发自动重命名。

1、新建一个文件，输入.html后缀并保存，VSCode将自动识别为HTML语言模式。

2、键入

结构，将光标置于header三字母任意位置。

3、直接修改为main，观察是否同步变为。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

4、若未变化，检查右下角语言模式是否显示为HTML；若显示其他模式，点击后选择HTML。

三、调整插件设置以支持自定义标签

默认情况下，插件仅对标准HTML标签生效；若项目中使用了Vue或Svelte等框架的自定义元素（如），需手动启用对非标准标签的支持。

1、按下Cmd + ,（macOS）或Ctrl + ,（Windows/Linux）打开设置界面。

2、在搜索框中输入autoRenameTag。

3、找到Auto Rename Tag: Include Languages选项，点击右侧“编辑 in settings.json”。

4、在settings.json中添加如下配置项："auto-rename-tag.includeLanguages": ["html", "vue", "javascriptreact"]。

四、禁用插件在特定文件类型中的作用

某些场景下（如编辑Markdown内嵌HTML片段），自动重命名可能干扰正常编辑流程，此时可按语言类型临时关闭插件行为。

1、打开命令面板（Cmd + Shift + P 或 Ctrl + Shift + P）。

2、输入并选择Preferences: Configure Language Specific Settings...。

3、选择markdown语言。

4、在弹出的JSON块中插入："auto-rename-tag.enable": false。