重命名Vue组件名必须在块中按F2操作才安全，因VSCode语义重命名仅对JS/TS代码生效；和中需手动更新标签、类名等。
重命名组件名必须在 <script></script> 块里按 F2
Vue 项目中重命名组件（如 MyButton、UserCard）只有在 <script></script> 区域内操作才真正安全。VSCode 的语义重命名能力只对 JavaScript/TypeScript 代码生效， 和 是纯文本区域，F2 按下后只会触发“查找替换”，不是重构。
常见错误现象：光标停在 components: { MyButton } 里按 F2 没反应，或重命名后 中的
- 确认右下角语言模式显示为
Vue（不是HTML或Plain Text） - 确保已禁用
Vetur，且Volar的两个子扩展（Vue Language Features和Volar Server）都启用 - 重启窗口（
Developer: Reload Window），避免旧语言服务残留
export default 组件名和注册名要区分清楚
重命名时容易混淆两类名称：一是组件导出的构造函数名（export default { name: 'MyButton' } 或 export default defineComponent({ name: 'MyButton' })），二是局部注册时用的 key（components: { MyButton: MyButton }）。
VSCode 的 F2 重命名只改符号引用，不会自动同步 name 字段或模板标签。比如你把变量 MyButton 重命名为 PrimaryButton，name: 'MyButton' 也不会变。
- 模板中使用的标签名（
Ctrl+Shift+H，限定**/*.vue范围） -
name字段属于运行时配置，不属于语言服务识别的“符号”，必须人工核对修改 - 若组件被全局注册（
app.component('MyButton', ...)），该字符串字面量也需单独处理
TypeScript 类型定义里的组件名也要同步
如果组件有对应的类型声明（比如 MyButtonProps、defineComponent），这些标识符属于 TypeScript 符号，F2 可以跨文件重命名，但前提是：
- 文件后缀是
.ts或.d.ts，且右下角语言模式正确 - TS 语言服务器已加载完成（大型项目可能需等待几秒，状态栏出现“TypeScript”图标）
- 类型名和组件名不重合（例如
MyButton类型和MyButton组件同名时，F2会同时改两者，容易误伤）
典型误操作：重命名组件变量时连带把 interface MyButtonProps 改成 PrimaryButtonProps，结果类型校验失败。建议先重命名类型，再重命名组件，或拆开操作。
React 或 Svelte 项目重命名组件更简单，但仍有陷阱
React（JSX）和 Svelte 中组件名本质是变量或导出名，F2 行为更接近 TypeScript：只要语言服务正常，重命名 MyButton 会同步更新 import MyButton from './MyButton.vue'、export default MyButton 所有位置。
但要注意：
- React 中 JSX 标签名大小写敏感，
F2触及，它只是普通 HTML 标签 - Svelte 的
Svelte for VS Code扩展 - 所有框架下，组件文件名（
MyButton.svelte）和导入路径是独立系统级操作，F2不会动它——必须手动在资源管理器中按F2改文件名，并确认所有import路径已更新
最易被忽略的是：组件名变更后，其 CSS 类名（如 .my-button）、测试文件中的引用（test('renders MyButton', ...)）、文档注释（@component MyButton）全都不在语言服务覆盖范围内，得靠人眼扫一遍。
