用户界面

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

基本布局

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

• 编辑器——编辑文件的主要区域。你可以随意并排打开任意数量的编辑器，无论是纵向还是横向。
• 主侧栏——包含不同视图，如Explorer，帮助你完成项目。
• 次要侧栏——在主侧边栏对面。默认情况下，包含聊天视图。将主侧边栏的视图拖放到次侧栏以移动它们。
• 状态栏 - 关于已打开项目和你编辑的文件信息。
• 活动栏——位于最左侧。它允许你在视图之间切换，并提供额外的上下文特定指示，比如启用Git时的外出更改次数。你可以更改活动栏的位置。
• 面板——编辑区域下方的额外视角空间。默认情况下，它包含输出、调试信息、错误和警告，以及一个集成的终端。面板也可以向左或向右移动，以获得更多垂直空间。

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

每个编辑器中打开的文件会以标签页标题（Tabs）显示在编辑器区域顶部。想了解更多关于标签页头的信息，请参见“制表页”部分。

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

并排编辑

你可以随意并排打开任意数量的编辑器，无论是纵向还是横向。如果你已经开了一个编辑器，有多种方式可以打开旁边的另一个编辑器：

• Alt 键，在资源管理器视图中选择一个文件。
• ⌘\（Windows，Linux Ctrl+\）将主动编辑器拆分为两个。
• 在文件资源管理器的右键菜单中，侧面打开（⌃Enter （Windows，Linux Ctrl+Enter））。
• 选择编辑器右上角的“分拆编辑器”按钮。
• 将文件拖放到编辑器区域的任意一侧。拖动时按住Ctrl（macOS上的Option键）来复制标签页，而不是移动它。
• 在快速打开（Windows，Linux Ctrl+P）文件列表中按⌃Enter（Windows，Linux Ctrl+P））。

当你打开另一个文件时，激活的编辑器会显示该文件的内容。如果你有两个编辑器并排，想在右侧编辑器中打开文件“foo.cs”，请确保该编辑器处于激活状态（点击其中），然后再打开文件“foo.cs”。

默认情况下，编辑者会打开激活页面的右侧。你可以用

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

编辑组

当你用“拆分编辑器”或“打开到侧边”命令拆分编辑器时，会创建一个新的编辑器区域（编辑组），可以存放一组项目。你可以随意地并排开任意数量的编辑器组，无论是纵向还是横向。

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

你可以在工作台上拖拽编辑器组，在组间移动单个标签页，并快速关闭整个组（关闭所有）。

小组分裂

你可以用“View： Split Editor in Group”命令（⌘K ⇧⌘\，Windows，Linux Ctrl+K Ctrl+Shift+\）在不创建新编辑器组的情况下拆分当前编辑器。想了解更多关于编辑器模式及在两端之间导航的具体命令，可以阅读自定义布局文章中的相关章节。

浮动窗

你可以将编辑器、终端或特定视图移动到它们各自的浮动窗口中。如果你有多显示器设置，想在不同显示器上保持文件打开，这很有用。

把编辑器标签从当前的VS Code窗口拖出，在浮动窗口中打开它。或者，使用编辑器标签页中的“移动到新窗口”或“复制到新窗口”上下文选项。

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

想了解更多关于浮动窗口的信息，请阅读自定义布局文章中的相关章节。

小地图

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

如果你在编辑器里有折叠标记，比如//#region评论，然后小地图显示折叠标记名称。折叠标记是针对特定语言的，所以请检查哪些标记适用于你的语言。

粘性卷轴

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

Sticky Scroll 使用多种不同的内容模型来创建标题。你可以在轮廓提供者模型、折叠提供者模型和缩进模型之间选择，以决定在粘贴滚动区域显示哪些行。如果当前语言没有可用的模型，VS Code 会按上述顺序退回到下一个模型。最初使用的默认模型来自

缩进导线

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

面包屑

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

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

探险者视图

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

在 VS Code 中打开文件夹后，文件夹内容会显示在资源管理器视图中。你可以从这里做很多事情：

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

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

你也可以通过在作系统的原生文件资源管理器中右键点击文件或文件夹，在Windows上选择文件资源管理器中的“揭示”，在macOS中选择“在Finder中”揭示“，或在Linux上选择”打开包含文件夹“，从而导航到文件或文件夹的位置。

默认情况下，VS Code 会排除某些文件夹在资源管理器视图中显示，例如.git.使用该

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

多选

