自定义布局

Visual Studio Code 附带了一个简洁的用户界面和方便的默认布局。同时，VS Code 还提供了多种选项和设置，让您可以自定义 UI 布局，以适应您的个人偏好和工作风格。在本主题中，我们将重点介绍各种 UI 自定义功能，以便您能以最高效的方式展示视图、编辑器和面板。

本文首先讨论工作台 (Workbench) 的自定义设置，以重新排列侧边栏、视图和面板等 UI 元素。随后，我们将介绍如何通过编辑器组、分割编辑器和编辑器标签页来自定义编辑器 (Editor) 区域。

工作台

主侧边栏

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

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

• 右键点击活动栏，选择将主侧边栏移至右侧
• 运行视图：切换主侧边栏位置命令，在左侧和右侧之间切换
• 使用视图 > 外观 > 将主侧边栏移至右侧菜单项
• 在设置编辑器中，将 Workbench > Side Bar: Location ( workbench.sideBar.location 在 VS Code 中打开 在 VS Code Insiders 中打开 ) 设置为 right。

辅助侧边栏

默认情况下，VS Code 在编辑器区域左侧的主侧边栏中显示视图。同时打开两个视图往往非常有用。为此，您可以使用辅助侧边栏在主侧边栏的对面显示视图。无论您是否更改了主侧边栏的位置，辅助侧边栏始终位于主侧边栏的另一侧。

当您首次打开文件夹或多根工作区时，辅助侧边栏默认显示。在空窗口中，它默认隐藏。您可以使用 workbench.secondarySideBar.defaultVisibility 在 VS Code 中打开 在 VS Code Insiders 中打开 设置来配置此行为。

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

如果辅助侧边栏被隐藏，您可以使用 VS Code 标题栏中的布局控件将其显示出来。如果布局控件不可见，请右键点击 VS Code 标题栏并选择布局控件。

或者，您也可以通过以下方式打开辅助侧边栏：

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

您可以随时将视图和面板拖放到主侧边栏或辅助侧边栏中。VS Code 会在您的各个会话中记住视图和面板的布局。

命令面板位置

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

活动栏位置

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

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

当活动栏处于顶部或底部时，通常位于活动栏底部的账户和管理按钮将移至标题栏右侧。

活动栏大小

活动栏支持两种尺寸：较大的默认尺寸和与经典活动栏外观匹配的紧凑尺寸。要切换到紧凑模式，请将 workbench.activityBar.compact 在 VS Code 中打开 在 VS Code Insiders 中打开 设置为 true。

您还可以通过右键点击活动栏，并从活动栏大小子菜单中选择默认或紧凑来切换尺寸。

自定义布局控制

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

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

这些布局模式包括：

• 全屏模式 - 将编辑器设置为填满整个显示屏。视图：切换全屏 (⌃⌘F (Windows, Linux F11))。
• 禅模式 (Zen Mode) - 隐藏除编辑器区域外的所有 UI。视图：切换禅模式 (⌘K Z (Windows, Linux Ctrl+K Z))。
• 居中布局 - 将编辑器置于编辑器区域中央。视图：切换居中布局。

窗口和菜单样式

您可以通过以下设置自定义 VS Code 窗口和菜单栏的外观：

• window.titleBarStyle 在 VS Code 中打开 在 VS Code Insiders 中打开 ：调整 VS Code 窗口标题栏的外观，使其采用原生 OS 风格或自定义风格。更改需要完全重启才能生效。

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

• window.titleSeparator 在 VS Code 中打开 在 VS Code Insiders 中打开 ：用于 window.title 在 VS Code 中打开 在 VS Code Insiders 中打开 设置中的分隔符字符。

• window.menuStyle 在 VS Code 中打开 在 VS Code Insiders 中打开 ：将菜单样式调整为原生 OS 风格、自定义风格，或继承自标题栏样式（在 window.titleBarStyle 在 VS Code 中打开 在 VS Code Insiders 中打开 中定义）。这也影响上下文菜单的外观。更改需要完全重启才能生效。

• window.menuBarVisibility 在 VS Code 中打开 在 VS Code Insiders 中打开 ：配置菜单栏的可见性。

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

面板

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

面板位置

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

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

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

面板对齐方式

