用户界面

Visual Studio Code 的核心是一个代码编辑器。与许多其他代码编辑器一样，VS Code 采用了一种常见的用户界面和布局：左侧是资源管理器，显示你可以访问的所有文件和文件夹；右侧是编辑器，显示你已打开文件的内容。

基本布局

VS Code 具有一个简单直观的布局，它最大限度地扩大了编辑器的空间，同时为浏览和访问文件夹或项目的完整上下文留下了充足的空间。用户界面分为六个主要区域：

• 编辑器 - 用于编辑文件的主要区域。你可以随意打开多个编辑器，垂直或水平并排。
• 主要侧边栏 - 包含不同的视图，如资源管理器，可在你处理项目时提供帮助。
• 次要侧边栏 - 位于主要侧边栏的对面。默认情况下，包含聊天视图。从主要侧边栏拖放视图到次要侧边栏即可移动它们。
• 状态栏 - 显示有关已打开项目和正在编辑文件的信息。
• 活动栏 - 位于最左侧。让你可以在视图之间切换，并提供额外的上下文相关指示器，例如启用 Git 时传出更改的数量。你可以更改活动栏的位置。
• 面板 - 编辑器区域下方用于视图的额外空间。默认情况下，它包含输出、调试信息、错误和警告以及一个集成终端。面板也可以移动到左侧或右侧，以获得更多垂直空间。

每次启动 VS Code 时，它都会以你上次关闭时的状态打开。文件夹、布局和已打开的文件都会保留。

每个编辑器中打开的文件都以选项卡式标题（选项卡）显示在编辑器区域的顶部。要了解有关选项卡式标题的更多信息，请参阅选项卡部分。

了解有关使用主要和次要侧边栏的更多信息。

并排编辑

你可以随意打开多个编辑器，垂直或水平并排。如果你已打开一个编辑器，有多种方法可以在旁边打开另一个编辑器：

• 按住Alt 并在资源管理器视图中选择一个文件。
• ⌘\ (Windows, Linux Ctrl+\) 将活动编辑器分成两部分。
• 从文件上的资源管理器上下文菜单中选择打开到侧面（⌃Enter (Windows, Linux Ctrl+Enter)）。
• 选择编辑器右上角的拆分编辑器按钮。
• 将文件拖放到编辑器区域的任意一侧。拖动时按住Ctrl (macOS 上是Option) 可复制选项卡而不是移动它。
• 在快速打开（⌘P (Windows, Linux Ctrl+P)）文件列表中按⌃Enter (Windows, Linux Ctrl+Enter)。

当你打开另一个文件时，活动编辑器将显示该文件的内容。如果你有两个编辑器并排，并且希望在右侧编辑器中打开文件“foo.cs”，请在打开文件“foo.cs”之前确保该编辑器处于活动状态（通过单击其中）。

默认情况下，编辑器在活动编辑器的右侧打开。你可以通过 workbench.editor.openSideBySideDirection 设置更改此行为，改为在活动编辑器的下方打开新编辑器。

当你打开多个编辑器时，可以通过按住 Ctrl 键 (macOS 上是 Cmd) 并按 1、2 或 3 来快速切换它们。

编辑器组

当你拆分编辑器（使用拆分编辑器或打开到侧面命令）时，会创建一个新的编辑器区域（编辑组），该区域可以容纳一组项目。你可以根据需要垂直和水平并排打开任意数量的编辑器组。

你可以在资源管理器视图顶部的打开的编辑器部分清楚地看到这些内容（在资源管理器视图中切换... > 打开的编辑器）。

你可以在工作台上拖放编辑器组，在组之间移动单个选项卡，并快速关闭整个组（全部关闭）。

组内拆分

你可以使用视图：组内拆分编辑器命令（⌘K ⇧⌘\ (Windows, Linux Ctrl+K Ctrl+Shift+\)）拆分当前编辑器，而无需创建新的编辑器组。要了解有关此编辑器模式以及在两边之间导航的特定命令的更多信息，你可以阅读自定义布局文章中的相关部分。

浮动窗口

你可以将编辑器、终端或特定视图移动到其自己的浮动窗口中。如果你有多显示器设置并希望在不同显示器上保持文件打开状态，这将非常有用。

