自定义布局

Visual Studio Code 拥有简洁的用户界面和便捷的默认布局。同时，VS Code 提供了多种选项和设置，允许你自定义 UI 布局，以适应你的偏好和工作风格。在本主题中，我们将重点介绍各种 UI 自定义，以便你可以用最有效的方式显示视图、编辑器和面板。

本文首先讨论了 工作台 (Workbench) 的自定义，以重新排列侧边栏、视图和面板等 UI 元素。在文章的后续部分，我们将介绍使用编辑器组、拆分编辑器和编辑器选项卡来自定义 编辑器 (Editor) 区域。

工作台

主侧边栏

默认情况下，主侧边栏位于工作台的左侧，显示诸如资源管理器、搜索和源代码管理视图。你可以通过选择活动栏中的图标来快速切换视图。

要更改主侧边栏的位置，你可以

• 右键单击活动栏，然后选择 将主侧边栏移至右侧
• 运行 视图: 切换主侧边栏位置 以将主侧边栏在左右之间切换
• 使用 视图 > 外观 > 将主侧边栏移至右侧 菜单项
• 在设置编辑器中，将 工作台 > 侧边栏: 位置 (workbench.sideBar.location) 设置为 right

辅助侧边栏

默认情况下，VS Code 在位于编辑器区域左侧的主侧边栏中显示视图。同时打开两个视图可能会很有用。为此，你可以使用 辅助侧边栏 来显示与主侧边栏相对的视图。辅助侧边栏始终位于主侧边栏的对面，无论你是否切换了主侧边栏的位置。

下图显示了主侧边栏中的资源管理器视图和辅助侧边栏中的 Copilot Chat 视图

要显示辅助侧边栏，你可以使用 VS Code 标题栏中的布局控件。如果布局控件不可见，右键单击 VS Code 标题栏并选择 布局控件。

或者，你也可以按以下方式打开辅助侧边栏

• 运行 视图: 切换辅助侧边栏可见性 命令 (或按 ⌥⌘B (Windows、Linux Ctrl+Alt+B))
• 使用 视图 > 外观 > 辅助侧边栏 菜单项

如果你想在新窗口或工作区打开时自动显示辅助侧边栏，你可以通过 workbench.secondarySideBar.defaultVisibility 设置来配置。

在任何时候，你都可以将视图和面板拖放到主侧边栏或辅助侧边栏中。VS Code 将在你的会话之间记住视图和面板的布局。

命令面板位置

你可以通过用鼠标光标抓住顶部边缘并将其拖到其他地方来移动命令面板。你还可以选择标题栏中的 自定义布局 控件，然后选择一个预配置的 快速输入位置。

活动栏位置

默认情况下，活动栏随主侧边栏移动并停留在工作台的外边缘。你也可以选择隐藏活动栏，或将其移动到主侧边栏的顶部或底部。

活动栏位置 菜单可从活动栏上下文菜单中找到，或在 视图 > 外观 > 活动栏位置 下找到，选项包括 默认、顶部、底部 或 隐藏。

当活动栏位于顶部或底部位置时，通常位于活动栏底部的 帐户 和 管理 按钮会移动到标题栏的右侧。

自定义布局控件

VS Code 标题栏也有按钮，用于切换主要 UI 元素（侧边栏和面板区域）的可见性。

最右侧的按钮会弹出 自定义布局 下拉菜单，你可以在其中进一步更改各种 UI 元素的可见性和布局，并包含多种布局模式

布局模式包括

• 全屏 - 将编辑器设置为填充整个显示屏幕。视图: 切换全屏 (⌃⌘F (Windows、Linux F11))。
• 禅模式 - 隐藏除编辑器区域外的所有 UI。视图: 切换禅模式 (⌘K Z (Windows、Linux Ctrl+K Z))。
• 居中布局 - 将编辑器居中显示在编辑器区域内。视图: 切换居中布局。

窗口和菜单样式

你可以使用以下设置自定义 VS Code 窗口和菜单栏的外观

• window.titleBarStyle: 调整 VS Code 窗口标题栏的外观，可选择操作系统原生样式或自定义样式。更改需要完全重启才能生效。

