自定义布局

Visual Studio Code 具有简洁的用户界面和方便的默认布局。同时，VS Code 提供了选项和设置，让您可以根据自己的偏好和工作风格来自定义 UI 布局。在本主题中，我们将重点介绍各种 UI 自定义功能，以便您可以以最适合您工作效率的方式显示视图、编辑器和面板。

本文首先讨论 工作台 自定义，以重新排列侧边栏、视图和面板等 UI 元素。稍后，我们将介绍通过编辑器组、拆分编辑器和编辑器选项卡来自定义 编辑器 区域。

工作台

主侧边栏

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

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

• 右键单击活动栏，然后选择“移动主侧边栏右侧”
• 运行“视图：切换主侧边栏位置”以将主侧边栏切换到右侧和左侧
• 使用“视图”>“外观”>“移动主侧边栏右侧”菜单项
• 在 设置编辑器 中将“工作台 > 侧边栏：位置”（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 窗口标题栏的外观调整为原生 OS 或自定义。更改需要完全重启才能生效。

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

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

• window.menuStyle：将菜单样式调整为原生 OS、自定义或继承自标题栏样式（在 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)）。

编辑器

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

最小地图和面包屑

“视图”>“外观”菜单有一个用于自定义编辑器区域的部分。您会找到用于以下选项的切换按钮：

• 最小地图 - 您当前文件的 可视化概览。“视图：切换最小地图”。
• 面包屑 - 显示活动文件的 文件夹、文件和当前符号 信息。“视图：切换面包屑”。
• 粘滞滚动 - 显示活动文件中 嵌套的符号范围。“视图：切换粘滞滚动”。

编辑器组

默认情况下，每个打开的编辑器都进入同一个“编辑器组”，并在右侧添加一个新的编辑器选项卡。您可以创建新的编辑器组，以对相似或相关的文件进行分组，或允许 并排编辑 同一个文件。

通过将编辑器拖到侧边来创建新的编辑器组，或使用编辑器选项卡上下文菜单中的“拆分”命令之一，将当前编辑器复制到一个新的编辑器组中，位于左侧、右侧、上方或下方。

“拆分”编辑器命令也适用于“视图”>“编辑器布局”菜单和命令面板。

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

组内拆分

您还可以使用“视图：在组内拆分编辑器”命令在同一组中拆分编辑器以进行并排编辑（⌘K ⇧⌘\ (Windows, Linux Ctrl+K Ctrl+Shift+\)）。

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

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

在两侧之间导航

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

Workbench > Editor: Split in Group Layout（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 编辑器。
• 代码导航 - 快速浏览您的源代码。