将编辑器选项卡拖出当前 VS Code 窗口即可在浮动窗口中打开它。或者，使用编辑器选项卡上的移至新窗口或复制到新窗口上下文选项。

要将浮动窗口固定在屏幕顶部，请从其标题栏中选择始终置顶选项（图钉图标）。

要了解有关浮动窗口的更多信息，请阅读自定义布局文章中的相关部分。

迷你地图

迷你地图（代码大纲）让你对源代码有一个高层次的概览，这对于快速导航和代码理解非常有用。文件的迷你地图显示在编辑器的右侧。你可以选择或拖动阴影区域，以快速跳转到文件中的不同部分。

如果编辑器中有折叠标记，例如//#region或MARK:注释，那么迷你地图会显示折叠标记名称。

粘滞滚动

粘滞滚动会在编辑器顶部显示当前可见的嵌套范围的起始行。它通过指示你在文件中的位置来方便导航，并让你快速跳回当前范围的顶部。

粘滞滚动使用几种不同的内容模型来创建其标题。可以在大纲提供者模型、折叠提供者模型和缩进模型之间进行选择，以确定要在粘滞滚动区域中显示的行。如果当前语言没有可用的模型，VS Code 会回退到上述顺序中的下一个模型。最初使用的默认模型来自 editor.stickyScroll.defaultModel 设置。

缩进指南

编辑器显示缩进指南（垂直线），帮助你快速查看匹配的缩进级别。如果你想禁用缩进指南，可以在用户或工作区设置中将editor.guides.indentation设置为false。

面包屑导航

编辑器顶部有一个导航栏，也称为面包屑。面包屑始终显示文件路径，如果当前文件类型具有符号的语言支持，则显示到光标位置的符号路径。面包屑使你能够快速在文件夹、文件和符号之间导航。

你可以通过视图 > 外观 > 切换面包屑菜单项或视图：切换面包屑命令禁用面包屑。有关面包屑功能的更多信息，例如如何自定义其外观，请参阅代码导航文章的面包屑部分。

资源管理器视图

资源管理器视图用于浏览、打开和管理项目中的文件和文件夹。VS Code 是基于文件和文件夹的，你可以通过在 VS Code 中打开文件或文件夹立即开始使用。

在 VS Code 中打开文件夹后，文件夹内容将显示在资源管理器视图中。你可以在此处执行许多操作：

• 创建、删除和重命名文件和文件夹。
• 通过拖放移动文件和文件夹。
• 使用上下文菜单探索所有选项。

VS Code 与你可能使用的其他工具（尤其是命令行工具）配合得很好。如果你想在 VS Code 中当前打开的文件夹的上下文下运行命令行工具，请右键单击该文件夹并选择在集成终端中打开。

你还可以通过右键单击文件或文件夹并选择 Windows 上的在文件资源管理器中显示、macOS 上的在 Finder 中显示或 Linux 上的打开包含文件夹，导航到本机操作系统文件资源管理器中的文件或文件夹位置。

默认情况下，VS Code 会排除某些文件夹不在资源管理器视图中显示，例如.git。使用files.exclude设置来配置隐藏文件和文件夹的规则，使其不在资源管理器视图中显示。

多选

你可以在资源管理器视图和打开的编辑器部分中选择多个文件，以对多个项目执行操作（删除、拖放或打开到侧面）。按住Ctrl (macOS 上是Cmd) 并选择单个文件，或者按住Shift 以选择文件范围。如果你选择两个项目，你现在还可以使用上下文菜单中的比较选中项命令来快速比较两个文件。

"workbench.list.multiSelectModifier": "alt"

高级树导航

你可以在资源管理器视图中筛选文件和文件夹。将焦点放在资源管理器视图上，按⌥⌘F (Windows, Linux Ctrl+Alt+F) 以打开查找控件并键入要匹配的文件或文件夹名称的一部分。此导航功能适用于 VS Code 中的所有树视图。

按筛选按钮可在两种模式之间切换：高亮和筛选。按向下键可将焦点放在第一个匹配元素上并导航到后续匹配元素。在高亮模式下，文件夹上会显示一个徽章，指示它们包含匹配的文件。

按模糊匹配按钮可在精确匹配和模糊匹配之间切换，在模糊匹配模式下，你可以键入一系列字符以匹配文件或文件夹名称的任何部分。

大纲视图