你可以在资源管理器视图和“打开编辑器”部分选择多个文件，对多个项目执行作（删除、拖拽或侧面打开）。按住Ctrl（macOS上是Cmd）选择单个文件，或按住Shift选择一系列文件。如果你选择了两个项目，现在还可以使用上下文菜单的“比较已选中”命令快速对应两个文件。

"workbench.list.multiSelectModifier": "alt"

高级树状导航

你可以在资源管理器视图中筛选文件和文件夹。在资源管理器视图中，按 ⌥⌘F（Windows，Linux Ctrl+Alt+F）打开查找控件，输入你想匹配的文件或文件夹名称部分。该导航功能适用于 VS Code 中所有树状视图。

按下筛选按钮可以在高亮和过滤两种模式之间切换。按下可以让你专注于第一个匹配的元素，并导航到后续匹配的元素。在高亮模式下，文件夹上会显示一个徽章，表示它们包含匹配的文件。

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

轮廓视图

轮廓视图是资源管理器视图底部的一个独立部分。展开时，它会显示当前激活编辑器的符号树。

轮廓视图有多种排序模式，可选的光标跟踪，并支持常见的开放手势。它还包含一个输入框，用于查找或筛选。大纲视图中还会显示错误和警告，让你一目了然地看到问题的位置。

对于符号，视图依赖于你安装的扩展名计算出的不同文件类型信息。例如，内置的 Markdown 支持会返回 Markdown 文件符号的 Markdown 头部层级结构。

有几种轮廓视图设置。搜索以下设置outline.并配置大纲视图中显示的信息。

时间线视图

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

时间线视图工具栏中的筛选作允许你在源控事件和本地文件事件之间进行筛选：

本地文件历史

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

从一条条目中你可以：

• 比较本地文件或之前条目的变化。
• 恢复内容。
• 删除或重命名该条目。

你可以配置以下设置来处理本地历史：

• workbench.localHistory.enabled

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 启用或禁用本地历史（默认：true）
• workbench.localHistory.maxFileSize

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 创建本地历史条目时的文件大小限制（默认：256 KB）
• workbench.localHistory.maxFileEntries

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 每个文件的本地历史条目限制（默认：50）
• workbench.localHistory.exclude

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 用于排除某些文件进入本地历史的球状模式
• workbench.localHistory.mergeWindow（工作台）本地历史（workbench.localHistory.merge）窗口

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 以秒为单位的间隔，在此期间对本地文件历史最后一条条目添加进一步的变更（默认为10秒）

提交历史

VS Code 内置的 Git 支持提供了指定文件的 Git 提交历史。选择提交会打开该提交引入的变更的不同视图。当你右键点击提交时，会获得“复制提交 ID”和“复制提交信息”的选项。

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

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

你可以配置以下设置来处理 Git 历史：

• git.timeline.date

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

观点

Explorer 视图只是 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上通过更改设置隐藏菜单栏

你也可以在Windows和Linux上使用“查看：切换菜单栏”命令隐藏菜单栏。该命令集合

背景设定

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

你可以在设置编辑器中查看和编辑设置（选择设置>>偏好设置 ，或按⌘（Windows，Linux Ctrl+））。使用用户和工作区标签在用户和工作区之间切换设置。你可以用顶部的搜索框筛选设置。

或者，你也可以直接在settings.json档案。使用偏好设置：打开用户设置（JSON）命令打开settings.json file.关于工作区设置，请打开settings.json文件.vscode在你的工作区里。

禅模式

禅模式让你专注于代码，隐藏除编辑器外的所有UI元素，切换VS Code为全屏，并将编辑器置中。禅模式可以通过禅模式菜单>视图>外观、命令面板中的视图：切换禅模式，或通过快捷键 ⌘K Z（Windows，Linux Ctrl+K Z）切换。双击Esc键即可退出禅模式。切换到全屏可以通过以下方式关闭

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

• zenMode.hideActivityBar

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 隐藏活动栏。默认true.
• zenMode.hideStatusBar

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 隐藏状态栏。默认true.
• zenMode.hideLineNumbers

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 隐藏行号。默认true.
• zenMode.showTabs

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 控制显示多个、单一个或无编辑器标签。默认multiple.
• zenMode.fullScreen

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 将工作台设置为全屏显示。默认true.
• zenMode.restore

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 重启时恢复禅模式。默认true.
• zenMode.centerLayout

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 使用居中编辑器布局。默认true.
• zenMode.silentNotifications

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 不显示通知。默认true.

通过“请勿打扰”模式减少通知