• window.title: 根据当前上下文（如打开的工作区或活动编辑器）配置 VS Code 窗口标题。变量会根据上下文进行替换。例如，${activeEditorShort} 将显示当前活动编辑器的文件名。你可以组合多个变量，例如 ${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName}。

• window.titleSeparator: 在 window.title 设置中使用的分隔符。

• window.menuStyle: 调整菜单样式，可选择操作系统原生样式、自定义样式或继承自标题栏样式（在 window.titleBarStyle 中定义）。这也会影响上下文菜单的外观。更改需要完全重启才能生效。

• window.menuBarVisibility: 配置菜单栏的可见性。

  • classic: 菜单栏显示在窗口顶部，仅当窗口处于全屏模式时隐藏。
  • visible: 菜单栏始终可见，即使窗口处于全屏模式下。
  • toggle: 菜单栏被隐藏，按一下 Alt 键即可使其可见。
  • compact: 菜单移至侧边栏中。
  • hidden: 菜单栏始终隐藏。

面板

面板区域显示诸如“问题”、“终端”和“输出”面板等 UI 元素，默认情况下位于编辑器区域下方。

面板位置

你可以将该区域移动到编辑器的左侧、右侧、底部或顶部。你可以在 视图 > 外观 > 面板位置 菜单下，或通过面板标题栏上下文菜单配置这些选项。

你也可以在命令面板中使用 移动面板 命令

• 视图: 将面板移至左侧 (workbench.action.positionPanelLeft)
• 视图: 将面板移至右侧 (workbench.action.positionPanelRight)
• 视图: 将面板移至底部 (workbench.action.positionPanelBottom)
• 视图: 将面板移至顶部 (workbench.action.positionPanelTop)

面板对齐

此选项允许你配置底部面板在窗口中延伸的距离。有四个选项

• 居中 - 这是默认行为。面板仅跨越编辑器区域的宽度。
• 两端对齐 - 面板跨越整个窗口的宽度。
• 左侧 - 面板从窗口的左边缘延伸到编辑器区域的右边缘。
• 右侧 - 面板从窗口的右边缘延伸到编辑器区域的左边缘。

在所有面板对齐选项中，活动栏被视为窗口的边缘。

你可以在 视图 > 外观 > 对齐面板 菜单下、面板标题上下文菜单中，或使用新的 将面板对齐方式设置为... 命令来配置这些选项。

最大化面板大小

当面板对齐方式为 **居中** 时，你可以通过面板区域右上角的 **最大化面板大小** 箭头按钮，快速切换面板区域以填充整个编辑器区域。最大化面板中的箭头按钮指向下方，以将面板恢复到原始大小。

你也可以通过 **视图: 切换最大化面板** 命令来最大化面板区域。

注意: 除了自定义整个面板区域显示之外，各个面板可能还有自己的布局自定义。例如，终端允许你拥有多个打开的选项卡和拆分现有终端。

拖放视图和面板

VS Code 在主侧边栏和面板区域中具有默认的视图和面板布局，但你可以在这些区域之间拖放视图和面板。例如，你可以将源代码管理视图拖放到面板区域，或将问题面板放入主侧边栏

注意: 请记住，你可以通过 **重置位置** 上下文菜单项将视图和面板重置回其默认位置，或者通过常规的 **视图: 重置视图位置** 命令重置所有视图和面板。

你还可以将视图和面板添加到现有视图或面板以创建组。例如，你可以通过将输出面板拖到资源管理器活动栏项上，然后将其放入视图中，将其移动到资源管理器视图组

你不仅限于使用鼠标移动视图和面板。你还可以通过键盘使用 **视图: 移动视图** 和 **视图: 移动焦点视图** 命令来自定义布局，这些命令的下拉菜单允许你选择要移动的 UI 元素和目标，可以是侧边栏或面板区域等位置，也可以是现有视图或面板以创建组。

工具栏

大多数 VS Code 视图和面板的 UI 右上方都显示有工具栏。例如，“搜索”视图有一个工具栏，其中包含诸如 **刷新**、**清除搜索结果** 等操作。

隐藏工具栏中的项目

如果你觉得工具栏过于拥挤，并且希望隐藏不常用的操作，你可以右键单击任何操作并选择其 **隐藏** 命令（例如 **隐藏 '清除搜索结果'**），或者取消选中下拉菜单中的任何操作。隐藏的操作会移动到 ... **更多操作** 菜单中，并可以从那里调用。

