用户界面

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

基本布局

VS Code 采用了一个简单直观的布局，最大限度地利用提供的空间来显示编辑器，同时留出足够的空间来浏览和访问文件夹或项目的完整上下文。用户界面分为六个主要区域：

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

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

每个编辑器中的打开文件在编辑器区域顶部的标签页（Tabs）下显示。要了解更多关于标签页的信息，请参阅标签页部分。

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

并排编辑

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

• Alt 并在资源管理器视图中选择一个文件。
• ⌘\ (Windows, Linux Ctrl+\) 以将活动编辑器拆分为两个。
• 打开到侧 (⌃回车键 (Windows, Linux Ctrl+回车键)) 在资源管理器上下文菜单上的文件。
• 选择编辑器右上角的拆分编辑器按钮。
• 将文件拖放到编辑器区域的任何一边。按住Ctrl (在macOS上按Option)在拖动时以复制标签而不是移动它。
• 按 ⌃Enter (Windows, Linux Ctrl+Enter) 在 快速打开 (⌘P (Windows, Linux Ctrl+P)) 文件列表中。

当你打开另一个文件时，活动的编辑器将显示该文件的内容。如果你有两个并排的编辑器，并且你想将文件“foo.cs”打开到右侧的编辑器中，请确保在打开文件“foo.cs”之前，这个编辑器是活动的（通过点击其内部）。

默认情况下，编辑器在活动编辑器的右侧打开。您可以使用以下方法更改此行为

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

编辑组

当你拆分编辑器（使用拆分编辑器或在旁边打开命令）时，会创建一个新的编辑器区域（编辑组），该区域可以容纳一组项目。你可以垂直和水平地并排打开任意多个编辑组。

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

你可以在工作台上拖动编辑器组，将单独的标签页在组之间移动，并快速关闭整个组 (关闭全部)。

分组

您可以通过执行视图：在组中拆分编辑器命令（⌘K ⇧⌘\（Windows, Linux Ctrl+K Ctrl+Shift+\））来拆分当前编辑器而无需创建新的编辑器组。要了解更多关于这种编辑器模式以及在两个部分之间导航的特定命令，您可以阅读自定义布局文章中的相关部分。

浮动Windows

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

将编辑器标签从当前 VS Code Windows拖出以在浮动Windows中打开。或者，使用编辑器标签的移动到新Windows或复制到新Windows上下文选项。

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

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

小地图

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

如果你在编辑器中有折叠的标记，例如//#区域评论，然后小地图会显示折叠标记名称。折叠标记是特定语言的，所以检查适用于您的语言的标记。

粘性滚动

Sticky Scroll 在编辑器顶部显示当前可见的嵌套作用域的起始行。它通过指示您在文件中的位置来帮助导航，并允许您快速跳回当前作用域的顶部。

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

缩进指南

编辑器显示缩进指南（垂直线），帮助您快速看到匹配的缩进级别。如果您想禁用缩进指南，可以设置

面包屑导航

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

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

资源管理器视图

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

在 VS Code 中打开文件夹后，文件夹的内容会显示在资源管理器视图中。您可以从这里执行许多操作：

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

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

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

默认情况下，VS Code 会将一些文件夹排除在资源管理器视图之外，例如.git. 使用

您还可以隐藏在您的指定中的文件和文件夹.gitignore通过启用文件

多选

您可以在资源管理器视图和打开的编辑器部分选择多个文件，以对多个项目执行操作（删除、拖放或并排打开）。按住Ctrl（在macOS上为Cmd）并选择单个文件，或者按住Shift以选择一系列文件。如果您选择了两个项目，您现在还可以使用上下文菜单的比较所选命令快速比较两个文件。

"工作台.列表.多选修饰键"："alt"

高级树导航

您可以在资源管理器视图中过滤文件和文件夹。将焦点放在资源管理器视图上，按⌥⌘F（Windows, LinuxCtrl+Alt+F）以打开查找控制并输入您要匹配的文件或文件夹名称的一部分。此导航功能适用于 VS Code 中的所有树视图。

按下过滤器按钮在两种模式之间切换：突出显示和过滤。按下向下可以让你聚焦于第一个匹配元素并导航到后续匹配元素。在突出显示模式下，文件夹上会显示徽章，以指示它们包含匹配文件。

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

大纲视图

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

大纲视图有不同排序方式模式，可选光标跟踪，并支持通常的打开手势。它还包括一个输入框以进行查找或过滤。错误和警告也会在大纲视图中显示，使您可以一眼看到问题的位置。

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

