VSCode原生不支持JSX提取为组件，需手动操作：选中JSX→新建文件→用rfc模板→粘贴并补全props→替换调用；依赖插件易失效，应避免正则类工具，重视props设计与类型声明。
VSCode原生Extract Component不支持JSX
VSCode没有内置“提取JSX为组件”的重构功能，Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（macOS）只触发Extract Method，对JSX返回语句、props解构、export声明等完全无感知。按了没反应或报“No refactorings available”，大概率是因为你选中的是JSX片段而非纯JavaScript表达式。
用ES7+ React/Redux snippets + 手动封装最稳
真实项目中，快速提取JSX成组件靠的是“模板+命名+移动”，不是全自动重构。推荐流程：
- 选中JSX块（比如一段
<div><h2>{title}</h2><p>{content}</p></div>），复制 - 按
Ctrl+P新建文件，输入Header.jsx回车，VSCode自动识别React文件类型 - 在新文件里输入
rfc再按Tab，生成函数组件骨架 - 把复制的JSX粘贴进
return内，手动补全const Header = ({ title, content }) => { ... } - 回到原文件，删掉旧JSX，替换成
<Header title={title} content={content} />
这个过程5秒内完成，比等待插件分析语法更可靠。注意：不要依赖插件自动推导props——它不会识别{title}来自父作用域，也不会帮你加PropTypes或TypeScript接口。
插件辅助：Auto Rename Tag + Path Intellisense减少出错
提取后高频出错点集中在两处：标签名不一致、路径写错。这时两个插件能兜底：
-
Auto Rename Tag开启后，改<Header>开头标签，闭合标签</Header>自动同步，避免手抖漏改 -
Path Intellisense在import Header from './components/Header'这行，光标停在引号内按Ctrl+Space，自动列出./components/下所有.jsx文件，不拼错路径、不翻目录
别装所谓“JSX Extractor”类小众插件——它们大多基于正则匹配，遇到嵌套条件渲染（如{loading ? <Spinner /> : <List items={data} />}）直接失效，还可能破坏原有缩进和空行。
Props传递时容易忽略的边界情况
手动封装JSX后，Props处理最容易翻车的地方不是语法，而是数据流假设：
- 如果原JSX里用了
useState或useEffect，提取后这些Hook必须移到新组件内部，不能留在父组件传状态过去 - 用
ref或forwardRef的场景，rfc模板不带React.forwardRef，得手动改成const Header = forwardRef((props, ref) => { ... }) - TypeScript项目里，
rfc生成的组件默认无类型，需补interface HeaderProps { title: string; content: string; }并标注const Header: FC<HeaderProps> = ...
真正省时间的不是“一键提取”，而是清楚知道哪些逻辑必须挪、哪些props必须显式声明、哪些类型必须手写——工具只是加速已知动作，不替代设计判断。
