VS Code 为什么这么好用？答案藏在它的 Workbench 布局架构里。本文带你从零理解 VS Code 的窗口布局体系，掌握每一个区域的用途、配置方法和高效操作技巧。
为什么值得了解布局？
很多人用 VS Code 几年了，还是只会在默认布局下写代码。其实 VS Code 的界面是高度可定制的——你可以把面板挪到左边、拆分出四个编辑器、甚至隐藏所有 UI 只留代码。
理解布局架构，你就能：
- 根据工作习惯定制专属布局
- 快速在不同任务间切换工作区
- 开发扩展时知道往哪里注册自定义视图
- 遇到界面问题时快速定位原因
一、整体架构：Workbench 工作台
VS Code 的整个主界面官方称为 Workbench（工作台）。它采用分区容器式布局——把界面拆分成多个独立的区域（Part），每个区域可以单独显示/隐藏、拖动调整大小、甚至改变位置。
+---------------------------------------------------------------------+
| Workbench |
| +---------+----------+----------------------+----------------+ |
| |Activity | Sidebar | Editor Area | Secondary | |
| | Bar | | | Sidebar | |
| | | | +--------+--------+ | | |
| | [E] | Explorer | | Ed. | Ed. | | [view] | |
| | [S] | Search | |Grp 1 |Grp 2 | | | |
| | [G] | SCM | +--------+--------+ | | |
| | [D] | Debug | | Panel | | | |
| | [X] | Extens. | | Term | Out | Dbg | | | |
| +---------+----------+----------------------+----------------+ |
| +--------------------------------------------------------------+ |
| | Status Bar | |
| +--------------------------------------------------------------+ |
+---------------------------------------------------------------------+
整个 Workbench 由 7 大区域组成，下面逐一拆解。
二、七大区域详解
1. 标题栏（Title Bar）
窗口最顶部的横条，是操作系统和 VS Code 的边界地带。
| 组件 | 说明 |
|---|---|
| 窗口控制按钮 | 最小化、最大化/还原、关闭 |
| 菜单栏 | Windows/Linux 默认显示；Mac 菜单栏在系统顶部 |
| 窗口标题 | 显示当前文件/文件夹名称 |
| 布局切换按钮 | 右上角图标，快速切换面板位置、全屏、禅模式 |
Mac 特殊性：macOS 的菜单栏是系统级的，不在窗口内。如果你用 Mac，标题栏会更窄。
小技巧：在标题栏右键可以快速访问窗口管理命令（移动、调整大小、合并所有窗口）。
2. 活动栏（Activity Bar）
窗口最左侧的窄竖条，是整个界面的导航枢纽。
它的核心作用：通过图标切换主侧边栏显示不同的视图容器。
内置图标（从上到下）：
| 图标 | 视图容器 | 功能 |
|---|---|---|
| [E] | 资源管理器 (Explorer) | 文件浏览、大纲、时间线 |
| [S] | 搜索 (Search) | 全局搜索和替换 |
| [G] | 源代码管理 (SCM) | Git 状态、分支管理 |
| [D] | 运行和调试 (Run/Debug) | 断点、调用栈、变量监视 |
| [X] | 扩展 (Extensions) | 安装、管理扩展 |
扩展图标：安装 Docker、Remote SSH、Copilot 等扩展后，它们会在活动栏添加自己的图标。
自定义：
- 右键图标 → 可隐藏某个视图容器
- 拖拽图标 → 调整图标顺序
- 隐藏活动栏：
View → Hide Activity Bar或设置"workbench.activityBar.visible": false（boolean 类型）
活动栏底部固定显示两个图标：用户账户头像、设置齿轮。
3. 主侧边栏（Primary Side Bar）
活动栏右侧的视图承载区域，根据活动栏选中的图标显示不同的视图容器。
默认包含的视图（取决于活动栏选中的容器）：
- 资源管理器：文件夹树、最近打开的文件、大纲（函数/类列表）、时间线（Git 历史）
- 搜索：支持正则表达式、大小写敏感、全文件夹搜索替换
- SCM：显示修改的文件、暂存/提交、分支切换、冲突解决
- 调试：断点管理、调用栈、变量、监视表达式
- 扩展：搜索安装、已安装列表、推荐扩展
操作技巧：
- 视图标题栏右键 → 可折叠所有项、复制、重排
- 视图之间可拖拽移动（从主侧边栏拖到次侧边栏）
Ctrl+B快速显示/隐藏侧边栏- 右键活动栏 → “Move Sidebar to Right” → 侧边栏移到编辑器右侧
4. 次侧边栏（Secondary Side Bar）
与主侧边栏左右对称的第二个侧边栏，默认关闭。
适用场景：
- 一边看文件目录，一边看 AI 聊天面板
- 一边编辑代码，一边看 Git 变更
- 一边看大纲，一边看终端输出
启用方式：
- 拖拽任意视图到窗口最右侧区域
- 快捷键
Ctrl+Alt+B显示/隐藏 - 菜单
View → Appearance → Secondary Side Bar
优势：次侧边栏有独立的视图容器，不会和主侧边栏共享状态。
5. 编辑器区域（Editor Area）—— 核心中的核心
这是整个 Workbench 最重要的区域，所有代码编辑都在这里发生。
5.1 编辑器组（Editor Group）
编辑器区域被拆分成的独立窗格，每个组管理自己的标签页集合。
Editor Area
├── Editor Group 1 ├── Editor Group 2
│ ├── index.ts (active) │ ├── utils.ts
│ ├── app.ts │ └── config.ts
│ └── main.ts │
└───────────────────────────┘
拆分方式：
Ctrl+\→ 右侧打开新编辑器组Ctrl+Alt+\→ 下方打开新编辑器组- 拖拽标签到编辑器边缘 → 指定方向拆分
- 菜单
View → Editor Layout→ 预设 2×2、三栏等布局
切换编辑器组：
Ctrl+1/2/3→ 跳转到第 N 个组Ctrl+Tab→ 在当前组的标签间切换- 鼠标点击 → 直接激活目标组
5.2 标签页（Tab Bar）
每个编辑器组顶部的标签栏：
- 预览模式：单击文件时标签名斜体显示，再次单击或编辑后变为正常（变为永久打开）
- 标签操作：右键 → 关闭、关闭其他、关闭已保存、复制、拆分
- 标签拖拽：可在组间移动，也可拖出为新窗口
5.3 其他内部组件
| 组件 | 位置 | 说明 |
|---|---|---|
| 面包屑 (Breadcrumbs) | 标签栏下方 | 文件路径层级导航，点击可跳转目录/符号 |
| 编辑器文本区 | 中央 | 代码编辑核心，支持语法高亮、折叠、多光标 |
| 迷你地图 (Minimap) | 右侧边缘 | 代码缩略概览，可拖拽快速定位，可通过 editor.minimap.enabled 关闭 |
6. 面板（Panel）
编辑器区域下方的多标签工具面板。
内置面板：
| 面板 | 功能 |
|---|---|
| 终端 (Terminal) | 多实例命令行，支持分屏、多个 shell |
| 问题 (Problems) | 代码错误、警告、信息的汇总列表 |
| 输出 (Output) | 扩展和 VS Code 的日志输出 |
| 调试控制台 (Debug Console) | REPL 交互、调试表达式求值 |
操作：
Ctrl+J→ 显示/隐藏面板Ctrl+Shift+J→ 最大化/还原面板- 面板标签右键 → 可移动面板到窗口任意位置（底部、左侧、右侧、顶部）
- 面板位置配置：
底部 | 左侧 | 右侧 | 顶部
终端进阶：
Ctrl+Shift+`→ 新建终端- 终端内
Ctrl+Shift+5→ 分屏 - 终端右上角 → 可最大化、改变位置、选择 shell 类型
7. 状态栏（Status Bar）
窗口最底部的细长横条，显示当前工作状态。
| 区域 | 显示内容 |
|---|---|
| 左侧 | 当前 Git 分支、同步状态、错误/警告数量 |
| 右侧 | 行号列号、缩进方式（空格/Tab）、编码格式（UTF-8）、语言模式（TypeScript）、换行符（LF/CRLF） |
交互：
- 点击 Git 分支 → 快速切换分支
- 点击错误数量 → 打开问题面板
- 点击编码格式 → 更改编码
- 点击语言模式 → 切换语言
颜色含义（由当前主题控制，以下为默认深色主题）：
- 蓝色背景 → 正常状态
- 黄色/橙色背景 → 有警告
- 红色背景 → 有错误（编译错误、lint 问题等）
三、布局预设模式
VS Code 提供了几种预设布局模式，适合不同的工作场景。
禅模式（Zen Mode）
极简专注模式，隐藏所有非必要 UI。
+--------------------------------------+
| |
| |
| [代码编辑区] |
| （居中显示，两侧留白） |
| |
| |
+--------------------------------------+
启用：Ctrl+K Z 或 View → Appearance → Zen Mode
效果：
- 隐藏活动栏、侧边栏、面板、状态栏
- 编辑器居中显示
- 可配置是否保留标签栏、面包屑
Esc退出禅模式
配置项（settings.json）：
{
"zenMode.fullScreen": true, // 是否进入全屏
"zenMode.centerLayout": true, // 编辑器居中
"zenMode.hideActivityBar": true, // 隐藏活动栏
"zenMode.hideStatusBar": true, // 隐藏状态栏
"zenMode.hideLineNumbers": false, // 是否隐藏行号
"zenMode.restore": false // 退出后是否恢复之前状态
}
居中编辑器布局（Centered Layout）
编辑器区域居中显示，两侧留白，但保留侧边栏和状态栏。
启用：View → Appearance → Centered Layout
适用场景：写作、写文档、写 Markdown——减少视觉干扰，像在 Word 里一样专注。
全屏模式（Full Screen）
VS Code 占满整个屏幕，隐藏操作系统标题栏和任务栏。
快捷键：F11（Windows/Linux）/ Cmd+Ctrl+F（Mac）
搭配使用：全屏 + 禅模式 = 极致专注体验。
四、快捷键速查表
掌握这些快捷键，布局切换随心所欲：
| 操作 | Windows/Linux | Mac | 说明 |
|---|---|---|---|
| 显示/隐藏侧边栏 | Ctrl+B |
Cmd+B |
最常用 |
| 显示/隐藏次侧边栏 | Ctrl+Alt+B |
Cmd+Alt+B |
|
| 显示/隐藏面板 | Ctrl+J |
Cmd+J |
|
| 最大化/还原面板 | Ctrl+Shift+J |
Cmd+Shift+J |
|
| 垂直拆分编辑器 | Ctrl+\ |
Cmd+\ |
右侧新建组 |
| 下方拆分编辑器 | Ctrl+Alt+\ |
Cmd+Alt+\ |
下方新建组 |
| 切换编辑器组 | Ctrl+1/2/3 |
Cmd+1/2/3 |
|
| 关闭当前标签 | Ctrl+W |
Cmd+W |
|
| 重新打开关闭的标签 | Ctrl+Shift+T |
Cmd+Shift+T |
|
| 全屏 | F11 |
Cmd+Ctrl+F |
|
| 禅模式 | Ctrl+K Z |
Cmd+K Z |
|
| 居中编辑器 | Ctrl+K Ctrl+M |
Cmd+K Cmd+M |
|
| 切换主题 | Ctrl+K T |
Cmd+K T |
|
| 快速打开文件 | Ctrl+P |
Cmd+P |
|
| 命令面板 | Ctrl+Shift+P |
Cmd+Shift+P |
万能入口 |
记不住快捷键？
Ctrl+Shift+P输入 “Toggle Sidebar”、”Toggle Panel” 等关键词即可执行。
五、两个核心概念
如果你要开发 VS Code 扩展，必须理解这两个概念：
View Container（视图容器）
活动栏的每一个图标代表一个视图容器，每个容器内可以包含多个视图（View）。
活动栏图标
└── View Container
├── View 1: 文件夹树
├── View 2: 大纲 (Outline)
└── View 3: 时间线 (Timeline)
内置容器：Explorer、Search、SCM、Run and Debug、Extensions
扩展注册容器：在扩展的 package.json 中通过 contributes.viewsContainers 声明：
{
"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "my-extension",
"title": "My Extension",
"icon": "$(package)"
}
]
},
"views": {
"my-extension": [
{ "id": "my-view", "name": "My Custom View" }
]
}
}
}
Editor Group（编辑器组）
编辑器区域拆分出来的独立窗格，底层是 Grid（序列化网格） 布局系统。
关键特性：
- 支持任意嵌套拆分（2×2、三栏、不规则布局）
- 窗口关闭后布局状态自动保存，下次打开恢复
- 每个组独立管理标签页集合
六、settings.json 布局配置清单
以下是所有布局相关的配置项，按区域分类：
{
// ===== 活动栏 =====
"workbench.activityBar.visible": true,
// ===== 侧边栏 =====
"workbench.sideBar.location": "left", // "left" | "right"
// ===== 面板 =====
"workbench.panel.defaultLocation": "bottom", // "bottom" | "left" | "right" | "top"
"workbench.panel.visible": true,
// ===== 状态栏 =====
"workbench.statusBar.visible": true, // true | false
// ===== 编辑器标签页 =====
"workbench.editor.enablePreview": true, // 单击预览模式
"workbench.editor.enablePreviewFromQuickOpen": true, // 快速打开预览
"workbench.editor.showTabs": "multiple", // "multiple" | "single" | "none"
"workbench.editor.tabSizing": "fit", // "fit" | "shrink" | "fixed"
// ===== 编辑器布局 =====
"workbench.editor.openPositioning": "right", // 新编辑器打开位置
"workbench.editor.openSideBySideDirection": "right", // 并排打开方向
// ===== 迷你地图 =====
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 80,
"editor.minimap.scale": 1,
// ===== 面包屑 =====
"breadcrumbs.enabled": true,
"breadcrumbs.filePath": "on", // "on" | "off" | "only"
"breadcrumbs.symbolPath": "on",
// ===== 主题 & 图标 =====
"workbench.colorTheme": "Default Dark Modern",
"workbench.iconTheme": "vs-seti",
// ===== 禅模式 =====
"zenMode.fullScreen": true,
"zenMode.centerLayout": true,
"zenMode.hideActivityBar": true,
"zenMode.hideStatusBar": true,
"zenMode.hideLineNumbers": false,
"zenMode.restore": false
}
七、多窗口与工作区
VS Code 支持多窗口并行工作：
| 操作 | 方法 |
|---|---|
| 新窗口 | File → New Window 或 Ctrl+Shift+N |
| 分离编辑器组 | 拖拽标签到系统任务栏或其他窗口 |
| 工作区 | File → Open Workspace 打开 .code-workspace 文件 |
| 远程窗口 | 通过 Remote SSH、Dev Containers 连接不同环境 |
窗口布局持久化：
{
"files.hotExit": "onExit", // 退出时保存未保存文件
"window.openFoldersInNewWindow": "on", // 文件夹在新窗口打开
"window.restoreFullscreen": false // 是否恢复全屏状态
}
工作区配置（.code-workspace 文件）可以为不同项目设置独立的：
- 文件夹组合
- 设置覆盖
- 扩展推荐
- 调试配置
八、底层架构速览
对于想深入了解或开发扩展的同学，这里简要介绍 VS Code 的布局架构：
Workbench
├── WorkbenchLayoutService ← 布局总管，管理所有 Part
│ ├── TitlePart ← 标题栏
│ ├── ActivityBarPart ← 活动栏
│ ├── SidebarPart ← 主侧边栏
│ ├── EditorPart ← 编辑器区域（内含 Grid 布局引擎）
│ ├── PanelPart ← 底部面板
│ └── StatusbarPart ← 状态栏
│
├── ViewRegistry ← 视图注册中心
├── GridView ← 网格布局引擎（支持嵌套分割）
└── LayoutState ← 布局状态持久化
关键模块：
vs/workbench/browser/layout— 布局管理核心vs/base/browser/ui/grid/gridview— 网格分割实现vs/workbench/common/views— 视图注册和生命周期vs/workbench/browser/parts/editor/editorPart— 编辑器组管理
九、实用布局技巧
技巧 1：快速切换工作模式
为不同任务设置不同的布局快捷键：
写代码时：侧边栏开 + 面板关 + 两个编辑器组
调试时：侧边栏开 + 面板开 + 调试视图激活
写文档时：全屏 + 禅模式 + 居中布局
技巧 2：拖拽一切
VS Code 的布局元素几乎都可以拖拽：
- 标签页 → 移动到其他编辑器组
- 视图 → 从主侧边栏拖到次侧边栏
- 面板标签 → 拖拽调整面板内标签顺序
- 编辑器组边缘 → 拖拽调整大小
技巧 3：布局重置
如果布局乱了：
View → Reset View Locations→ 恢复所有区域到默认位置workbench.editor.enablePreview设为true→ 恢复预览模式
技巧 4：按项目定制布局
在 .vscode/settings.json 中为项目设置独立布局：
{
// 这个项目不需要 minimap
"editor.minimap.enabled": false,
// 这个项目面板在右侧
"workbench.panel.defaultLocation": "right"
}
总结
VS Code 的 Workbench 布局看似简单，实则蕴含了精心设计的架构：
- 7 大区域各司其职，覆盖了 IDE 的所有功能入口
- 视图容器机制让扩展可以无缝集成到界面中
- 网格布局引擎支持任意拆分和嵌套
- 状态持久化让你的布局配置不会丢失
- 丰富的快捷键让操作效率翻倍
下次觉得 VS Code 界面不够用时，不妨试试拖拽、拆分、禅模式——你会发现一个全新的工作体验。