有多个大纲视图设置。搜索以大纲。并配置在大纲视图中显示的信息。

时间线视图

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

在时间轴视图工具栏中的过滤器操作可以让你在源代码控制事件和本地文件事件之间进行过滤：

本地文件历史记录

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

从一个条目中你可以：

• 比较本地文件或以前条目的更改。
• 恢复内容。
• 删除或重命名条目。

您可以为使用本地历史记录进行配置：

• 工作台.本地历史记录.启用

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 启用或禁用本地历史记录（默认：true）
• 工作台.本地历史记录.最大文件大小

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 创建本地历史条目时的文件大小限制（默认：256 KB）
• 工作台.本地历史记录.最大文件条目

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 每个文件的本地历史记录条目限制（默认：50）
• 工作台.本地历史.排除

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 用于从本地历史记录中排除某些文件的全局模式
• 工作台.本地历史.合并Windows

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 在本地文件历史记录中向最后一个条目添加进一步更改的秒数间隔（默认 10 秒）

提交历史

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

当你在历史记录中右键点击一个提交时，你可以：

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

您可以为此设置配置以用于与Git历史记录的交互：

• git.时间轴.日期

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 显示文件提交的日期或作者日期

浏览量

资源管理器视图只是 VS Code 提供的视图之一。还有其他视图，例如：

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

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

命令面板

VS Code 也可以通过键盘访问。最重要的键组合是⇧⌘P（Windows, Linux Ctrl+Shift+P），它会显示出命令面板。从这里，你可以访问 VS Code 中的所有功能，包括最常用的键盘快捷键。

命令面板提供了许多命令的访问途径。您可以使用编辑器命令、打开文件、搜索符号，并查看文件的快速概览，全部都可以通过同一个交互Windows完成。以下是一些小贴士：

• ⌘P (Windows, Linux Ctrl+P) 可以通过输入其名称来导航到任何文件或符号
• ⌃Tab (Windows, Linux ⌃+Tab) 循环显示最近打开的文件
• ⇧⌘P (Windows, Linux Ctrl+Shift+P) 直接带您到编辑器命令
• ⇧⌘O (Windows, Linux Ctrl+Shift+O) 可以让你导航到文件中的特定符号
• ⌃G (Windows, Linux Ctrl+G) 使您能够导航到文件中的特定行

类型？在输入框中输入以获取可在命令面板中运行的可用命令列表。

配置编辑器

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

隐藏菜单栏（Windows，Linux）

您可以通过更改设置在Windows和Linux上隐藏菜单栏

你也可以在Windows和Linux上使用视图：切换菜单栏命令隐藏菜单栏。这个命令设置

设置

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

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

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

禅意模式

禅模式通过隐藏所有UI元素（编辑器除外），将VS Code切换到全屏并居中编辑器，使您能够专注于代码。禅模式可以通过视图 > 外观 > 禅模式菜单，视图：切换禅模式在命令面板中，或使用快捷键⌘K Z（Windows, Linux Ctrl+K Z）。按两次Esc以退出禅模式。全屏切换可以通过

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

• zenMode.隐藏活动栏

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 隐藏活动栏。默认真输入：.
• zenMode.隐藏状态栏

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 隐藏状态栏。默认真输入：.
• zenMode.隐藏行号

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 隐藏行号。默认真输入：.
• zenMode显示标签

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 控制是否显示多个、单个或不显示编辑器标签。默认多个输入：.
• zenMode.全屏

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 将工作台设置为全屏显示。默认真输入：.
• zenMode. 恢复

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 重新启动时恢复禅模式。默认真输入：.
• zenMode.centerLayout

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 使用 居中编辑器布局。默认 真输入：.
• zenMode.静音通知

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 不显示通知。默认真输入：.

使用勿扰模式减少通知

如果你被不断弹出的通知所淹没，有一种方法可以减少通知，无论是所有通知，还是特定扩展的通知。

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

找到划掉的铃铛图标，以访问一个菜单，您可以在其中选择性地禁用扩展的通知或启用全局的勿扰模式以禁用所有通知。

居中编辑器布局

居中编辑器布局允许您将编辑器区域居中对齐。这在使用大显示器上的单个编辑器时非常有用。您可以使用侧边框调整视图大小（按住奥特键可单独移动侧面)。

Tab

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

您可以拖动标签以重新排序。要同时对多个标签执行操作，请按住Ctrl键（在macOS上为Cmd）并选择您要操作的标签。要选择一系列标签，请按住Shift键并选择该范围内的第一个和最后一个标签。

