自定义布局

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

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

工作台

主要侧边栏

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

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

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

次要侧边栏

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

下图显示了主要侧边栏中的资源管理器视图和次要侧边栏中的 Copilot 聊天视图

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

或者，您还可以按如下方式打开次要侧边栏

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

随时可以将视图和面板拖放到主要或次要侧边栏中。VS Code 会在您的会话之间记住视图和面板的布局。

活动栏位置

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

**活动栏位置** 菜单可从活动栏上下文菜单中获得，或在 **视图** > **外观** > **活动栏位置** 下，它具有选项 **默认**、**顶部**、**底部** 或 **隐藏**。

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

面板

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

面板位置

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

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

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

面板对齐方式

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

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

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

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

最大化面板大小

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

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

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

自定义布局控件

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

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

布局模式包括

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

拖放视图和面板

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

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

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

您不仅限于使用鼠标移动视图和面板。您还可以使用键盘和视图：移动视图以及视图：移动焦点视图命令自定义布局，其中下拉菜单允许您选择要移动的 UI 元素以及目标位置（例如侧边栏或面板区域）或现有视图或面板以创建组。

工具栏

大多数 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.splitInGroupLayout）设置 允许您将首选拆分编辑器布局设置为水平（默认）或垂直。

网格布局

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

浮动编辑器窗口

您可以在浮动窗口中打开编辑器，例如将编辑器移动到监视器的另一个位置，甚至移动到另一个监视器。

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

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

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

如果您要移动整个编辑器组，请选择将编辑器组移动到新窗口（）或将编辑器组复制到新窗口（）。

固定选项卡

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

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

• 固定选项卡始终显示在非固定选项卡之前。
• 如果您打开了多个选项卡，它们不会滚动到视图之外。
• 在使用关闭其他或关闭全部等编辑器选项卡命令时，它们不会关闭。
• 即使您超出了打开编辑器的设置限制，它们也不会关闭。

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

您可以使用工作台>编辑器：固定选项卡大小（workbench.editor.pinnedTabSizing）设置来选择如何显示固定编辑器。选项包括

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

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

锁定编辑器组

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

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

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

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

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

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

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

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

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

您必须具有多个编辑器组才能使用这些命令。

后续步骤

继续了解

• Visual Studio Code 用户界面 - VS Code 的快速入门。
• 基本编辑 - 了解强大的 VS Code 编辑器。
• 代码导航 - 快速浏览您的源代码。