大纲视图是资源管理器视图底部的独立部分。展开后，它会显示当前活动编辑器的符号树。

大纲视图具有不同的排序依据模式、可选的光标跟踪，并支持常见的打开手势。它还包括一个输入框用于查找或筛选。错误和警告也显示在大纲视图中，让你一目了然地看到问题的位置。

对于符号，该视图依赖于已安装扩展为不同文件类型计算的信息。例如，内置的 Markdown 支持会为 Markdown 文件的符号返回 Markdown 标题层次结构。

有几个大纲视图设置。搜索以outline.开头的设置以配置大纲视图中显示的信息。

时间线视图

时间线视图位于文件资源管理器的底部，是一个统一的视图，用于可视化文件的事件历史记录。例如，你可以在时间线视图中查看 Git 提交或本地文件保存。

时间线视图工具栏中的筛选操作使你可以在源代码管理事件和本地文件事件之间进行筛选。

本地文件历史记录

根据你的设置，每次你保存编辑器时，都会在列表中添加一个新条目。每个本地历史记录条目都包含创建该条目时文件的完整内容，在某些情况下，可以提供更多语义信息（例如，指示重构）。

从条目中你可以：

• 将更改与本地文件或上一个条目进行比较。
• 恢复内容。
• 删除或重命名条目。

你可以配置以下设置以使用本地历史记录：

• workbench.localHistory.enabled - 启用或禁用本地历史记录（默认值：true）
• workbench.localHistory.maxFileSize - 创建本地历史记录条目时的文件大小限制（默认值：256 KB）
• workbench.localHistory.maxFileEntries - 每个文件的本地历史记录条目限制（默认值：50）
• workbench.localHistory.exclude - 用于从本地历史记录中排除某些文件的 Glob 模式
• workbench.localHistory.mergeWindow - 进一步更改添加到本地文件历史记录中最后一个条目的间隔（秒）（默认值 10 秒）

提交历史

VS Code 内置的 Git 支持提供了指定文件的 Git 提交历史。选择一个提交将打开该提交引入的更改的差异视图。当你右键单击提交时，你将获得复制提交 ID和复制提交消息的选项。

当你右键单击历史记录中的提交时，你可以：

• 打开更改 - 打开文件中更改的差异视图。
• 查看提交 - 打开多文件差异视图以查看提交中所有文件的更改。
• 选择以进行比较 - 选择一个条目以与另一个条目进行比较。
• 复制提交 ID - 将提交 ID 复制到剪贴板。
• 复制提交消息 - 将提交消息复制到剪贴板。

你可以配置此设置以使用 Git 历史记录：

• git.timeline.date - 显示文件提交的提交日期或创作日期

视图

资源管理器视图只是 VS Code 中可用视图之一。还有以下视图：

• 搜索 - 提供跨已打开文件夹的全局搜索和替换。
• 源代码管理 - VS Code 默认包含 Git 源代码管理。
• 运行 - VS Code 的运行和调试视图显示变量、调用堆栈和断点。
• 扩展 - 在 VS Code 中安装和管理你的扩展。
• 自定义视图 - 扩展贡献的视图。

你可以通过右键单击活动栏来显示或隐藏视图，并通过拖放重新排序它们。在资源管理器视图中，你可以通过“...”菜单显示或隐藏部分，或拖放部分以重新排序它们。

命令面板

VS Code 也可以完全通过键盘访问。最重要的组合键是⇧⌘P (Windows, Linux Ctrl+Shift+P)，它会打开命令面板。从这里，你可以访问 VS Code 中的所有功能，包括最常见操作的键盘快捷方式。

命令面板提供对许多命令的访问。你可以运行编辑器命令、打开文件、搜索符号，并查看文件的快速大纲，所有这些都使用相同的交互式窗口。以下是一些提示：

• ⌘P (Windows, Linux Ctrl+P) 允许你通过键入名称导航到任何文件或符号
• ⌃Tab (Windows, Linux Ctrl+Tab) 在最近打开的文件集中循环
• ⇧⌘P (Windows, Linux Ctrl+Shift+P) 直接带你到编辑器命令
• ⇧⌘O (Windows, Linux Ctrl+Shift+O) 允许你导航到文件中的特定符号
• ⌃G (Windows, Linux Ctrl+G) 允许你导航到文件中的特定行

