用户界面

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

基本布局

VS Code 配备了简洁直观的布局，最大限度地利用了编辑器提供的空间，同时留有充足的空间来浏览和访问你的文件夹或项目的完整上下文。用户界面分为五个主要区域

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

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

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

并排编辑

你可以根据需要垂直和水平并排打开任意数量的编辑器。如果你已经打开了一个编辑器，则有多种方法可以在侧面打开另一个编辑器

• Alt 并在资源管理器视图中选择一个文件。
• ⌘\ (Windows、Linux Ctrl+\) 将活动编辑器拆分为两个。
• 从文件上的资源管理器上下文菜单中选择“在侧边打开”(⌃Enter (Windows、Linux Ctrl+Enter))。
• 选择编辑器右上角的“拆分编辑器”按钮。
• 将文件拖放到编辑器区域的任意一侧。
• 在“快速打开”(⌘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+\)) 拆分当前编辑器，而无需创建新的编辑器组。要了解有关此编辑器模式以及用于在两侧之间导航的特定命令的更多信息，你可以阅读自定义布局文章中的部分。

浮动窗口

你可以使用“移动到新窗口”或“复制到新窗口”(⌘K O (Windows、Linux Ctrl+K O)) 命令将编辑器移动到它们自己的浮动窗口中。要了解有关浮动编辑器窗口的更多信息，你可以阅读自定义布局文章中的部分。

小地图

小地图（代码轮廓）为你提供源代码的高级概述，这对于快速导航和代码理解非常有用。文件的迷你地图显示在编辑器的右侧。你可以选择或拖动阴影区域以快速跳转到文件中的不同部分。

如果你在编辑器中有折叠标记，例如 //#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)

你可以通过将 window.menuBarVisibility 设置从 classic 更改为 toggle 或 hidden，来隐藏 Windows 和 Linux 上的菜单栏。设置为 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 设置，为标签页显示标签指定一个或多个命名模式。命名模式由两个组件组成

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

以下示例使用标签页标签 orders/index 显示 /src/orders/index.html 文件。

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

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

• ${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 设置禁用此功能。

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

您可以更改 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"
}

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

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