VSCode原生仅支持提取逻辑代码为函数，无法直接提取JSX为React组件；后者需Glean等插件。Extract Method失效常见于选区不合法、光标位置错误或语言模式非JS/TS。参数命名用F2重命名更高效。
VSCode 原生只能提取逻辑代码为函数，不能直接提取 JSX 为 React 组件——后者必须依赖插件，比如 Glean 或 React Refactor。别指望按一次快捷键就搞定组件拆分，那是两个完全不同的技术路径。
Extract Method 快捷键没反应？先检查这三件事
最常见的情况不是功能坏了，而是 VSCode 根本没识别到“可提取的选区”：
- 选中内容必须是语法合法的完整语句或表达式，比如
const result = a + b * 2可以，但a + b *不行； - 光标不能落在注释、字符串字面量或未闭合括号内部（例如把光标停在
"hello // world"的//上再选中，会失效）； - 文件语言模式必须正确：左下角显示的是
JavaScript或TypeScript，而不是Plain Text—— 没激活语言服务，Ctrl+Shift+R（Win/Linux）或Cmd+Shift+R（macOS）必然静音。
参数全是 arg0、arg1？用 F2 重命名比手改靠谱十倍
VSCode 不猜语义，只看变量引用痕迹。你选中 let tmp = x * y; console.log(tmp);，它只会生成 function extracted(arg0, arg1)，因为 tmp 是临时名，无上下文。
- 提取完成后，光标自动停在新函数名上 → 按
F2，它会跳到第一个参数arg0处； - 直接输入
multiplier回车，所有调用处和函数签名同步更新； - 想提前干预命名？选中前先把关键临时变量重命名，比如把
tmp改成scaledValue，再提取，参数名就是scaledValue。
React 里想提取 JSX 成组件？原生功能完全不支持
Extract Method 只处理 JS/TS 逻辑，对 return、JSX 结构、Props 类型、useEffect 等一概无视。你强行选中一段带 useState 的 JSX，它照样给你生成一个普通函数，不是 Hook，也不能直接当组件用。
- 要真正提取 JSX，必须装插件：
Glean（推荐）或React Refactor； - 装好后，右键选中 JSX 块 → 选
Glean: Extract JSX to Component； - 它会引导你输组件名、选保存路径，并自动分析 props（比如从
{user.name}推出user: User）、生成.tsx文件、加 import、甚至处理默认导出。
最易被忽略的一点：提取后的位置默认在文件顶部，但逻辑上你通常希望它紧挨着调用处——别忍着，提取完立刻 Ctrl+X 剪切，回到调用位置上方 Ctrl+V 粘贴，VSCode 会自动缩进对齐。否则读代码时来回跳转，效率反而更低。