在输入字段中键入?以获取可从命令面板运行的可用命令列表。

配置编辑器

VS Code 提供了许多配置编辑器的选项。从视图 > 外观菜单中，你可以隐藏或切换用户界面的各个部分，例如侧边栏、状态栏和活动栏。

隐藏菜单栏 (Windows, Linux)

你可以在 Windows 和 Linux 上通过将 window.menuBarVisibility 设置从 classic 更改为 toggle 或 hidden 来隐藏菜单栏。toggle 设置意味着按一下 Alt 键会再次显示菜单栏。

你还可以使用视图：切换菜单栏命令在 Windows 和 Linux 上隐藏菜单栏。此命令将window.menuBarVisibility从classic设置为compact，导致菜单栏移动到活动栏中。要将菜单栏返回到classic位置，你可以再次运行视图：切换菜单栏命令。

设置

大多数编辑器配置都在设置中管理，你可以直接修改。你可以通过用户设置全局设置选项，也可以通过工作区设置按项目/文件夹设置选项。设置值存储在settings.json文件中。

你可以在设置编辑器中查看和编辑设置（选择文件 > 首选项 > 设置，或按⌘, (Windows, Linux Ctrl+,)）。使用用户和工作区选项卡在用户和工作区设置之间切换。你可以使用顶部的搜索框筛选设置。

或者，你也可以直接在 settings.json 文件中修改用户设置。使用 首选项：打开用户设置 (JSON) 命令打开 settings.json 文件。对于工作区设置，在你的工作区中的 .vscode 文件夹中打开 settings.json 文件。

禅模式

禅模式通过隐藏除编辑器之外的所有 UI 元素、将 VS Code 切换到全屏并居中编辑器，让你专注于代码。禅模式可以通过视图 > 外观 > 禅模式菜单、命令面板中的视图：切换禅模式或快捷键⌘K Z (Windows, Linux Ctrl+K Z)进行切换。双击Esc可退出禅模式。可以通过zenMode.fullScreen禁用全屏转换。

禅模式可以通过以下设置进一步调整：

• zenMode.hideActivityBar - 隐藏活动栏。默认值 true。
• zenMode.hideStatusBar - 隐藏状态栏。默认值 true。
• zenMode.hideLineNumbers - 隐藏行号。默认值 true。
• zenMode.showTabs - 控制是显示多个、单个还是不显示编辑器选项卡。默认值 multiple。
• zenMode.fullScreen - 将工作台置于全屏显示。默认值 true。
• zenMode.restore - 在重启时恢复禅模式。默认值 true。
• zenMode.centerLayout - 使用居中编辑器布局。默认值 true。
• zenMode.silentNotifications - 不显示通知。默认值 true。

通过勿扰模式减少通知

如果你被弹出通知所困扰，有一种方法可以减少通知，无论是针对所有通知，还是针对特定扩展的通知。

选择状态栏中的铃铛图标可打开通知区域。这是一个你可以随时访问所有通知的地方，即使你启用了勿扰模式。

找到带叉的铃铛图标，可以访问一个菜单，你可以选择性地禁用来自扩展的通知，或者启用全局勿扰模式以禁用所有通知。

居中编辑器布局

居中编辑器布局允许你将编辑器区域居中对齐。这在使用大显示器上的单个编辑器时很有用。你可以使用侧边框来调整视图大小（按住 Alt 键可以独立移动两侧）。

选项卡

VS Code 在编辑器上方的标题区域使用选项卡（选项卡式标题）显示打开的项目。当你打开一个文件时，会为该文件添加一个新选项卡。选项卡让你可以在项目之间快速导航。

你可以拖放选项卡以重新排序它们。若要对多个选项卡同时执行操作，请按住Ctrl键 (macOS上是Cmd) 并选择要操作的选项卡。若要选择一系列选项卡，请按住Shift键并选择范围内的第一个和最后一个选项卡。

当你打开的项目多于标题区域所能容纳的数量时，你可以使用资源管理器视图中的打开的编辑器部分（通过...按钮可用）来显示选项卡式项目的下拉列表。

选项卡和编辑器区域之间还有一个滚动条，可以将编辑器拖入视图。你可以通过将工作台 > 编辑器：标题滚动条大小（workbench.editor.titleScrollbarSizing）设置为large来增加滚动条的高度，使其更容易拖动。

