Volar 必须启用且 Vetur 必须禁用，因二者冲突导致重构失效；仅 <script> 块支持完整重构，重命名按 F2、提取函数需右键 Refactor；全局替换为纯文本操作，须限定范围并备份验证。
Vue 项目在 VS Code 里做自动重构，关键不在于“装多少插件”，而在于选对主力、关掉干扰、配准语言服务——Volar 必须启用，Vetur 必须禁用，否则重构会失效或错乱。
为什么 Volar 和 Vetur 不能共存
Volar 是 Vue 3 官方语言服务器，提供语义级重命名、提取、类型跳转等重构能力；Vetur 是 Vue 2 时代的产物，其语言服务与 Volar 冲突，会导致：Rename Symbol 只改模板不改逻辑、Extract to function 报错“no valid range”、Ctrl+. 灯泡不出现。VS Code 同一时间只允许一个 Vue 语言服务器激活。
- 检查是否已禁用 Vetur：打开 Extensions 面板（
Ctrl+Shift+X），搜索vetur，点击齿轮图标 → Disable Workspace（不是 Uninstall） - 确认 Volar 已启用：搜索
volar，确保Vue Language Features和Volar Server两个子扩展都处于启用状态 - 重启窗口：执行
Developer: Reload Window，否则旧语言服务可能仍在内存中残留
Vue 文件里触发重构的正确姿势
Vue 单文件组件（.vue）分 <script>、<template>、<style> 三块，只有 <script> 块支持完整重构，<template> 块仅支持有限的快速修复（如指令拼写纠错），<style> 块基本无重构能力。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 重命名变量/函数：光标放在
<script>中的标识符上，按F2—— 不要右键菜单点“Rename”，那只是文本替换 - 提取逻辑到组合式函数：选中一段
setup()内代码（必须是合法表达式或语句块），右键 → Refactor… → Extract to function，Volar 会自动生成useXXX()并注入依赖 -
Ctrl+.不生效？先确认光标在<script>区域，且该行有 ESLint 或 TypeScript 报错（比如‘xxx’ is declared but its value is never read）
全局批量替换 Vue 模板内容的实操边界
VS Code 的 Ctrl+Shift+H 全局替换能改 .vue 模板，但它是纯文本操作，没有语义理解——改错一个 v-if 指令可能连带破坏嵌套结构，改错一个 :class 绑定可能让整个样式失效。
立即学习“前端免费学习笔记（深入）”；
- 限定范围必做：
Include files输入**/*.vue，避免误触.js或.ts文件 - 正则慎用：例如想把所有
v-bind:foo替换为:foo，正则可写v-bind:(\w+)→:$1，但需勾选.*图标并预览每一处匹配 - 绝对不要跳过 Git 备份：执行前建新分支，替换后先
git diff查看所有变更，再运行npm run test或手动验证组件渲染
最易被忽略的一点：Volar 的重构能力严重依赖 tsconfig.json 或 jsconfig.json 中的 "compilerOptions": { "allowJs": true }（JS 项目）或 "skipLibCheck": true（TS 项目）。配置缺失时，Rename Symbol 可能只在当前文件生效，跨文件引用完全不动。别只盯着插件开关，先看根目录有没有配置文件、内容是否合理。
