自定义布局
Visual Studio Code 拥有简单的用户界面和便捷的默认布局。同时，VS Code 还提供选项和设置，让你可以根据自己的偏好和工作风格自定义 UI 布局。在本主题中，我们将重点介绍各种UI自定义，以便你以最高效的方式展示视图、编辑器和面板。
本文首先讨论了Workbench自定义，以重新排列侧边栏、视图和面板等UI元素。文章后面我们将介绍编辑器区域的自定义，包括编辑组、分割编辑器和编辑标签。
工作台
主侧酒吧
默认情况下，主侧栏位于工作台左侧，显示资源管理器、搜索和源控制器视图等视图。你可以通过在活动栏中选择图标快速切换视图。
要改变主侧栏的位置，你可以：
- 右键点击活动栏，选择将主侧边栏向右移动
- 运行视图：切换主侧边栏位置以左右切换主侧边栏
- 使用“视图>外观>移动主栏右菜单项
- 设置工作台>侧栏：位置 (workbench.sideBar.location）设置为
右在设置编辑器中
副侧酒吧
默认情况下，VS Code 在编辑器区域左侧的主侧栏显示视图。同时看到两个视图打开会很有用。为此，你可以使用副侧栏显示主侧边栏对面的视图。无论你是否切换了主侧边栏的位置，次侧边栏始终位于主侧边栏的对面。
下图显示了主侧栏的探索者视图和副侧栏的副驾驶聊天视图：
要显示副侧边栏，可以用VS Code标题栏中的布局控件。如果布局控件不可见，右键点击 VS Code 标题栏，选择布局控件。
或者，你也可以按以下方式打开次要侧栏：
- 运行视图：切换副侧边栏可见性命令（或按⌥⌘B（Windows，Linux Ctrl+Alt+B）)
- 使用“查看>外观，>次要侧边栏菜单项
如果你想在打开新窗口或工作区时自动显示次要侧边栏，可以用
你随时可以拖拽视图和面板到主侧栏或次侧栏。VS Code 会记住你会话中视图和面板的布局。
你可以用“视图：重置视图位置”命令将视图和面板重置回默认位置。
指令调色板位置
你可以用鼠标光标抓住命令调色板的顶部边缘并拖动到别处，把它移到另一个位置。你也可以在标题栏选择自定义布局控件，然后选择预设的快速输入位置之一。
活动栏位置
默认情况下，活动栏会随着主侧栏移动，并保持在工作台的外缘。你也可以选择隐藏活动栏，或将其移到主侧栏的顶部或底部。
活动栏位置菜单可通过活动栏的右键菜单，或在“查看>外观”下>活动栏位置有默认、顶部、底部或隐藏选项。
当活动栏位于顶部或底部时，账户和管理按钮（通常位于活动栏底部）会移动到标题栏的右侧。
自定义布局控制
VS Code 标题栏还有按钮，可以切换主界面元素（侧边栏和面板区域）的可见性。
最右侧按钮会弹出“自定义布局”下拉菜单，你可以进一步更改各种UI元素的可见性和布局，并包含多种布局模式：
布局模式包括：
- 全屏 - 设置编辑器填满整个显示屏幕。查看：切换全屏（⌃⌘F（Windows，Linux F11））。
- 禅模式——隐藏除编辑器区域外的所有UI。视图：切换禅模式（⌘K z（Windows，Linux Ctrl+K Z））。
- 居中布局——将编辑器置中于编辑器区域内。视图：切换居中布局。
窗口和菜单样式
您可以使用以下设置自定义 VS Code 窗口和菜单栏的外观：
-
window.titleBarStyle：调整VS Code窗口标题栏的外观，使其由作系统原生或自定义。更改需要重新开始才能应用。
-
窗户标题：根据当前上下文（如打开的工作区或活跃编辑器）配置 VS Code 窗口标题。变量根据上下文被替换。例如，
${activeEditorShort}将显示当前活跃编辑器的文件名。你可以组合多个变量，例如，${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${separator}${appName}. -
window.titleSepacator：用于窗户标题环境。
-
window.menuStyle调整菜单样式，使其由作系统原生、自定义，或继承自标题栏样式（定义于window.titleBarStyle).这也影响了菜单的外观。更改需要重新开始才能应用。
-
window.menuBarVisibility：配置菜单栏的可见性。
经典： 菜单栏显示在窗口顶部，只有在窗口全屏模式下才会隐藏。可见： 菜单栏始终可见，即使窗口处于全屏模式。切换菜单栏是隐藏的，按一下Alt键就能看到。紧凑型：菜单被移到了侧边栏。隐藏菜单栏总是隐藏着。
小组
面板区域显示 UI 元素，如问题面板、终端面板和输出面板，默认位于编辑器区域下。
小组位置
你可以将区域移动到编辑器的左、右、底或顶部。你可以在“查看>外观>面板位置”菜单中配置这些选项，或者通过面板标题栏的右键菜单配置这些选项。
你也可以在命令面板中使用移动面板的命令：
- 视图：向左移动面板 (
工作台.动作.位置面板左) - 视图：向右移动面板 (
工作台。动作。位置面板右) - 查看：将面板移到底部 (
workbench.action.positionPanelBottom（工作台.动作.位置面板底部）) - 查看：将面板移至顶部 (
工作台.动作.position面板顶)
面板对齐
这个选项可以让你自定义底部面板在窗口上的长度。有四个选项：
- 中心——这是默认行为。面板仅覆盖编辑器区域的宽度。
- Justify——面板横跨整个窗户宽度。
- 左侧——面板从窗口左侧延伸到编辑器区域的右侧。
- 右侧——面板从窗口右侧延伸到编辑器区域的左侧。
在所有面板对齐选项中，活动栏被视为窗口的边缘。
你可以在菜单中的“对齐面板查看>外观”、“面板标题菜单”>配置这些选项，或者使用新的“设置面板对齐”来......命令。
最大化面板尺寸
当面板对齐位于中心时，你可以快速切换面板区域，用面板区域右上角的“最大化面板大小”倒V形按钮填满整个编辑器区域。在最大化面板中，倒V形按钮指向下方，以恢复面板的原始大小。
你也可以通过“视图：切换最大化面板”命令最大化面板区域。
拖放视图和面板
VS Code 在主侧栏和面板区域默认布局视图和面板，但你可以在这些区域之间拖放视图和面板。例如，你可以将源控视图拖放到面板区域，或者将问题面板放到主侧栏：
注意：请记住，您可以使用“重置位置”的上下文菜单项将视图和面板重置到默认位置，或者通过通用的“查看：重置查看位置”命令将所有视图和面板重置。
你还可以向现有视图添加视图和面板，或创建组的面板。例如，你可以将输出面板拖到资源管理器视图组中，然后拖入视图中：
你不局限于用鼠标移动视图和面板。你还可以通过键盘使用“视图：移动视图”和“视图：移动聚焦视图”命令自定义布局，下拉菜单允许你选择要移动的UI元素和目的地，无论是位置如侧边栏或面板区域，还是现有视图或面板来创建组。
工具栏
大多数 VS Code 视图和面板的界面右上角都显示了工具栏。例如，搜索视图有一个工具栏，上面有刷新、清除搜索结果等作：
在工具栏中隐藏物品
如果你觉得工具栏太忙，想隐藏不常用的作，可以右键点击任意作并选择其隐藏命令（例如隐藏“清除搜索结果”），或者取消勾选下拉菜单中的任何作。隐藏动作会被移到... 更多的动作菜单，可以从那里调用。
要将作恢复到工具栏，右键点击工具栏按钮区域，选择重置菜单命令或重新检查隐藏动作。要在 VS Code 中恢复所有菜单，请从命令面板（⇧⌘P，Windows，Linux Ctrl+Shift+P ）中运行“View： Reset All Menuus”。
编辑
你可以独立于工作台用户界面自定义VS Code编辑器区域的布局。默认情况下，编辑器区域会显示实用功能，如小地图、面包屑、编辑器标签页，并有可选的UI，如粘性滚动。你还可以调整编辑器本身的布局，或将它们移入浮动窗口。
小地图与面包屑
“查看>外观”菜单中有一个自定义编辑器区域的部分。在那里你会找到以下开关：
- 小地图——您当前文件的可视化概览。查看：切换小地图。
- 面包屑——显示活动文件的文件夹、文件和当前符号信息。查看：切换面包屑。
- 粘性滚动——在活动文件中显示嵌套符号范围。查看：切换粘性滚动。
编辑组
默认情况下，每个打开的编辑器都会进入同一个编辑器组，并在右侧添加一个新的编辑器标签。你可以创建新的编辑器组，以便对相似或相关的文件进行分组，或允许对同一文件进行并排编辑。
通过将编辑器拖到一侧，或在编辑器标签的上下文菜单中使用“分裂”命令，将当前编辑器复制到左、右、上、下方的新编辑器组中来创建新的编辑器组来创建新的编辑器组。
分拆编辑器命令也可以通过视图编辑器布局菜单和命令调色板>使用。
如果你想快速切换竖屏和横向编辑器组布局，可以使用切换垂直/横向编辑器布局命令（⌥⌘0（Windows，Linux Shift+Alt+0））。
小组分裂
你也可以在同一组中拆分编辑器，使用“View： Split Editor in Group”命令（⌘K ⇧⌘\，Windows，Linux Ctrl+K Ctrl+Shift+\）进行并排编辑。
使用分组功能时，有专门的命令用于切换此模式并在两个分组编辑器之间切换：
- 查看：分组编辑器 - 分割当前编辑器。
- 视图：在组中切换分开编辑器——在激活编辑器中切换分拆模式。
- 查看：加入群组编辑器——返回单个编辑器处理当前活动文件。
- 视图：在组中切换分割编辑器的布局——在水平和垂直布局之间切换。
在双方之间切换：
- 视图：在主动编辑器中聚焦第一侧——将焦点移到分割编辑器的第一侧（左侧或顶部）。
- 视图：在主动编辑器中对焦第二侧——将焦点移到第二侧（右侧或下方）。
- 视图：在主动编辑器中聚焦另一侧——切换分割编辑器两侧。
工作台>编辑器：组布局拆分 (
网格布局
如果你想更好地控制编辑组布局，可以使用网格布局，这样可以显示多行多列编辑组。“视图>编辑器布局”菜单列出了各种编辑器布局选项（例如，两列、三列、网格（2x2）），你可以通过抓住并移动推拉框来调整组大小。
浮动窗
你可以打开编辑器、终端，或者在浮动窗口中打开特定视图。这在多显示器设置中非常有用，你可以把编辑器移到另一个显示器，甚至同一显示器的不同位置。
要在浮动窗口中打开编辑器，把它从主窗口拖出，然后把它放到当前VS Code窗口以外的任何地方。
浮动窗口可以在网格布局中打开任意数量的编辑器。重启后窗口会恢复到原位，并重新打开所有编辑器。
另一种分离编辑器的方法是右键点击编辑器标签，选择“移动到新窗口”选项 (workbench.action.moveEditorToNewWindow）或复制到新窗口（⌘K O（Windows，Linux Ctrl+K O））。
要移动整个编辑组，可以使用“将编辑组移入新窗口”（）或“复制编辑组”到新窗口（）命令。
紧凑模式
为了移除浮动窗口中不必要的UI元素并腾出更多内容空间，请选择浮动窗口标题栏中的“设置紧凑模式”选项。再次选择该窗口以恢复浮动窗口的原始模式。
销钉到顶部
你可以通过在浮动窗口标题栏中选择“设置始终在顶部”选项，将浮动窗口固定在屏幕顶部。这样可以在主 VS Code 窗口工作时，保持终端或预览窗口始终可见。再次选择以解除固定浮动窗口。
置顶标签页
如果你想让编辑器标签始终可见，可以把它钉在编辑器标签栏。你可以从上下文菜单或命令“视图：钉置编辑器”（⌘K ⇧Enter，Windows，Linux Ctrl+K Shift+Enter））来钉顶编辑器标签。
置顶标签页帮助访问对你重要的文件，比如：
- 置顶标签总是先出现，排在非固定标签之前。
- 如果你打开了多个标签页，它们不会从视野中滚动消失。
- 使用编辑器标签命令如关闭他人或关闭全部时，这些链接不会关闭。
- 即使超过了设定的已开放编辑人数限制，它们也不会关闭。
通过点击图钉图标、使用“Unpin”编辑器标签的上下文菜单项，或使用“查看：Unpin Editor”命令来解除固定。
你可以用工作台>编辑器：置顶标签大小来选择如何显示置顶编辑器 (
正常：置顶标签页继承了其他标签页的外观（默认）心理医生：置顶标签会缩小到固定大小，显示编辑器标签的部分内容。紧凑型：置顶标签只会显示为图标或编辑器标签的首字母。
你也可以通过设置“工作台”>编辑器：固定标签页在普通编辑器标签栏上方的单独行显示置顶的编辑器标签页。你可以通过在两行之间拖拽编辑器的标签来固定和解封。
锁定的编辑器组
使用多个编辑器时，通常会有一个或多个编辑器始终保持可见。锁定编辑组功能，即整个编辑组被锁定并可见，提供稳定显示，任何请求打开新编辑者都会将其创建到另一个组中。你可以通过编辑组工具栏中的锁定图标判断编辑组是否被锁定。
您可以通过在编辑器工具栏中选择“锁定组”来锁定编辑组，“更多作” ...下拉菜单或运行“查看：锁定编辑组”命令。
你可以通过点击锁定图标或运行“查看：解锁编辑组”命令来解锁编辑组。
锁定组与解锁组的行为不同：
- 除非明确移动到锁定组（例如拖放），否则新编辑器不会在锁定组中打开。
- 如果新编辑器跳过锁定的组，它要么会在最近使用的已解锁组中打开，要么在锁定组旁边创建一个新组。
- 编辑器组的锁定状态会在多次重启后被持久化并恢复。
- 你也可以锁定空组，从而实现更稳定的编辑器布局。
主要用例是编辑器区域的终端。例如，你可能想编辑左边的文本，右边有一个始终可见的终端。当创建终端编辑器并移到一边时，它会自动锁定。这意味着即使右侧终端已对焦，打开文件时也会在左侧打开，无需手动切换对焦。
自动锁定组可以通过以下方式配置
与编辑器组锁定相关的命令：
- 查看：锁定编辑组 - 锁定活跃的编辑组。
- 查看：解锁编辑组 - 解锁已锁定的活跃编辑组。
- 查看：切换编辑器组锁定 - 锁定或解锁活跃的编辑组。
这些命令必须有超过一个编辑组才能使用。
下一步
继续阅读，了解：
- Visual Studio Code 用户界面——快速介绍 VS Code。
- 基础编辑——了解强大的VS Code编辑器。
- 代码导航——快速浏览源代码。