vue sfc 提取组件必须满足三个硬性条件：文件为 .vue 且状态栏显示 vue；选区包含完整 和 ；已启用 volar 插件且 tsconfig.json 中 baseurl 与 paths 配置合法。
Vue SFC 提取组件前必须满足的三个硬性条件
WebStorm 的 Extract Component 功能不是“选中就提”，它只对 Vue 单文件组件生效，且必须同时满足三项：当前文件后缀是 .vue，右下角状态栏显示 Vue（不是 HTML 或 Plain Text）；选中区域必须同时包含完整的 <template></template> 和对应的 <script setup></script>（不能漏掉闭合标签，也不能混入 <style></style>）；项目已启用 Volar 插件（非 Vetur），且 tsconfig.json 中的 baseUrl 和 paths 配置合法（例如 "@/*": ["src/*"]）。
常见错误现象：Extract Component 菜单项灰掉、点击无响应、或弹出 Cannot extract fragment: code is not self-contained。此时优先检查是否误选了 <style></style> 块，或选区跨了 <template></template> 和 <script></script> 边界但没闭合——比如只选了 <template></template> 开头却漏掉 。
React 函数组件没有 Extract Component，只能手动迁移
WebStorm 对 React 没有原生 Extract Component 支持，这不是配置问题，是功能缺失。菜单里压根不会出现这项。所谓“快速抽取”，本质是快捷键组合 + 手动粘贴 + IDE 补全协同完成：
- 选中要提取的 JSX + 相关逻辑（如
useState、useCallback），按Ctrl+C - 按
Ctrl+Shift+N新建src/components/MyButton.tsx，粘贴内容，删掉return关键字，只保留函数体内部 - 光标停在函数名上，按
Alt+Enter→ 选Create component，WebStorm 会自动补全React.FC类型和import React - 回到原组件，删掉旧代码，输入
<mybutton>，按 <code>Enter，IDE 才会自动插入import——前提是src目录已在Project Structure > Modules中标记为Sources
注意：如果原逻辑用了闭包变量（如 const handleClick = () => doSomething(count)），提取后必须改用 props.onClick 或 useCallback 封装，否则运行时报 ReferenceError: count is not defined。
路径不自动导入？查 TypeScript 路径映射配置
即使你手动建了组件、写了正确的 import，WebStorm 仍可能不补全路径或移动后路径失效。根源常在 TypeScript 配置未被索引：
- 进
Settings > Languages & Frameworks > TypeScript > Compiler，确认勾选了Use paths mapping from tsconfig.json - 检查
tsconfig.json中的baseUrl和paths是否合法，例如："@/*": ["src/*"]，且 JSON 语法无误（逗号、括号、引号） - 若刚改过
tsconfig.json，必须执行File > Invalidate Caches and Restart，否则新配置不会生效
没做这一步，@/components/MyButton 这类别名路径大概率无法解析，自动补全也会失灵。
AI Assistant 不能替代人工判断，尤其在组件拆分时
WebStorm 的 AI Assistant 默认不启用，需手动登录 JetBrains 账户并开启。但它对“抽取组件”这类跨文件、带类型推导的操作支持有限：
- 它无法识别组件边界是否合理（比如该不该把表单校验逻辑一起抽走）
- 不理解项目级约定（如
useForm自定义 Hook 的参数结构） - 若原组件用了
any类型或// @ts-ignore，AI 会跳过相关分支，导致 props 类型丢失 - 生成结果默认不自动应用，必须人工核对：是否漏传了依赖、
useCallback是否包裹到位、TS 接口是否同步更新
真正容易被忽略的是：组件拆分后，父组件的状态管理方式往往需要重构，而 AI 不会主动提示这点——它只管“代码能跑”，不管“设计是否合理”。
