TypeScript语言服务驱动F2重命名和Extract Function功能，插件多为封装；Refactor菜单为空因tsserver未启动，需检查tsconfig.json、工作区路径及状态栏语言模式；Extract Function灰显因语法结构不满足前提；ESLint与Prettier需正确配置顺序并禁用冲突规则；Volar项目需关闭autoInsertDotValue；安全重构依赖人工判断逻辑耦合与副作用。

F2重命名和Extract Function根本不是插件干的，是TypeScript语言服务在背后驱动——装一堆“Auto Refactor”类插件，大概率只是把原生功能包了一层壳，还可能干扰LSP正常工作。

为什么Refactor菜单为空或只有Rename Symbol

这不是插件没装够，而是语言服务压根没起来：

• 右下角状态栏必须显示TypeScript或JavaScript，不能是Plain Text或JavaScript React
• 在.ts文件里按F12跳转不到定义？说明tsserver没加载，F2只会做纯文本替换
• 项目根目录必须有tsconfig.json（哪怕空文件），且VSCode工作区打开的是该目录，不是某个子文件
• 打开Ctrl+Shift+P → Developer: Toggle Developer Tools，看Console里有没有Cannot connect to tsserver或超时日志

Extract Function为什么总灰掉

VSCode不分析逻辑，只校验语法结构是否满足提取前提：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

• 选中内容必须是连续可执行语句：不能跨if块边界、不能含return（顶层return会被忽略）、不能以await开头
• JS/TS中末尾带分号会直接拒绝；Python里未声明的let变量无法推导参数
• 返回值只取最后一条return表达式，前面的console.log()或副作用语句原样搬进新函数
• 提取后立刻检查：异步函数async丢了没？外层count这类let变量是否被当参数传入？参数名是arg0？别手敲——光标自动停在第一个参数上，按F2就能重命名

ESLint + Prettier自动修复 ≠ 自动重构

它们顺序错了就会互相覆盖，导致格式化失效甚至代码出错：

• 先配ESLint自动修复："eslint.run": "onSave" + "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
• 再开格式化："editor.formatOnSave": true，且"editor.defaultFormatter": "esbenp.prettier-vscode"
• 关键一步：禁用ESLint的格式类规则，装eslint-config-prettier并加到.eslintrc.js的extends最末尾
• Vue/TSX项目若用Volar，额外设"volar.autoInsertDotValue": false，否则格式化会破坏点语法

真正难的不是操作步骤，而是判断哪段代码能被安全提取——工具不会告诉你“这段逻辑耦合太深，不该拆”，它只认语法合法性和作用域可见性。手动验证参数传递、副作用处理和类型完整性，比点鼠标重要得多。