当您拥有的未完成项目多于标题区域可以容纳的项目时，您可以使用资源管理器视图中的“打开编辑器”部分（通过请输入具体的网页文本内容，以便我进行翻译。按钮) 显示带有标签项目的下拉列表。

在标签和编辑器区域之间还有一个滚动条，可以将编辑器拖动到视图中。您可以增加滚动条的高度，以使其更容易拖动，通过设置Workbench > Editor: Title Scrollbar Sizing (

如果您不想使用标签，可以通过设置禁用该功能

    "workbench.editor.showTabs"："single"

请参见下面的章节以优化 VS Code 以不使用标签页工作.

标签顺序

默认情况下，新标签页会添加到现有标签页的右侧。您可以使用 来控制新标签页的位置。

例如，您可能希望新标签页项目出现在左侧：

    "workbench.editor.openPositioning": "left"

您可以通过拖动和放置来重新排序标签。

如果您希望编辑器标签始终可见，您可以将其固定到编辑器标签栏。在自定义布局文章中了解更多关于固定标签的信息。

该

预览模式

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

预览模式在标签标题中以斜体表示：

如果您不希望使用预览模式并总是创建一个新标签页，您可以使用这些设置来控制此行为：

• 工作台.编辑器.启用预览

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 全局启用或禁用预览编辑器
• 工作台.编辑器.从快速打开启用预览

  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
  - 启用或禁用从快速打开打开的预览编辑器

包裹标签

要查看更多编辑器标签，您可以使用包裹标签布局，其中编辑器标签会包裹以填充编辑器区域上方的多行。通过工作台 > 编辑器：包裹标签启用包裹标签 (

自定义标签标签

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

要为标签启用自定义显示标签，请设置

    "workbench.editor.customLabels.enabled"：真

您可以指定一个或多个命名模式用于标签显示标签，使用

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

以下示例显示了/src/orders/index.html文件标签为订单/索引输入：.

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

以下示例使用了${extname}文件变量测试/编辑器测试.ts输入：

• ${filename} => 编辑器
• ${extname} => test.ts
• ${extname(0)} => ts
• ${extname(1)}=> 测试
• ${extname(-1)}=> 测试
• ${extname(-2)} => ts

网格编辑器布局

默认情况下，编辑器组以垂直列排列。例如，当您拆分编辑器时，它会将编辑器打开到侧面。您可以根据自己的喜好以任何布局排列编辑器组，无论是垂直还是水平：

为了支持灵活的布局，您可以创建空的编辑器组。默认情况下，关闭编辑器组中的最后一个编辑器也会关闭该组本身，但您可以使用新的设置更改此行为。工作台编辑器关闭空组: false输入：

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

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

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

键盘快捷键

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

• ⌥⌘→ (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) - 关闭所有编辑器。

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

无标签工作

如果您不希望使用标签（分标签标题），则可以通过设置完全禁用标签

禁用预览模式

没有标签，打开编辑器部分是进行文件导航的快速方法。然而，启用预览编辑器模式后，文件不会添加到打开编辑器部分。您可以通过禁用此功能

使用键盘快捷键来浏览编辑器历史记录

你可以通过Ctrl+Tab来更改vs，以显示历史记录中所有打开的编辑器列表，而与当前活动的编辑器组无关。

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

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

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

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

macOS:

{ "键": "cmd+w", "命令": "工作台.操作.关闭组中的编辑器" }

Windows/Linux:

{ "键": "ctrl+w", "命令": "工作台.操作.关闭组中的编辑器" }

Windows管理

VS Code 有各种选项来控制 VS Code Windows（实例）在不同会话之间应该如何打开或恢复。

设置

如果配置为默认VS Code根据请求打开的上下文决定是重用还是打开一个新Windows。将其翻转为上或关 始终表现出相同的行为。例如，如果您觉得从 文件 菜单中选择一个文件或文件夹应该始终在新Windows中打开，请将其设置为 上输入：.

该

下一步

既然你已经了解了 VS Code 的整体布局，可以通过阅读以下文章来自定义编辑器以符合你的工作习惯：

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

常见问题

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

缩进指南的颜色是可定制的，大多数 VS Code 用户界面元素也是如此。要定制您当前活动的 Color Theme 的缩进指南颜色，请使用

例如，要使缩进指南为亮蓝色，请在你的文件中添加以下内容：settings.json输入：

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

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

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