要将操作恢复到工具栏，请右键单击工具栏按钮区域并选择 **重置菜单** 命令或重新勾选已隐藏的操作。要恢复 VS Code 中的所有菜单，请从命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 运行 **视图: 重置所有菜单**。

编辑器

你可以独立于工作台用户界面自定义 VS Code 编辑器区域的布局。默认情况下，编辑器区域显示小地图、面包屑、编辑器选项卡等实用功能，并具有可选的 UI，例如 Sticky Scroll（粘滞滚动）。你还可以调整编辑器本身的布局或将其移动到浮动窗口中。

小地图和面包屑

**视图** > **外观** 菜单中有一个用于自定义编辑器区域的部分。你将找到以下切换选项

• 小地图 - 当前文件的视觉概览。**视图: 切换小地图**。
• 面包屑 - 显示活动文件的文件夹、文件和当前符号信息。**视图: 切换面包屑**。
• 粘滞滚动 - 显示活动文件中嵌套符号范围。**视图: 切换粘滞滚动**。

编辑器组

默认情况下，每个打开的编辑器都进入同一个 **编辑器组**，并在右侧添加一个新的编辑器选项卡。你可以创建新的编辑器组，以便对相似或相关的文件进行分组，或允许对同一文件进行并排编辑。通过将编辑器拖到侧面，或使用上下文菜单中的 **拆分** 命令将当前编辑器复制到左侧、右侧、上方或下方的新编辑器组来创建新的编辑器组。

**拆分** 编辑器命令也可从 **视图** > **编辑器布局** 菜单和通过命令面板获得。

如果你想在垂直和水平编辑器组布局之间快速切换，可以使用 **切换垂直/水平编辑器布局** 命令 (⌥⌘0 (Windows、Linux Shift+Alt+0))。

组内拆分

你还可以使用 **视图: 组内拆分编辑器** 命令 (⌘K ⇧⌘\ (Windows、Linux Ctrl+K Ctrl+Shift+\)) 在同一组中拆分编辑器以进行并排编辑。

使用组内拆分功能时，有一些特定命令用于切换此模式并在两个拆分编辑器之间导航

• 视图: 组内拆分编辑器 - 拆分当前编辑器。
• 视图: 切换组内拆分编辑器 - 切换活动编辑器的拆分模式。
• 视图: 组内合并编辑器 - 返回到活动文件的单个编辑器。
• 视图: 切换组内拆分编辑器布局 - 在水平和垂直布局之间切换。

要在侧边之间导航

• 视图: 聚焦活动编辑器中的第一侧 - 将焦点移动到拆分编辑器的第一侧（左侧或顶部）。
• 视图: 聚焦活动编辑器中的第二侧 - 将焦点移动到拆分编辑器的第二侧（右侧或底部）。
• 视图: 聚焦活动编辑器中的另一侧 - 在拆分编辑器侧边之间切换。

工作台 > 编辑器: 组内拆分布局 (workbench.editor.splitInGroupLayout) 设置允许你将首选的拆分编辑器布局设置为水平（默认）或垂直。

网格布局

如果你想对编辑器组布局有更多控制，可以使用网格布局，你可以在其中显示多行多列的编辑器组。**视图** > **编辑器布局** 菜单列出了各种编辑器布局选项（例如，**两列**、**三列**、**网格 (2x2)**），你可以通过抓取和移动它们之间的分隔条来调整组大小。

浮动窗口

你可以在浮动窗口中打开编辑器、终端或特定视图。这在多显示器设置中非常有用，你可以将编辑器移动到另一个显示器，甚至移动到同一显示器上的不同位置。

要在浮动窗口中打开编辑器，将其从主窗口拖出并将其拖放到当前 VS Code 窗口之外的任何位置。

浮动窗口能够以网格布局打开任意数量的编辑器。窗口在重启后将恢复到其位置，并重新打开其中的所有编辑器。

分离编辑器的另一种方法是右键单击编辑器选项卡，然后选择 **移至新窗口** (workbench.action.moveEditorToNewWindow) 或 **复制到新窗口** (⌘K O (Windows、Linux Ctrl+K O)) 选项。