如果你被弹出的通知淹没，有办法减少通知，无论是针对所有通知，还是针对特定扩展的通知。

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

找到被划掉的铃铛图标，进入一个菜单，可以选择性地禁用扩展的通知，或启用全局的“请勿打扰模式”来禁用所有通知。

居中编辑器布局

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

标签页

VS Code 在编辑器上方的标题区域显示已打开的项目，带有标签页（标签标题）。打开文件时，会为该文件添加一个新标签页。标签页让你能快速切换项目。

你可以拖拽标签页来重新排序。要同时对多个标签页执行作，按住Ctrl键（macOS中是Cmd），然后选择你想作的标签页。要选择一个范围的标签，按住Shift键，选择该范围内的第一个和最后一个标签页。

当你有超过标题区域能容纳的未完成项目时，可以使用资源管理器视图中的“开放编辑器”部分（可通过...按钮）用于显示标签项的下拉列表。

标签页和编辑器区域之间还有滚动条，可以拖动编辑器进入视图。你可以通过设置 Workbench > 编辑器：标题滚动条大小来增加滚动条的高度，以便拖动更方便 (

如果你不想用制表符，可以通过设置

    "workbench.editor.showTabs": "single"

请参见下方部分，如何优化VS Code以适应无制表符的工作。

制表顺序

默认情况下，新标签页会被添加到现有标签页的右侧。你可以用

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

    "workbench.editor.openPositioning": "left"

你可以通过拖拽标签页来重新排序。

如果你想让编辑器标签始终可见，可以把它钉在编辑器标签栏。想了解更多关于固定标签的信息，请参见自定义布局文章。

该

预览模式

当你在资源管理器视图中单击或选择文件时，它会以预览模式显示，并重复使用已有的标签页（预览标签）。如果你快速浏览文件，不想让每个访问的文件都有自己的标签页，这很有用。当你开始编辑文件或用双击打开资源管理器时，会有一个专门用于该文件的新标签页。

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

如果你不喜欢使用预览模式，并且总是创建新标签页，可以通过以下设置来控制行为：

• workbench.editor.enablePreview

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 全局启用或禁用预览编辑器
• workbench.editor.enablePreviewFromQuickOpen

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 在快速打开时启用或禁用预览编辑器

包膜标签

想看到更多编辑器标签页，可以使用包裹标签布局，编辑器标签页会包裹填充编辑器区域以上的多行。用 Workbench > 编辑器启用包裹标签页：包裹标签页 (

自定义标签标签

当你同时打开多个同名文件时，很难区分不同的标签页。为了帮助这一点，你可以在标签上应用自定义显示标签。你可以选择在工作区里哪些文件上应用自定义标签。

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

    "workbench.editor.customLabels.enabled": true

你可以为标签显示标签指定一种或多种命名模式，包括

• Item - 一个与文件路径匹配的团块图案，用于应用自定义标签。例如，**/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}=>编辑器
• ${extname}=> test.ts
• ${extname(0)}= > ts
• ${extname(1)}=>检验
• ${extname(-1)}=>检验
• ${extname(-2)}= > ts

网格编辑器布局

默认情况下，编辑器组按竖列排列。比如，当你拆分编辑器时，编辑器会被侧面打开。你可以以任何你喜欢的布局来排列编辑器组，无论是纵向还是横向：

为了支持灵活布局，你可以创建空的编辑组。默认情况下，关闭编辑组的最后一个编辑器也会关闭该组本身，但你可以用新设置更改此行为workbench.editor.closeEmptyGroups: 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：

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

Windows/Linux：

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

窗口管理

VS Code 有多种选项来控制会话间如何打开或恢复 VS Code 窗口（实例）。

背景设定

如果配置为defaultVS Code 根据请求发出的上下文决定是否重用或打开新窗口。把它翻转为on或off总是保持同样的行为。例如，如果你觉得从文件菜单中选择文件或文件夹时应该总是在新窗口打开，可以设置为on.

该

下一步

既然你已经了解了 VS Code 的整体布局，可以通过查看以下文章，开始根据你喜欢的方式自定义编辑器：

• 更改主题——设置颜色和/或文件图标主题以符合您的偏好。
• 使用自定义布局——了解更多关于VS Code工作台和编辑器布局自定义的信息。

常见问题

我该如何更改缩进导线的颜色？

缩进导引颜色可自定义，大多数 VS Code 用户界面元素也可自定义。要自定义你当前色彩主题的缩进导引颜色，请使用

例如，要让缩进导引变成鲜蓝色，可以在你的settings.json:

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

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

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