必须安装 Jun Han 的 Auto Rename Tag 插件，启用需三步：一查 settings.json 含 "auto-rename-tag.enable": true；二看右下角语言模式为 HTML/Vue/JSX；三确保光标精准落在标签名字符内（如 <d|iv>），缺一不可。
必须装 Jun Han 的 Auto Rename Tag 插件，光标落在标签名内编辑才触发；VSCode 内置的 html.autoRenameTag 只支持纯 HTML，对 Vue/JSX 无效。
怎么确认插件已装好且真正启用
很多人以为装了就自动工作，结果改 <div> 闭合标签纹丝不动——问题常出在“启用”这一步没走实。
- 打开命令面板（
Ctrl+Shift+P或Cmd+Shift+P），输入Preferences: Open Settings (JSON)，检查是否存在"auto-rename-tag.enable": true；若没有，手动加上 - 如果用了工作区设置（
.vscode/settings.json），要确认里面没写"auto-rename-tag.enable": false—— 工作区设置会覆盖全局 - 右下角状态栏点击语言模式，必须显示
HTML、Vue或JavaScript React；显示Plain Text或JavaScript就完全不加载插件
为什么光标停在 <div> 上却没反应
这个功能对光标位置极其敏感，不是“在标签里”就行，而是必须“精确落在标签名字符上”。
- ✅ 有效位置：
<d|iv>或<di|v>（竖线代表光标，位于div两个字母之间） - ❌ 无效位置：
<|div>（光标在<后）、<div |class="x">（光标在属性里）、<div\n>（换行后）、< div >（带空格） - Vue 单文件组件中，只在
<template>区域生效；<script>或<style>里完全不响应 - JSX 文件需语言模式为
JavaScript React，不是普通JavaScript；建议同时装ES7+ React/Redux/React-Native snippets辅助识别
常见失效场景和绕过方法
结构不合法、插件冲突、大文件限流，都会让自动重命名静默失败——别硬调配置，先用最稳的方式兜底。
立即学习“前端免费学习笔记（深入）”；
- 注释或
<script>块里混了未闭合标签（如<!-- <div>），会导致整个 HTML 解析中断，重命名失效 - 多个插件共存时（比如
Auto Close Tag+Prettier），可能拦截编辑事件；临时禁用它们再测试 - 文件超过 500 行或嵌套超深（>50 层），VSCode 1.85+ 会主动降级，插件响应延迟甚至跳过；此时拆分模板比调
"auto-rename-tag.triggerOnSameLineOnly": false更可靠 - 自动失效时，别反复删改：光标停在标签名内 →
Ctrl+Shift+P→ 输入Rename Tag→ 选Auto Rename Tag: Rename Tag→ 直接输新名回车
内置 html.autoRenameTag 和插件的区别
VSCode 1.86+ 确实加了原生支持，但它能力很窄，不能替代插件。
-
html.autoRenameTag: true只在HTML语言模式下工作，对.vue、.jsx、<my-button>自定义元素完全无效 - 不处理自闭合标签（如
<img />改成<picture />不同步） - 不支持跨语言上下文（比如 Vue 的
<template>里嵌 JSX 片段） - 如果你只写静态 HTML，关掉插件、开
html.autoRenameTag够用；但只要项目含 Vue/JSX/Svelte，就必须用 Jun Han 的插件
最容易被忽略的是：它不处理任何属性——改 <div class="old"> 不会联动改 class 名，也从不碰 id 或指令。它只做一件事：确保开/闭标签名严格一致。其他都得靠人盯或工具链补位。
