auto rename tag仅支持单文件标签重命名；多文件联动修改需组合工具：css peek与intellisense辅助html/js/css类名同步，ts/js依赖f2重命名与typescript hero增强，路径别名变更靠path intellisense+ctrl+shift+h全局替换，vue 3推荐volar实现template/script联动，核心是改前知影响、改后可验证。
Auto Rename Tag 能解决 HTML/XML 标签配对修改问题，但仅限单文件内；真正需要「多文件联动修改」时，得靠组合策略和明确目标——没有一款插件能全自动跨文件重命名变量或路径，但有几类工具能大幅降低出错率、减少重复劳动。
改 HTML 模板 + 对应 JS/CSS 类名，用 CSS Peek + IntelliSense for CSS class names
常见错误现象：改了 HTML 里的 class="header"，忘了同步更新 CSS 中的 .header 或 JS 里 document.querySelector('.header') 的字符串，导致样式/逻辑失效。
-
CSS Peek：光标停在 HTML 的class值上（如header），按F12直接跳转到 CSS 文件中该类的定义处，方便定位并手动修改 -
IntelliSense for CSS class names：在 HTML 的class=""里输入时，自动提示项目中所有已定义的类名，避免拼写错误，也间接帮你发现哪些类名实际已被使用 - 注意：
CSS Peek不支持 SCSS 嵌套结构下的深层类名跳转（比如.container .sidebar .btn中的.btn若未单独定义，可能无法精准定位）
TS/JS 中跨文件变量/函数重命名，依赖 TypeScript Hero 或原生 Refactor > Rename Symbol
不是所有“重命名”都可靠。VS Code 内置的 Refactor > Rename Symbol（快捷键 F2）在 TS/JS 项目中效果最好，前提是类型定义完整、无 any 泛滥、且项目配置了 tsconfig.json。
- 它能识别 import/export 关系，自动修改所有引用该符号的文件，包括不同目录下的
.ts、.tsx文件 -
TypeScript Hero插件可增强此能力：提供更准确的引用预览、支持重命名时排除测试文件（**/*.test.ts）、允许自定义重命名作用域 - 容易踩的坑：如果变量是通过
eval、Function构造器、或字符串拼接方式引用（如obj[key + 'Name']），F2不会处理——这类动态访问必须人工核对
路径别名（如 @/components）修改后，靠 Path Intellisense + 手动全局搜索
改 webpack/vite 别名配置后，旧路径不会自动更新。这时候插件不负责“改”，而是帮你“查全”和“输准”。
-
Path Intellisense在import语句中输入@/时，自动列出当前别名映射下的所有路径，防止手输错误 - 但别名变更后的批量替换，必须用 VS Code 自带的
Ctrl+Shift+H（全局搜索替换），搜索from "@/old-path替换为from "@/new-path - 注意：正则模式要打开，否则
/会被当作字面量处理；同时检查node_modules和dist是否被误包含（可在搜索范围中排除）
Vue 单文件组件中 template/script/style 联动，优先用 Volar（Vue 3）
Vue 2 的 Vetur 对跨块引用的支持较弱，Vue 3 项目务必用 Volar，它把 .vue 当作一个整体来解析。
- 在
<template></template>中点击一个ref绑定的变量名，F12可直接跳转到<script setup></script>中的声明位置 - 修改
<script></script>中的defineProps名称，F2重命名会同步更新<template></template>中所有使用该 prop 的地方（前提是没用v-bind:[key]这类动态绑定） - 不推荐依赖插件自动改
class名：Volar 不处理 CSS 类名与 template 的关联，这部分仍需CSS Peek配合人工确认
F2、Ctrl+Shift+H、F12 这三个快捷键组合，比任何“智能联动”插件都更可控、更透明。
