vscode重构功能依赖lsp：先确认状态栏显示typescript/javascript，f12能跳转定义，console无language-server错误；提取函数需选中连续可执行语句且不含语法断点；调用图需用code call graph editor；路径重构需import magic或jsconfig.json别名配置。
Refactor 菜单为空？先确认 LSP 是否真正就位
VSCode 本身不提供自动重构引擎，所有语义级重构（包括路径感知、跨文件调用分析）都依赖语言服务器（LSP）。如果右键没有“重构”子菜单，或只有 Rename Symbol，不是插件装得少，而是 LSP 没加载成功：
- 右下角状态栏看语言模式：必须显示
TypeScript或JavaScript，不能是Plain Text或JavaScript React - 在
.js文件中按F12测试能否跳转到定义；跳不到，F2就只会做局部文本替换 - 打开开发者工具（
Ctrl+Shift+P→Developer: Toggle Developer Tools），查 Console 是否报typescript-language-server启动失败、超时或崩溃 -
.js文件需保存后才触发完整 LSP 分析；未保存的临时文件无法参与路径级重构
提取函数失败？检查选中范围是否满足语法连续性
VSCode 不判断逻辑，只校验语法合法性。JS 中“提取为函数”失败，往往因为选中内容违反硬性约束：
- 必须手动拖选**连续可执行语句**：不能含半个
if块、不能跨函数边界、不能以return开头（顶层return会被忽略） - 末尾分号会触发拒绝——删掉再试
- 返回值仅取最后一条
return表达式；前面的console.log()或副作用语句全被原样搬进新函数 - 提取后立刻检查签名：
async丢了没？外层let变量（如count）是否被当作参数传入？参数名是arg0？别手敲——提取完光标自动停在第一个参数上，按F2即可重命名
想让调用路径“清晰可见”？用 Code Call Graph Editor 而非普通重构插件
普通“Auto Refactor”类插件只是把 F2 包一层壳，无法可视化路径。真要让 JS 调用关系一目了然，得用专为图谱设计的插件：
- 安装
Code Call Graph Editor，它支持 TypeScript/JavaScript，能通过 LSP 的Call Hierarchy自动生成调用图 - 在函数上右键 →
Generate Call Graph，插件会创建.callgraph.json并绑定节点 - 点击图中任意节点，直接跳转到源码定义位置；支持多级展开、过滤、导出 PNG
- 注意：它不修改代码，只读取 LSP 提供的调用信息；若函数无明确调用者（如仅被
eval或动态字符串调用），不会出现在图中
ESLint + Prettier 自动修复 ≠ 路径重构，顺序错就互相打架
很多人误以为开启自动修复就能理清模块路径，但 ESLint 和 Prettier 都不处理 import 路径重构。它们只管风格和基础规则：
-
editor.codeActionsOnSave和editor.formatOnSave有执行优先级，顺序错会导致分号被加又被删 - 正确顺序：
"eslint.run": "onSave"+"editor.codeActionsOnSave": { "source.fixAll.eslint": true }，再启用"editor.formatOnSave": true - 路径重构得靠别的方案：比如用
Import Magic插件修正相对路径，或在jsconfig.json中配compilerOptions.paths实现@/别名识别 - 别名生效后，VSCode 才能正确解析
import { foo } from '@/utils'的跳转与重构上下文
