技术总监悄悄秀了一把 VS Code 神技，被我狠狠学到了！

尽力之后 如果没有随我意 那就随你意 你随意吧

双屏编程效率翻倍！一文掌握 VS Code 多窗口编辑的三种方法，告别频繁切换标签页

VS Code Split Window

📋 缘起

• 下文的缘起是因为一次技术总监给我们做了一次技术培训，过程中使用了 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，选一个文件，

体验实时同步编辑的快感吧！