尽力之后 如果没有随我意 那就随你意 你随意吧
双屏编程效率翻倍!一文掌握 VS Code 多窗口编辑的三种方法,告别频繁切换标签页
系列阅读
VS Code 又发布了一个 Agent 新玩具!
VS Code 1.110 官宣 AI 新特性:AI 直接调试浏览器!
VS Code 2026 效率秘籍:学完无敌!
VS Code GitLens 十大神技:彻底改变你在 VS Code 中的 Git 工作流
刚刚, VS Code 扔出重磅炸弹 MCP apps ,Cursor 废了!
VS Code 插件榜 top 10 :装上起飞!
VS Code 党必看:老司机都在用的插件清单来了!
VS Code 新终端正式发布!
📋 缘起
-
下文的缘起是因为一次技术总监给我们做了一次技术培训,过程中使用了 vscode, 无意中注意到了下文丝滑的 vscode 技巧。
前言:为什么需要拆分窗口?
你是否遇到过这样的场景:
-
• 📺 使用双显示器,想把代码和文档分开显示?
-
• 📄 编辑超长文件,想同时查看文件的开头和结尾?
-
• 🧪 做 TDD(测试驱动开发),想一边写测试一边看实现?
-
• 📽️ 做技术分享,想在投影仪上展示代码,同时在笔记本上编辑?
传统做法是在 VS Code 内部使用分屏(Split Editor),但这有个局限:所有窗口都在同一个 VS Code 窗口内。
而今天我们要学的是更强大的功能:将文件拆分到独立窗口,同时保持实时同步编辑!
核心概念:同实例 vs 新实例
在开始之前,理解这个概念至关重要:
🔑 关键点
同实例(Same Instance):
-
• ✅ 共享内存、设置、扩展和工作区状态
-
• ✅ 在一个窗口编辑,另一个窗口立即同步
-
• ✅ 这是我们要实现的目标
新实例(New Instance):
-
• ❌ 独立的 VS Code 进程
-
• ❌ 窗口之间无法同步
-
• ❌ 需要保存并重新打开文件
💡 重要提示:我们创建的新窗口必须是同一实例内的次级窗口,这样才能实现实时同步!
方法一:右键菜单(最简单)
适合鼠标用户,操作最直观!
步骤详解
步骤 1:打开文件
在 VS Code 中打开你想拆分的文件(比如 readme.md)。
步骤 2:定位标签页
文件会显示在编辑器顶部的标签栏中。
步骤 3:右键点击标签
在文件标签上点击鼠标右键,会弹出上下文菜单。
步骤 4:选择"Move into New Window"
在菜单中找到 "Move into New Window" 选项(通常在菜单底部)。

📝 注意:旧版本 VS Code 可能显示为 "Move to New Window",功能完全相同。
步骤 5:新窗口打开
一个新的 VS Code 窗口会立即打开,只包含你选择的文件。
步骤 6:测试同步
在任意窗口输入内容,另一个窗口会立即显示相同的变化!

方法二:命令面板(键盘党最爱)
适合键盘操作高手,效率爆表!
操作步骤
步骤 1:激活文件
确保你要拆分的文件是当前活动编辑器(点击其标签)。
步骤 2:打开命令面板
按下快捷键:
-
• Windows/Linux:
Ctrl + Shift + P -
• Mac:
Cmd + Shift + P
步骤 3:搜索命令
输入 Move Editor to New Window,选择匹配的命令。


💡 快捷技巧:也可以输入简短的关键词如 "move new window" 来快速过滤结果。
步骤 4:新窗口启动
活动编辑器会移动到新窗口,效果与方法一完全相同。
方法三:拖拽操作(可视化)
适合喜欢直观操作的用户。
操作步骤
步骤 1:确保标签可见
在标签栏中确认目标文件的标签。
步骤 2:点击并按住标签
用鼠标点击文件标签(如 app.js)并按住不放。
步骤 3:拖出窗口
将标签拖出当前 VS Code 窗口。拖拽时,你会看到一个新窗口的轮廓提示。

步骤 4:释放鼠标
松开鼠标按钮,标签就会在新的独立窗口中打开。
实战应用场景
这个功能在以下场景中特别有用:
1️⃣ 多显示器 setup

场景:主显示器写代码,副显示器看文档或测试
-
• 窗口 A(主屏):编辑
app.js -
• 窗口 B(副屏):查看 API 文档或测试输出
-
• 优势:充分利用屏幕空间,减少窗口切换
2️⃣ 超长文件编辑
场景:编辑大型文件(如 README.md 或 styles.css)
-
• 窗口 A:查看文件顶部(目录、说明)
-
• 窗口 B:编辑文件底部(具体实现)
-
• 优势:无需反复滚动,同时查看不同部分
3️⃣ 测试驱动开发(TDD)
场景:一边写测试,一边看实现
-
• 窗口 A:测试文件
app.test.js -
• 窗口 B:实现文件
app.js -
• 优势:实时看到测试失败/通过状态,快速迭代
4️⃣ 技术演示/教学
场景:向观众展示代码
-
• 窗口 A(投影):展示代码给观众
-
• 窗口 B(笔记本):自己编辑代码
-
• 优势:观众实时看到你的修改,演示更流畅
💪 优势总结
✅ 提升效率:减少窗口切换,专注编码
✅ 灵活布局:适应多显示器、不同工作流
✅ 零配置:开箱即用,无需插件
✅ 保持同步:共享设置、扩展、工作区状态
🚀 立即尝试
现在就打开 VS Code,选一个文件,
体验实时同步编辑的快感吧!