此选项允许您配置底部面板在窗口中的跨度。共有四个选项：

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

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

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

最大化面板大小

当面板对齐方式为居中时，您可以使用面板区域右上角的向下箭头按钮，快速切换面板区域以填满整个编辑器区域。最大化后的面板中，该按钮变为向上箭头，用于将面板恢复为原始大小。

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

拖放视图和面板

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

您还可以将视图和面板添加到现有视图或面板中以创建组。例如，您可以将“输出”面板拖动到“资源管理器”活动栏项上方并放入其中，从而将其移动到“资源管理器”视图组。

您不必局限于使用鼠标来移动视图和面板。您还可以通过键盘使用视图：移动视图和视图：移动聚焦视图命令来自定义布局，下拉菜单可让您选择要移动的 UI 元素和目标（例如侧边栏或面板区域，或者现有的视图/面板以创建组）。

通知

默认情况下，Visual Studio Code 在工作台右下角显示通知 toast 和通知中心。您可以使用 workbench.notifications.position 在 VS Code 中打开 在 VS Code Insiders 中打开 设置（实验性）来更改通知的位置。

可用的位置有：

• bottom-right（默认） - 通知出现在右下角。铃铛图标位于状态栏中。
• bottom-left - 通知出现在左下角。铃铛图标移至状态栏左侧。
• top-right - 通知从右上角滑入，类似于 OS 级别的通知。铃铛图标从状态栏移至标题栏。

您也可以直接从通知中心更改通知位置。通过选择铃铛图标打开通知中心，然后选择标题工具栏中的位置图标来选择不同的位置。

当通知位置设置为 top-right 时，使用 workbench.notifications.showInTitleBar 在 VS Code 中打开 在 VS Code Insiders 中打开 设置来控制铃铛图标是否在标题栏中可见。

工具栏

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

隐藏工具栏中的项目

如果您觉得工具栏太拥挤，想要隐藏不常用的操作，可以右键点击任何操作并选择隐藏命令（例如隐藏“清除搜索结果”），或者取消选中下拉菜单中的任何操作。隐藏的操作将移至 ... 更多操作菜单，并可从该菜单调用。

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

编辑器

您可以独立于工作台用户界面自定义 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 在 VS Code 中打开 在 VS Code Insiders 中打开 ) 设置允许您将首选的拆分编辑器布局设置为水平（默认）或垂直。

网格布局

如果您希望更好地控制编辑器组布局，可以使用网格布局，其中可以看到多行多列的编辑器组。视图 > 编辑器布局菜单列出了各种编辑器布局选项（例如两列、三列、网格 (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: Pinned Tab Sizing ( workbench.editor.pinnedTabSizing 在 VS Code 中打开 在 VS Code Insiders 中打开 ) 设置来选择固定编辑器的显示方式。选项包括：

• normal：固定标签页继承其他标签页的外观（默认）。
• shrink：固定标签页缩小到固定大小，显示部分编辑器标签文字。
• compact：固定标签页仅显示图标或编辑器标签的首字母。

您还可以通过设置 Workbench > Editor: Pinned Tabs On Separate Row，将固定的编辑器标签页显示在常规编辑器标签栏上方单独的一行中。您可以通过在两行之间拖放标签页来固定和取消固定编辑器。

锁定编辑器组

使用多个编辑器时，通常会有一些您想要始终保持可见的文件。锁定编辑器组功能（整个编辑器组被锁定并可见）提供了稳定的显示效果，任何打开新编辑器的请求都将在另一个组中创建。您可以通过编辑器组工具栏中的锁定图标判断编辑器组是否已锁定。

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

您可以通过点击锁定图标或运行视图：解锁编辑器组命令来解锁编辑器组。

锁定组的行为与解锁组不同：

• 新编辑器不会在锁定组中打开，除非显式将其移动到那里（例如通过拖放）。
• 如果新编辑器跳过了一个锁定组，它将在最近使用的未锁定组中打开，或者在锁定组的一侧创建一个新组。
• 编辑器组的锁定状态会被保留并在重启后恢复。
• 您也可以锁定空组，从而实现更稳定的编辑器布局。

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

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

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

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

您必须拥有多个编辑器组，这些命令才可用。

后续步骤

继续阅读以了解：

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