WebStorm仅支持Vue SFC的Extract Component，需满足.vue文件、完整template/script块、启用Volar插件三条件；React无原生支持，需手动新建组件并补全导入，注意props传递与useCallback封装。
WebStorm 不能直接把任意代码块“提取成 Vue/React 组件”——它只对 Vue 单文件组件（SFC）提供 Extract Component 支持，React 函数组件不支持该操作，必须手动迁移。
Vue 中 Extract Component 为什么点不动或报错
触发 Ctrl+Alt+Shift+T → Extract Component 前，必须满足三个硬性条件：
- 当前文件是
.vue文件，且 WebStorm 正确识别为 Vue SFC（右下角状态栏显示Vue，不是HTML或Plain Text） - 选中区域包含完整的
<template></template>和对应的<script setup></script>（或<script></script>）逻辑块，不能只选 template 或只选 script - 项目已启用 Volar 插件（非 Vetur），且
tsconfig.json路径配置正确；否则 WebStorm 无法推导 props 类型，直接禁用该菜单项
常见错误现象：Extract Component 灰掉、点击无响应、或弹出 Cannot extract fragment: code is not self-contained。此时检查是否误选了 <style> 块，或选区跨了 <template> 和 <script> 的边界但没闭合标签。
React 函数组件怎么“模拟提取组件”
WebStorm 对 React 没有原生 Extract Component 功能，但可用「重构 + 补全」组合替代：
- 手动新建
src/components/MyButton.tsx，粘贴选中的 JSX 和对应逻辑（注意删掉return关键字，保留函数体内部） - 粘贴后 WebStorm 会自动提示
Define defineProps或Import React，按Alt+Enter快速补全 - 回到原组件，删掉旧代码，输入
<MyButton，WebStorm 会自动插入 import 语句——前提是新文件在src/components/下且目录被标记为Sources（File > Project Structure > Modules） - 如果原组件用了
useState或useEffect依赖外部变量，提取后必须转成props或用useCallback包裹回调，否则运行时报ReferenceError: xxx is not defined
提取后路径没自动导入？检查 TypeScript 配置
即使你手动建了组件、也写了正确的 import，WebStorm 仍可能不自动补全路径或移动后路径失效，根源在 TypeScript 配置未被索引：
- 进
Settings > Languages & Frameworks > TypeScript > Compiler，确认勾选了Use paths mapping from tsconfig.json - 检查
tsconfig.json中的baseUrl和paths是否合法（比如"@/*": ["src/*"]），且没有语法错误 - 若刚改过
tsconfig.json，需执行File > Invalidate Caches and Restart > Just Restart强制重载配置 - 移动文件后 import 没更新？先点
File > Synchronize，再检查目标文件是否在Modules设置里被标记为Sources
最易被忽略的一点：Vue 提取组件时，WebStorm 默认不会帮你把 ref 或 computed 转成 props，它只是机械复制代码；React 手动迁移时，也容易漏掉 useCallback 包裹事件处理器——这两处不处理，组件一渲染就可能丢状态或重复创建函数。
