自定义布局
Visual Studio Code 具有简单的用户界面和方便的默认布局。同时，VS Code 提供了选项和设置，使您可以自定义 UI 布局以满足您的偏好和工作风格。在本主题中，我们将重点介绍各种 UI 自定义，以便您可以以对您最具生产力的方式显示视图、编辑器和面板。
本文首先讨论Workbench定制，以重新排列用户界面元素，如侧边栏、视图和面板。稍后在文章中，我们将涵盖Editor区域的定制，包括编辑器组、拆分编辑器和编辑器标签。
工作台
主要侧边栏
默认情况下，主侧栏位于工作台的左侧，显示资源管理器、搜索和源代码控制视图等视图。您可以通过选择活动栏中的图标快速在视图之间切换。
要更改主侧边栏的位置，您可以：
- 右键单击活动栏并选择移动主侧栏向右
- 运行 视图：切换主侧边栏位置 以将主侧边栏切换到右侧和左侧
- 使用 视图 > 外观 > 将主侧栏移至右侧 菜单项
- 设置 工作台 > 侧边栏: 位置 (工作台.侧栏.位置) 设置为
右在 设置编辑器
次要侧边栏
默认情况下，VS Code 在编辑器区域左侧的主侧栏中显示视图。同时查看两个视图可能会很有用。为此，您可以使用次侧栏来显示与主侧栏相对的视图。次侧栏总是相对于主侧栏定位，无论您是否切换了主侧栏的位置。
以下图像显示了主侧栏中的资源管理器视图和次侧栏中的Copilot聊天视图：
要显示次级侧栏，您可以在 VS Code 标题栏中使用布局控制。如果布局控制不可见，请右键单击 VS Code 标题栏并选择 布局控制。
或者，您也可以按以下步骤打开右侧栏：
- 运行 视图：切换次级侧栏可见性 命令（或按 ⌥⌘B （Windows, Linux Ctrl+Alt+B））
- 使用 视图 > 外观 > 次要侧栏 菜单项
如果您希望在打开新Windows或工作区时自动显示次要侧边栏，您可以使用以下配置进行设置
任何时候，你都可以将视图和面板拖放到主侧栏或次侧栏中。VS Code 会记住你在各个会话中的视图和面板布局。
您可以使用视图：重置视图位置命令将视图和面板恢复到默认位置。
命令面板位置
你可以通过用鼠标指针抓取顶部边缘并将其拖动到其他位置来移动命令面板。你也可以在标题栏中选择自定义布局控件，然后选择一个预配置的快速输入位置。
活动栏位置
默认情况下，活动栏会随主侧栏一起移动，并保持在工作台的外边缘。您也可以选择隐藏活动栏，或者将其移动到主侧栏的顶部或底部。
活动栏位置菜单可以从活动栏上下文菜单中找到，或者在视图 > 外观 > 活动栏位置有选项默认，顶部，底部，或隐藏。
当活动栏位于顶部或底部时，账户和管理按钮，通常位于活动栏的底部，移动到标题栏的右侧。
自定义布局控制
VS Code 标题栏也有按钮可以切换主 UI 元素（侧边栏和面板区域）的可见性。
最右边的按钮会弹出自定义布局下拉菜单，在这里您可以进一步更改各种用户界面元素的可见性和布局，并包括几种布局模式：
布局模式有：
- 全屏 - 将编辑器设置为填充整个显示屏幕。视图：切换全屏 (⌃⌘F (Windows, Linux F11)).
- 禅意模式 - 隐藏所有用户界面，仅保留编辑区域。视图：切换禅意模式 (⌘K Z (Windows, Linux Ctrl+K Z))。
- 居中布局 - 将编辑器在编辑器区域居中。视图：切换居中布局.
Windows和菜单样式
您可以通过以下设置自定义 VS Code Windows和菜单栏的外观：
-
Windows标题栏样式: 调整 VS Code Windows标题栏的外观以符合操作系统或自定义。更改需要完全重启才能应用。
-
Windows标题: 根据当前上下文（例如打开的工作区或活动编辑器）配置 VS Code Windows标题。变量根据上下文进行替换。例如，
${活动编辑器简}将显示当前活动编辑器的文件名。您可以组合多个变量，例如，${脏}${活动编辑器简短}${分隔符}${根名称}${分隔符}${配置文件名称}${分隔符}${应用程序名称}输入：. -
Windows标题分隔符: 在此使用的分隔符字符Windows标题设置。
-
Windows菜单样式: 将菜单样式调整为由操作系统决定的原生样式、自定义样式或从标题栏样式继承（在 中定义Windows标题栏样式) 这也会影响上下文菜单的外观。更改需要完全重启才能应用。
-
Windows菜单栏可见性: 配置菜单栏的可见性。
经典菜单栏显示在Windows顶部，仅在Windows全屏模式下隐藏。可见菜单栏始终可见，即使在全屏模式下也是如此。切换菜单栏是隐藏的，按一次Alt键即可显示。紧凑菜单已移至侧边栏。隐藏菜单栏始终隐藏。
面板
面板区域显示了问题、终端和输出面板等用户界面元素，并且默认情况下位于编辑器区域下方。
面板位置
您可以将区域移动到编辑器的左侧、右侧、底部或顶部。您可以在视图 > 外观 > 面板位置菜单下配置这些选项，或者通过面板标题栏的上下文菜单。
你也可以在命令面板中使用移动面板命令：
- 视图：向左移动面板 (
工作台.操作.位置面板左) - 查看：移动面板向右 (
工作台.操作.将面板移至右侧) - 视图：将面板移至底部 (
工作台.操作.位置面板底部) - 视图：将面板移至顶部 (
工作台.操作.位置面板顶部)
面板对齐
此选项允许您配置底部面板在Windows中的跨度。有四个选项：
- 居中 - 这是默认行为。面板仅跨编辑区域的宽度。
- 两端对齐 - 该面板占满了整个Windows的宽度。
- 左 - 该面板从Windows的左边缘延伸到编辑区域的右边缘。
- 右 - 该面板从Windows的右侧延伸到编辑区域的左侧。
使用所有面板对齐选项时，活动栏被视为Windows的边缘。
您可以在 视图 > 外观 > 对齐面板 菜单下配置这些选项，或者使用新的 设置面板对齐到... 命令。
最大化面板大小
当面板对齐方式为居中时，您可以快速切换面板区域，使其充满整个编辑区域，方法是点击面板区域右上角的最大化面板大小箭头按钮。最大化面板时，箭头按钮向下指，以恢复面板的原始大小。
您还可以通过视图：切换最大化面板命令最大化面板区域。
注意：除了自定义整个面板区域的显示，各个面板可以有其自身的布局自定义设置。例如，终端允许你拥有多个打开的标签页和拆分现有的终端。
拖动视图和面板
VS Code 在主侧栏和面板区域默认布局视图和面板，但您可以拖动视图和面板在这些区域之间进行移动。例如，您可以将源代码控制视图拖动到面板区域，或者将问题面板放入主侧栏：
注意：请记住，您可以使用重置位置上下文菜单项将视图和面板重置为其默认位置，或者使用通用视图：重置视图位置命令将所有视图和面板重置。
您还可以将视图和面板添加到现有的视图或面板中以创建组。例如，您可以通过拖动到资源管理器活动栏项目，然后将其放入视图中，将输出面板移动到资源管理器视图组：
您不仅可以使用鼠标来移动视图和面板，还可以通过键盘自定义布局，使用 视图：移动视图 和 视图：移动焦点视图 命令，下拉菜单允许您选择要移动的用户界面元素和目标位置，可以是侧边栏或面板区域，或者现有的视图或面板以创建组。
工具栏
大多数 VS Code 视图和面板在其用户界面的右上角显示工具栏。例如，搜索视图有一个带有刷新、清除搜索结果等操作的工具栏：
隐藏工具栏中的项目
如果你认为工具栏太忙了，而且你希望隐藏不常使用的操作，你可以右键单击任何操作并选择其隐藏命令（例如隐藏“清除搜索结果”）或从下拉菜单中取消选中任何操作。隐藏的操作会被移动到请输入具体的网页文本内容，以便我进行翻译。 更多操作 菜单，可以从那里调用。
要恢复工具栏中的操作，请右键单击工具栏按钮区域并选择重置菜单命令或重新勾选隐藏的操作。要恢复 VS Code 中的所有菜单，请在命令面板中运行视图：重置所有菜单（⇧⌘P（Windows, Linux Ctrl+Shift+P））。
编辑器
您可以独立于工作区用户界面自定义 VS Code 编辑器区域的布局。默认情况下，编辑器区域会显示有用的特性，如迷你地图、面包屑导航、编辑器标签，并具有如粘性滚动等可选用户界面。您还可以调整编辑器本身的布局或将其移动到浮动Windows。
小地图和面包屑导航
视图 > 外观菜单有一个自定义编辑区域的部分。在那里，您会找到以下切换按钮：
- 小地图 - 一个视觉概览你当前的文件。视图：切换小地图.
- 面包屑导航 - 显示 文件夹、文件和当前符号 信息用于活动文件。视图：切换面包屑导航.
- 粘性滚动 - 显示 嵌套符号作用域 在当前文件中。视图：切换粘性滚动.
编辑组
默认情况下，每个打开的编辑器都会进入同一个编辑器组，并在右侧添加一个新的编辑器标签。您可以创建新的编辑器组，以便将相似或相关的文件分组，或者允许并排编辑同一文件。
通过将编辑器拖动到侧面，或使用编辑器标签页上下文菜单中的拆分命令将当前编辑器复制到新的编辑器组中，位于左侧、右侧、上方或下方。
拆分编辑器命令也可以从视图 > 编辑器布局菜单和命令面板中找到。
如果您想在垂直和水平编辑器组布局之间快速切换，可以使用切换垂直/水平编辑器布局命令 (⌥⌘0 (Windows, Linux Shift+Alt+0))。
分组
您还可以使用视图：在组中拆分编辑器命令（⌘K ⇧⌘\（Windows, Linux Ctrl+K Ctrl+Shift+\））将同一组中的编辑器拆分为并排编辑。
在使用分组功能时，有特定的命令用于切换此模式并在两个拆分编辑器之间导航：
- 视图：分组编辑器 - 分割当前编辑器。
- 视图：在组中切换拆分编辑器 - 在活动编辑器之间切换拆分模式。
- 视图：在组中加入编辑器 - 返回单个编辑器用于当前文件。
- 视图：切换组中拆分编辑器的布局 - 在水平布局和垂直布局之间切换。
要导航到不同的页面：
- 视图：在活动编辑器中聚焦第一个侧边 - 将焦点移动到拆分编辑器的第一个（左侧或顶部）侧边。
- 视图：在活动编辑器中聚焦第二个侧面 - 将焦点移动到第二个（右侧或底部）侧面。
- 视图：在活动编辑器中聚焦另一侧 - 在拆分编辑器的两侧之间切换。
工作台 > 编辑器: 分组布局中的拆分 (
网格布局
如果您希望对编辑器组布局有更多的控制，您可以使用网格布局，您可以在其中看到多个编辑器组的行和列。 视图 > 编辑器布局 菜单列出了各种编辑器布局选项（例如，两列，三列，网格 (2x2)），并且您可以通过抓取和移动它们之间的分隔条来调整组的大小。
浮动Windows
您可以在浮动Windows中打开编辑器、终端或特定视图。这在多显示器设置中非常有用，您可以将编辑器移动到另一个显示器或同一显示器上的不同位置。
要在一个浮动Windows中打开编辑器，请将它从主Windows拖出并放置在当前 VS Code Windows之外的任何位置。
浮动Windows可以以网格布局打开你喜欢的任何数量的编辑器。重启后，Windows将恢复到其位置，并重新打开所有编辑器。
另一种分离编辑器的方法是右键单击编辑器标签，然后选择选项移动到新Windows (工作台.操作.将编辑器移动到新Windows) 或 复制到新Windows (⌘K O (Windows, Linux Ctrl+K O)).
要移动整个编辑组，请使用将编辑组移动到新Windows () 或 复制编辑组到新Windows () 命令。
紧凑模式
要从浮动Windows中移除不必要的用户界面元素，并为内容腾出更多空间，请在浮动Windows标题栏中选择设置紧凑模式选项。再次选择以将浮动Windows恢复到原始模式。
固定到顶部
您可以通过选择浮动Windows标题栏中的始终置顶选项将浮动Windows固定到屏幕顶部。这在您在主 VS Code Windows中工作时，可以保持终端或预览Windows始终可见。再次选择它可以取消固定浮动Windows。
固定标签
如果您希望编辑器标签始终可见，您可以将其固定到编辑器标签栏。您可以从上下文菜单或使用命令 视图：固定编辑器 (⌘K ⇧Enter (Windows, Linux Ctrl+K Shift+Enter))。
固定标签帮助您访问以下重要的文件：
- 固定标签总是显示在非固定标签之前。
- 即使你打开了很多标签页，它们也不会滚动出视图。
- 在使用编辑器标签命令时，如 关闭其他 或 关闭所有，它们不会关闭。
- 即使您超过了设定的打开编辑器的限制，它们也不会关闭。
通过点击固定图标、使用取消固定编辑器标签上下文菜单项或视图：取消固定编辑器命令取消固定编辑器。
您可以选择如何显示固定编辑器工作台 > 编辑器：固定标签大小 (
正常一个固定标签继承了其他标签的外观（默认）缩小一个固定标签的面板缩小到固定大小，显示编辑器标签的一部分。紧凑固定标签将仅显示为图标或编辑标签的第一个字母。
您可以通过设置Workbench > Editor: Pinned Tabs On Separate Row来在常规编辑器标签栏上方的单独行中显示固定编辑器标签。您可以通过在两行之间拖动和放下标签来固定和取消固定编辑器。
锁定编辑器组
在使用多个编辑器时，通常会有一个或多个编辑器是你希望始终保持可见的。锁定编辑器组功能，可以将整个编辑器组锁定并保持可见，提供稳定的显示，任何打开新编辑器的请求都会在另一个组中创建。你可以通过编辑器组工具栏中的锁定图标来判断编辑器组是否被锁定。
您可以通过选择 锁定组 来锁定编辑器组 更多操作 请输入具体的网页文本内容，以便我进行翻译。 下拉或运行 视图：锁定编辑器组 命令。
您可以通过点击锁定图标或运行查看：解锁编辑组命令来解锁编辑组。
锁定的组与未锁定的组行为不同：
- 新的编辑者不会在锁定的组中打开，除非明确移动到那里（例如，通过拖放）。
- 如果一个新编辑跳过一个锁定的组，它将会在最近使用的锁定组中打开或者在锁定组旁边创建一个新的组。
- 编辑组的锁定状态会在重启时持久化并恢复。
- 您也可以锁定空组，以实现更稳定的编辑器布局。
主要用例是编辑区域中的终端。例如，您可能希望在左侧编辑文本，并在右侧有一个始终可见的终端。当创建并移动终端编辑器到一侧时，它将自动锁定。这意味着即使右侧终端获得焦点，打开文件也会在左侧打开，无需先手动更改焦点。
自动锁定组可以使用
与编辑器组锁定相关的命令：
- 视图：锁定编辑器组 - 锁定当前活动的编辑器组。
- 查看：解锁编辑器组 - 解锁当前活动的锁定编辑器组。
- 视图：切换编辑器组锁定 - 锁定或解锁当前编辑器组。
您必须拥有多个编辑器组才能使用这些命令。
下一步
继续阅读，了解：
- Visual Studio Code 用户界面 - 快速了解 VS Code。
- 基本编辑 - 了解强大的 VS Code 编辑器。
- 代码导航 - 快速浏览您的源代码。