要移动整个编辑器组，请使用 **将编辑器组移至新窗口** () 或 **将编辑器组复制到新窗口** () 命令。

紧凑模式

要从浮动窗口中移除不必要的 UI 元素并为内容腾出更多空间，请选择浮动窗口标题栏中的 **设置紧凑模式** 选项。再次选择它以将浮动窗口恢复到其原始模式。

置顶

你可以通过选择浮动窗口标题栏中的 **始终置顶** 选项，将浮动窗口置顶显示。这在你在主 VS Code 窗口中工作时，保持终端或预览窗口始终可见会很有用。再次选择它以取消置顶浮动窗口。

固定选项卡

如果你希望编辑器选项卡始终可见，可以将其固定到编辑器选项卡栏。你可以从上下文菜单或使用命令 **视图: 固定编辑器** (⌘K ⇧Enter (Windows、Linux Ctrl+K Shift+Enter)) 来固定编辑器选项卡。

固定选项卡有助于你访问重要的文件，因为

• 固定选项卡始终在非固定选项卡之前出现。
• 如果你打开了许多选项卡，它们不会滚动出视图。
• 在使用 **关闭其他** 或 **关闭所有** 等编辑器选项卡命令时，它们不会关闭。
• 即使你超过了打开编辑器的设定限制，它们也不会关闭。

通过单击固定图标、使用 **取消固定** 编辑器选项卡上下文菜单项，或使用 **视图: 取消固定编辑器** 命令来取消固定编辑器。

你可以使用 **工作台 > 编辑器: 固定选项卡大小** (workbench.editor.pinnedTabSizing) 设置来选择你希望如何显示固定编辑器。选项包括

• normal: 固定选项卡继承其他选项卡的外观（默认）
• shrink: 固定选项卡缩小到固定大小，显示编辑器标签的一部分。
• compact: 固定选项卡将只显示为图标或编辑器标签的首字母。

你还可以通过设置 **工作台 > 编辑器: 固定选项卡位于单独一行**，将固定编辑器选项卡显示在常规编辑器选项卡栏上方的一行。你可以通过在两行之间拖放选项卡来固定和取消固定编辑器。

锁定编辑器组

当使用多个编辑器时，通常会有一个或多个你希望始终保持可见的编辑器。锁定编辑器组功能，即整个编辑器组被锁定并可见，提供了稳定的显示，并且任何打开新编辑器的请求都会在另一个组中创建它。你可以通过编辑器组工具栏中的锁定图标来判断编辑器组是否被锁定。

你可以通过从编辑器工具栏 **更多操作** ... 下拉菜单中选择 **锁定组**，或运行 **视图: 锁定编辑器组** 命令来锁定编辑器组。

你可以通过单击锁定图标或运行 **视图: 解锁编辑器组** 命令来解锁编辑器组。

锁定组与非锁定组的行为不同

• 新编辑器不会在锁定组中打开，除非明确地将其移动到那里（例如，通过拖放）。
• 如果新编辑器跳过锁定组，它将在最近使用的非锁定组中打开，或者在锁定组的旁边创建一个新组。
• 编辑器组的锁定状态在重启后会持久化并恢复。
• 你也可以锁定空组，从而实现更稳定的编辑器布局。

主要用例是针对编辑器区域中的终端。例如，你可能想在左侧编辑文本，而在右侧有一个始终可见的终端。当创建一个终端编辑器并将其移动到侧面时，它将自动锁定。这意味着即使右侧的终端处于焦点状态，打开文件也会在左侧打开，而无需先手动更改焦点。

自动锁定组可以使用 workbench.editor.autoLockGroups 设置进行配置，该设置默认为仅终端编辑器，但任何编辑器类型都可以添加以获得相同的行为。

与编辑器组锁定相关的命令

• 视图: 锁定编辑器组 - 锁定活动编辑器组。
• 视图: 解锁编辑器组 - 解锁活动的锁定编辑器组。
• 视图: 切换编辑器组锁定 - 锁定或解锁活动编辑器组。

你必须拥有不止一个编辑器组才能使用这些命令。

后续步骤

继续阅读以了解：

• Visual Studio Code 用户界面 - VS Code 的快速上手指南。
• 基本编辑 - 了解功能强大的 VS Code 编辑器。
• 代码导航 - 快速浏览您的源代码。