WebStorm Extract Method 功能要求光标置于语句块首行最左侧，自动识别完整闭合结构；参数按首次读取顺序生成，不自动添加类型注解，需手动补全或借助 JSDoc；不处理闭包变量合理性与副作用，提取后需人工优化。
光标必须停在语句块开头，不能靠选中
WebStorm 的 Extract Method 不是“选中代码 → 按快捷键”就能用。它依赖光标位置自动识别连续、闭合的语句块。如果你把光标放在某行中间（比如 a + b 的 + 上）、或模板字符串内部、或对象字面量里，功能会直接灰掉，弹出 Cannot extract method: selected code is not a valid statement。
正确做法是：把光标放在你要提取的**第一行最左侧**（例如 const result = compute(a, b); 这整行开头），再按 Ctrl+Alt+M（Windows/Linux）或 Cmd+Alt+M（macOS）。它会从这行开始向下扫描，直到遇到语法不完整（如缺 }、; 或 return 跳出上下文）为止。
- 跨多行的
if、for、try/catch块必须完整选中结构——只选if (x) {后面几行，没包住整个}，就会失败 - 避免在 JSX、
template或script setup内部直接触发，容易误判为表达式而非可执行语句 - 函数体内有
return、break、throw时，WebStorm 默认只提“能独立返回值”的部分；若想保留控制流，得手动调整逻辑边界
参数顺序由变量首次读取位置决定
提取后生成的函数参数不是按声明顺序、也不是按字母序，而是严格按**被提取代码块中变量第一次被读取的位置**。比如你写的是：
console.log(user.name, config.apiBase, user.id);
生成的函数签名就是 function extracted(user, config)，哪怕 config 在文件顶部定义、user 在下面才创建。
- 如果希望参数更合理，提前调整代码块内的使用顺序，比如把
config.apiBase写在最前面 - 提取后立刻按
Ctrl+Shift+P（macOS 是Cmd+Shift+P）打开Change Signature，可拖拽参数、设默认值、加解构，比删了重提快得多 - 类方法内提取时，务必选
Extract as method in current class，否则this会丢失，变成普通函数调用
TypeScript 项目里类型不会自动生成
WebStorm 提取方法后，默认函数签名不带类型注解，比如生成的是 function doSomething() { ... }，而不是 function doSomething(user: User, config: Config): string。这会导致后续调用失去类型检查和智能提示。
- 箭头函数提取（如
const fn = () => {}）同样不带: ReturnType，需手动补全 - 最稳妥的做法：提取前给关键变量加 JSDoc 或类型断言，例如
(compute(a, b) as number)，WebStorm 会沿用这个类型推导 - 提取后光标通常停在函数名后，直接输入
: string或按Ctrl+Space触发类型补全，比手敲更准
别指望它自动处理闭包变量或副作用
WebStorm 会把被提取代码中引用但未声明的变量（比如外层作用域的 token、apiClient）一股脑转成参数，但它**不会判断这些变量是否真该暴露出去**。有些变量其实是稳定配置，有些却是每次调用都变的状态，混在一起传参会让函数职责模糊。
- React 组件里提取逻辑时，注意
useState或useEffect依赖项若来自父组件，得转成props或用useCallback包裹，否则运行时报ReferenceError - 含
console.log、localStorage.setItem等副作用的代码块，提取后仍是副作用函数——IDE 不会帮你改成纯函数，得人工审视 - 真正麻烦的从来不是怎么提，而是提完要不要拆参数、哪些变量该抽成
const提前声明、有没有漏掉看似相同实则语义不同的分支逻辑