如果你不想使用选项卡，可以通过将workbench.editor.showTabs设置设为single来完全禁用该功能。

    "workbench.editor.showTabs": "single"

请参阅以下部分，以优化 VS Code 以便无选项卡工作。

选项卡顺序

默认情况下，新选项卡会添加到现有选项卡的右侧。你可以使用workbench.editor.openPositioning设置来控制新选项卡出现的位置。

例如，你可能希望新的选项卡项出现在左侧：

    "workbench.editor.openPositioning": "left"

你可以通过拖放选项卡来重新排序它们。

如果你希望编辑器选项卡始终可见，可以将其固定到编辑器选项卡栏。有关固定选项卡的更多信息，请参阅自定义布局文章。

预览模式

当你在资源管理器视图中单击或选择一个文件时，它会以预览模式显示并重用现有选项卡（预览选项卡）。如果你只是快速浏览文件，并且不希望每个访问过的文件都有自己的选项卡，这将很有用。当你开始编辑文件或使用双击从资源管理器打开文件时，会为该文件分配一个新的专用选项卡。

预览模式在选项卡标题中以斜体显示：

如果你不喜欢使用预览模式，并且总是创建新选项卡，你可以使用以下设置控制其行为：

• workbench.editor.enablePreview - 全局启用或禁用预览编辑器
• workbench.editor.enablePreviewFromQuickOpen - 在从快速打开中打开时启用或禁用预览编辑器

自动换行选项卡

要查看更多编辑器选项卡，你可以使用自动换行选项卡布局，其中编辑器选项卡会换行以填充编辑器区域上方的多行。通过工作台 > 编辑器：换行选项卡（workbench.editor.wrapTabs）设置启用自动换行选项卡。

自定义选项卡标签

当你同时打开多个同名文件时，可能很难区分不同的选项卡。为了帮助解决这个问题，你可以为选项卡应用自定义显示标签。你可以选择工作区中哪些文件的选项卡要应用自定义标签。

要启用选项卡的自定义显示标签，请设置workbench.editor.customLabels.enabled设置。

    "workbench.editor.customLabels.enabled": true

你可以使用 workbench.editor.customLabels.patterns 设置指定一个或多个选项卡显示标签的命名模式。命名模式由两个部分组成：

• 项目 - 一个全局模式，匹配要应用自定义标签的文件路径。例如，**/static/**/*.html。
• 值 - 自定义标签的模板。模板可以使用变量，例如${filename}、${extname}、${extname(N)}、${dirname}和${dirname(N)}，它们会动态替换为文件路径中的值。

以下示例将/src/orders/index.html文件显示为标签为orders/index的选项卡。

    "workbench.editor.customLabels.patterns": {
        "**/src/**/index.html": "${dirname}/${filename}"
    }

以下示例使用${extname}变量处理文件tests/editor.test.ts：

• ${filename} => editor
• ${extname} => test.ts
• ${extname(0)} => ts
• ${extname(1)} => test
• ${extname(-1)} => test
• ${extname(-2)} => ts

网格编辑器布局

默认情况下，编辑器组以垂直列布局。例如，当你拆分编辑器时，它会在旁边打开编辑器。你可以将编辑器组安排成你喜欢的任何布局，无论是垂直还是水平：

为了支持灵活的布局，你可以创建空的编辑器组。默认情况下，关闭编辑器组中的最后一个编辑器也会关闭该组本身，但你可以通过新的设置 workbench.editor.closeEmptyGroups: false 更改此行为。

视图 > 编辑器布局菜单中有一组预定义的编辑器布局：

默认情况下，打开到侧面的编辑器（例如，通过选择编辑器工具栏上的拆分编辑器操作）会打开到活动编辑器的右侧。如果你更喜欢在活动编辑器的下方打开编辑器，请将workbench.editor.openSideBySideDirection设置为down。

有许多键盘命令用于通过键盘调整编辑器布局。如果你更喜欢使用鼠标，可以使用拖放将编辑器拆分到任何方向：

键盘快捷键

以下是一些方便的键盘快捷键，可用于在编辑器和编辑器组之间快速导航。

