自定义布局

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

注意：如果您是 VS Code 的新手，您可能需要从 用户界面概述 开始或查看 提示和技巧 文章。

本文首先讨论 Workbench 自定义以重新排列 UI 元素（例如侧边栏、视图和面板）。在本文后面，我们将介绍使用编辑器组、拆分编辑器和编辑器选项卡自定义编辑 器 区域。

主要侧边栏

默认（主）侧栏显示工作台左侧的文件资源管理器、搜索和源代码管理等视图。如果您更喜欢在右侧，您可以：

右键单击活动栏并选择 向右移动主侧栏 。

运行 视图：切换主侧栏位置 以左右切换主侧栏。

将 工作台 > 侧栏：位置 ( workbench.sideBar.location ) 设置 为 right 。

二级侧边栏

默认情况下，VS Code 在编辑器区域左侧的 主侧栏中 显示所有视图。如果您喜欢在其他位置显示视图，可以打开右侧的 辅助侧栏，然后将视图拖放到该侧栏中。

如果您想同时查看两个视图，例如左侧的文件资源管理器和右侧的源代码管理视图，这可能会很有用：

要显示辅助侧边栏，您可以：

运行 视图：切换辅助侧栏可见性 ( ⌥⌘B (Windows、Linux Ctrl+Alt+B ) )。

检查 “视图” > “外观” > “辅助侧边栏” 菜单项。

辅助侧边栏最初是空的，但您可以将视图和面板拖放到其中，并且布局会在 VS Code 会话中保留。

注意：您可以使用 “视图：重置视图位置” 命令将视图和面板重置回其默认位置。

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

您还可以使用“移动面板” 命令将区域移动到编辑器的左侧或右侧：

视图：向左移动面板 ( workbench.action.positionPanelLeft )

视图：向右移动面板 ( workbench.action.positionPanelRight )

视图：将面板移至底部 ( workbench.action.positionPanelBottom )

您可以在视图 > 外观 > 面板位置 、面板标题栏上下文菜单下的菜单中配置这些选项，或者使用新的 视图：移动面板 命令。

此选项允许您配置底部面板跨越窗口的距离。有四种选择：

中心 - 这是默认行为。该面板仅跨越编辑器区域的宽度。

对齐 - 面板跨越窗口的整个宽度。

左 - 面板从窗口的左边缘延伸到编辑器区域的右边缘。

右 - 面板从窗口的右边缘延伸到编辑器区域的左边缘。

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

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

最大化面板尺寸

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

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

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

自定义布局控件

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

最右边的按钮会弹出 “自定义布局” 下拉列表，您可以在其中进一步更改各种 UI 元素的可见性和布局，并包括多种布局模式：

布局模式有：

全屏 - 设置编辑器以填充整个显示屏幕。 查看：切换全屏 ( ⌃⌘F (Windows、Linux F11 ) )。

Zen 模式 - 隐藏除编辑器区域之外的所有 UI。 查看：切换 Zen 模式 ( ⌘KZ (Windows、Linux Ctrl+KZ ) )。

居中布局 - 将编辑器置于编辑器区域的中心。 视图：切换居中布局 。

拖放视图和面板

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+\ ) )拆分同一组中的编辑器以进行并排编辑。

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

View: Split Editor in Group - 拆分当前编辑器。

视图：在组中切换拆分编辑器 - 在活动编辑器的拆分模式之间切换。

查看：将编辑器加入组 - 返回到活动文件的单个编辑器。

视图：切换组中拆分编辑器的布局 - 在水平和垂直布局之间切换。

要在两侧之间导航：

视图：在活动编辑器中聚焦第一侧 - 将焦点移至拆分编辑器的第一侧（左侧或顶部）。

视图：在活动编辑器中聚焦第二面 - 将焦点移至第二面（右侧或底部）。

视图：在活动编辑器中聚焦另一侧 - 在拆分编辑器两侧之间切换。

通过“ 工作台”>“编辑器：按组布局拆分 ”( workbench.editor.splitInGroupLayout ) 设置 ，您可以将首选拆分编辑器布局设置为水平（默认）或垂直。

如果您想对编辑器组布局进行更多控制，可以使用 网格布局 ，其中可以显示编辑器组的多行和多列。 “视图 ” > “编辑器布局” 菜单列出了各种编辑器布局选项（例如， 两列 、 三列 、 网格 (2x2) ），您可以通过抓住并移动组之间的窗框来调整组大小。

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

固定选项卡可帮助访问对您来说重要的文件，例如：

固定选项卡始终先出现在非固定选项卡之前。

如果您打开了许多选项卡，它们不会滚动到视图之外。

使用编辑器选项卡命令（例如 Close Others 或 Close All ） 时，它们不会关闭。

即使您超出打开编辑器的设定限制，它们也不会关闭。

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

您可以使用“工作台”>“编辑器：固定选项卡大小调整 ”( workbench.editor.pinnedTabSizing ) 设置来选择显示固定编辑器的方式。选项有：

normal ：固定选项卡继承其他选项卡的外观（默认）

shrink ：固定选项卡缩小至固定大小，显示编辑器标签的一部分。

compact ：固定选项卡仅显示为图标或编辑器标签的第一个字母。

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

锁定的编辑器组

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

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

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

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

新编辑器不会在锁定组中打开，除非明确移动到那里（例如，通过拖放）。

如果新编辑器跳过锁定组，它将在最近使用的未锁定组中打开，或者在锁定组的一侧创建一个新组。

编辑器组的锁定状态会在重新启动后保留并恢复。

您也可以锁定空组，从而实现更稳定的编辑器布局。

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

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

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

查看：锁定编辑器组 - 锁定活动编辑器组。

查看：解锁编辑器组 - 解锁活动的锁定编辑器组。

查看：切换编辑器组锁定 - 锁定或解锁活动编辑器组。

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

继续阅读以了解：

Visual Studio Code 用户界面 - 快速了解 VS Code。

基本编辑 - 了解强大的 VS Code 编辑器。

代码导航 - 快速浏览源代码。