VSCode通过编辑器组实现垂直与水平分屏，快捷键Ctrl+\（Cmd+\）垂直、Ctrl+Shift+\（Cmd+Shift+\）水平拆分，支持拖拽调整、键盘聚焦（Ctrl+1/2/3等）及工作区保存布局。
VSCode 的编辑器布局支持垂直与水平分屏，本质是通过“编辑器组（Editor Groups）”实现的。你可以自由拆分、合并、拖拽和调整各组大小，无需插件即可完成高效多任务操作。
如何快速创建垂直或水平分屏
最常用的方式是快捷键触发：
- 垂直分屏（左右并列）：按 Ctrl + \（Windows/Linux）或 Cmd + \（macOS）
- 水平分屏（上下并列）：按 Ctrl + Shift + \ 或 Cmd + Shift + \
也可以右键某个标签页 → 选择“在新编辑器组中打开”，再手动拖动到目标位置（顶部/底部为水平，左侧/右侧为垂直）。
调整分屏顺序与位置
编辑器组不是固定死的——你可以随时重新排列：
根据ui图生成前端页面
下载
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
- 用鼠标按住标签页标题栏，直接拖到另一个组的边缘（出现蓝色高亮区域），松手即移动
- 拖到当前组内部可改变文件顺序；拖到窗口空白处会新建组
- 想把两个组“合并”？关闭其中一个组的所有标签页，或右键组标题 → “关闭编辑器组”
保存与恢复自定义布局
VSCode 默认不会自动记住每次分屏状态，但有几种实用方式：
- 开启 “工作区”：用 File → Save Workspace As… 保存当前所有打开的文件、分组、折叠状态等，下次直接打开 .code-workspace 文件即可还原
- 启用设置 “Workbench > Editor > Restore Windows” 设为 all，重启 VSCode 时自动恢复上次的窗口与分组
- 多个项目频繁切换？配合 “Profiles”（配置文件）功能，为不同场景（如前端开发、调试、文档编写）保存独立布局+扩展+设置
进阶技巧：键盘控制与聚焦管理
纯键盘党可以完全不碰鼠标：
- Ctrl + 1 / 2 / 3…：快速聚焦第 1 / 2 / 3 个编辑器组
- Ctrl + K Ctrl + ← / →：在组之间循环切换（方向键控制移动方向）
- Ctrl + K ← / →：在当前组内切换已打开的文件标签
- 想把当前文件移到另一个组？先 Ctrl + K Enter 打开命令面板，输入 “Move Editor to…”，选目标组
基本上就这些。分屏不是越多越好，关键是让每个组承担明确角色——比如左写代码、右看文档，上写逻辑、下跑终端。用熟了，效率提升非常明显。