• ⌥⌘→ (Windows, Linux Ctrl+PageDown) - 转到右侧编辑器。
• ⌥⌘← (Windows, Linux Ctrl+PageUp) - 转到左侧编辑器。
• ⌃Tab (Windows, Linux Ctrl+Tab) - 打开编辑器组最近使用列表中的上一个编辑器。
• ⌘1 (Windows, Linux Ctrl+1) - 转到最左边的编辑器组。
• ⌘2 (Windows, Linux Ctrl+2) - 转到中心编辑器组。
• ⌘3 (Windows, Linux Ctrl+3) - 转到最右边的编辑器组。
• ⌘W (Windows Ctrl+F4, Linux Ctrl+W) - 关闭活动编辑器。
• ⌘K W (Windows, Linux Ctrl+K W) - 关闭编辑器组中的所有编辑器。
• ⌘K ⌘W (Windows, Linux Ctrl+K Ctrl+W) - 关闭所有编辑器。

如果你想修改默认键盘快捷键，请参阅键绑定了解详情。

无选项卡工作

如果你不喜欢使用选项卡（选项卡式标题），可以通过将workbench.editor.showTabs设置为single或none来完全禁用选项卡。

禁用预览模式

没有选项卡时，资源管理器视图的打开的编辑器部分是快速进行文件导航的方法。但是，启用了预览编辑器模式后，文件不会添加到打开的编辑器部分。你可以通过workbench.editor.enablePreview和workbench.editor.enablePreviewFromQuickOpen设置禁用此功能。

使用键盘快捷键导航编辑器历史记录

你可以更改 VS Code 的 Ctrl+Tab，使其显示所有已打开编辑器的历史记录列表，而不受活动编辑器组的影响。

编辑你的键盘快捷键并添加以下内容：

{ "key": "ctrl+tab", "command": "workbench.action.openPreviousEditorFromHistory" },
{ "key": "ctrl+tab", "command": "workbench.action.quickOpenNavigateNext", "when": "inQuickOpen" },

关闭整个组而不是单个编辑器

如果你喜欢 VS Code 在关闭一个编辑器时关闭整个组的行为，你可以在你的键绑定中绑定以下内容。

macOS

{ "key": "cmd+w", "command": "workbench.action.closeEditorsInGroup" }

Windows/Linux

{ "key": "ctrl+w", "command": "workbench.action.closeEditorsInGroup" }

窗口管理

VS Code 提供各种选项来控制 VS Code 窗口（实例）在会话之间如何打开或恢复。

设置window.openFoldersInNewWindow和window.openFilesInNewWindow用于配置是打开新窗口还是重用上次活动窗口来打开文件或文件夹，可能的值为default、on和off。

如果配置为default，VS Code 会根据发出打开请求的上下文来决定是重用还是打开新窗口。将其切换为on或off以始终保持相同的行为。例如，如果你认为从文件菜单中选择文件或文件夹应始终在新窗口中打开，请将其设置为on。

window.restoreWindows 设置会告知 VS Code 如何恢复你上一个会话中打开的窗口。默认情况下，VS Code 会恢复你上一个会话中处理过的所有窗口（设置：all）。将此设置更改为none，则永不重新打开任何窗口，并始终以空的 VS Code 实例启动。将其更改为one以重新打开你处理过的最后一个窗口，或更改为folders以仅恢复打开了文件夹的窗口。

后续步骤

现在你已经了解了 VS Code 的整体布局，接下来通过查阅以下文章来开始自定义编辑器，使其符合你的工作习惯：

• 更改主题 - 根据你的偏好设置颜色和/或文件图标主题。
• 使用自定义布局 - 了解有关 VS Code 工作台和编辑器布局自定义的更多信息。

常见问题

如何更改缩进指南的颜色？

缩进指南的颜色是可自定义的，就像大多数 VS Code 用户界面元素一样。要自定义活动颜色主题的缩进指南颜色，请使用workbench.colorCustomizations设置并修改editorIndentGuide.background值。

例如，要使缩进指南呈现亮蓝色，请将以下内容添加到你的settings.json中：

"workbench.colorCustomizations": {
    "editorIndentGuide.background": "#0000ff"
}

我可以隐藏资源管理器视图中的“打开的编辑器”部分吗？

是的，你可以通过资源管理器中的视图菜单并切换打开的编辑器菜单项来显示或隐藏“打开的编辑器”部分。