auto rename tag 插件仅在html/jsx/vue等支持标签结构的文件中生效，需确认语言模式正确、相关设置启用、无插件冲突，且不处理class等属性。
Auto Rename Tag 插件不生效？先确认是否在 HTML/JSX 文件中启用
插件默认只在 html、xml、vue、jsx、tsx 等支持标签结构的语法下工作，纯 .js 或 .ts 文件里改 div 不会触发重命名。
常见错误现象：Renaming tag is not supported in current document 报错，或光标停在开始标签上按 F2 没反应。
- 检查右下角语言模式是否为
HTML（不是Plain Text或JavaScript） - 如果是 JSX 文件，确保已安装并启用
ES7+ React/Redux/React-Native snippets或类似扩展，否则 VSCode 可能识别为普通 JS - 打开设置搜索
autoRenameTag，确认html.autoRenameTag和对应语言的开关都为true
改了开头标签，闭合标签没变？检查是否被其他插件拦截
多个标签类插件（比如 Auto Close Tag、Auto Rename Tag、Prettier）同时启用时，可能因执行顺序或配置冲突导致重命名失效。
典型表现：手动修改 <section></section> 为 <article></article>，但 仍保留原样。
- 临时禁用其他标签相关插件，只留
Auto Rename Tag测试是否恢复 - 检查
settings.json中是否有冲突配置，例如"html.autoCloseTag": false虽然不影响重命名，但某些旧版插件会连带干扰 - VSCode 1.85+ 版本对
autoRenameTag的监听更严格，若文件过大（>500 行），插件可能主动降级——可尝试拆分模板或关闭html.suggest.html5减轻负担
Vue 单文件组件里重命名失败？注意 template 区域的嵌套层级
Auto Rename Tag 在 <template></template> 内部是工作的，但它依赖 VSCode 对 HTML 片段的解析精度。深层嵌套、条件渲染或动态组件容易让插件“看不清”匹配关系。
例如：<div v-if="show"><my-comp></my-comp></div> 中修改 <my-comp></my-comp>，闭合标签可能不更新。
- 确保
<template></template>标签本身是合法闭合的（没有漏写） - 避免在标签内直接写未转义的
{或，比如 <code><span>{{ item </span>—— 这会让插件误判 HTML 结构 - Vue 3 的
<script setup></script>语法无影响，但若使用defineComponent+render()，则<template></template>区域不存在，插件自然不生效
想改标签还顺带改 class 名？别指望 Auto Rename Tag 做这事
Auto Rename Tag 只负责成对标签名同步，不处理属性、class、id 或自定义指令。有人误以为它能联动修改 class="old-name"，结果白等。
真实能力边界很明确：
- ✅ 改
<header></header>→ 自动改 - ✅ 改
<mybutton></mybutton>→ 自动改（在 JSX/Vue 中） - ❌ 不改
class="header-legacy"，也不改v-bind:class="headerClass" - ❌ 不处理自闭合标签（如
<img>）的任何属性重命名
如果真需要语义化批量更新，得靠 Find and Replace 配正则，或者用 ESLint + @typescript-eslint/no-unused-vars 类规则做静态约束——插件就干一件事，别给它加戏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
