用户界面

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

基础布局

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

  • 编辑器 (Editor) - 编辑文件的主要区域。您可以根据需要垂直或水平并排打开任意数量的编辑器。
  • 主侧边栏 (Primary Side Bar) - 包含资源管理器等不同视图,可在您处理项目时提供辅助。
  • 辅助侧边栏 (Secondary Side Bar) - 位于主侧边栏的对面。默认包含“聊天”视图。您可以从主侧边栏拖放视图到辅助侧边栏以移动它们。
  • 状态栏 (Status Bar) - 关于所打开项目和正在编辑文件的信息。
  • 活动栏 (Activity Bar) - 位于最左侧。让您可以在不同视图之间切换,并提供额外的上下文相关指示器(例如在启用 Git 时显示的待发送更改数量)。您可以更改活动栏的位置。
  • 面板 (Panel) - 编辑器区域下方用于显示视图的额外空间。默认包含输出、调试信息、问题和集成终端。面板也可以移动到左侧或右侧以获取更多垂直空间。

Screenshot of the VS Code user interface, highlighting the main areas.

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

每个编辑器中打开的文件都以标签页标题(Tabs)的形式显示在编辑器区域的顶部。要了解关于标签页标题的更多信息,请参阅标签页部分。

提示

您可以通过右键点击活动栏并选择将主侧边栏移至右侧,或者切换其可见性(⌘B (Windows, Linux Ctrl+B))来将主侧边栏移动到右侧。

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

并排编辑

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

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

Side by Side editing

当您打开另一个文件时,活动的编辑器将显示该文件的内容。如果您并排打开了两个编辑器,并且想在右侧的编辑器中打开文件 'foo.cs',请确保该编辑器处于活动状态(通过在其中点击),然后再打开文件 'foo.cs'。

默认情况下,编辑器会在活动编辑器右侧打开。您可以通过 workbench.editor.openSideBySideDirection 在 VS Code 中打开 在 VS Code Insiders 中打开 设置将此行为更改为在活动编辑器的下方打开新编辑器。

当您打开多个编辑器时,可以通过按住 Ctrl 键(macOS 为 Cmd 键)并按下 123 来快速切换。

提示

您可以调整编辑器大小并重新排序。拖放编辑器标题区域即可重新定位或调整编辑器大小。

编辑器组

当您拆分编辑器(使用拆分编辑器在侧边打开命令)时,会创建一个新的编辑器区域(编辑器组),它可以容纳一组项目。您可以根据需要垂直或水平并排打开任意数量的编辑器组。

您可以在资源管理器视图顶部的已打开的编辑器部分清晰地看到这些内容(在资源管理器视图中切换 ... > 已打开的编辑器)。

tabs editor groups

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

注意

无论您是否启用了标签页,VS Code 都会使用编辑器组。在没有标签页的情况下,编辑器组是您打开的项目堆栈,最近选中的项目在编辑器窗格中可见。

组内拆分

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

浮动窗口

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

Screenshot that shows the OS desktop with VS Code window and a CSV file opened in a floating window.

将编辑器标签页从当前的 VS Code 窗口中拖出,即可在浮动窗口中打开它。或者,使用编辑器标签页上的移入新窗口复制到新窗口上下文菜单选项。

要将浮动窗口固定在屏幕顶部,请从其标题栏中选择设置总在最前选项(图钉图标)。

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

模态编辑器

VS Code 中的某些配置编辑器是在编辑器区域上方以居中的模态覆盖层形式打开的,而不是作为常规编辑器标签页。这些模态编辑器包括

  • 设置编辑器
  • 键盘快捷方式编辑器
  • 配置文件编辑器
  • 工作区信任编辑器
  • 语言模型编辑器
  • 扩展编辑器

您可以点击模态编辑器外部、按 Esc 键或选择关闭按钮来退出。您还可以将其最大化以填满编辑器区域,或者将其移回主窗口作为常规编辑器标签页。

注意

您可以通过 workbench.editor.useModal 在 VS Code 中打开 在 VS Code Insiders 中打开 设置来控制此行为。将其设置为 off 始终以常规标签页打开编辑器,设置为 some 仅以模态覆盖层打开配置编辑器(默认),或设置为 all 以模态覆盖层打开所有编辑器。

迷你地图

小地图(代码大纲)为您提供了源代码的高级概览,这对于快速导航和理解代码很有用。文件的代码小地图显示在编辑器的右侧。您可以选择或拖动阴影区域来快速跳转到文件中的不同部分。

如果您在编辑器中有折叠标记,例如 //#region 注释,那么小地图会显示折叠标记的名称。折叠标记是特定于语言的,所以请检查哪些标记适用于您的语言。

minimap

提示

您可以通过在用户或工作区设置中分别设置 "editor.minimap.side": "left""editor.minimap.enabled": false 来将小地图移动到左侧或完全禁用它。

粘滞滚动

粘性滚动 (Sticky Scroll) 会在编辑器顶部显示当前可见嵌套作用域的起始行。它通过指明您在文件中的位置并允许您快速跳转回当前作用域的顶部来促进导航。

stickyScroll

提示

您可以通过 editor.stickyScroll.enabled 在 VS Code 中打开 在 VS Code Insiders 中打开 设置启用/禁用粘性滚动。

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

缩进参考线

编辑器显示缩进参考线(垂直线),可帮助您快速查看匹配的缩进级别。如果您想禁用缩进参考线,可以在用户或工作区设置中将 editor.guides.indentation 在 VS Code 中打开 在 VS Code Insiders 中打开 设置为 false

面包屑导航

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

Breadcrumbs

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

资源管理器视图

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

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

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

您可以将 VS Code 外部的文件拖放到资源管理器视图中进行复制。如果资源管理器是空的,VS Code 会打开这些文件。您还可以从 VS Code 外部复制并粘贴文件到资源管理器视图中。通过 explorer.autoOpenDroppedFile 在 VS Code 中打开 在 VS Code Insiders 中打开 设置,您可以配置是否自动打开该文件。

VS Code 可以很好地与您可能使用的其他工具协作,尤其是命令行工具。如果您想在 VS Code 当前打开的文件夹上下文中运行命令行工具,请右键点击该文件夹并选择在集成终端中打开

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

提示

输入 ⌘P (Windows, Linux Ctrl+P)快速打开)以按名称快速搜索并打开文件。

默认情况下,VS Code 会排除某些文件夹不在资源管理器视图中显示,例如 .git。使用 files.exclude 在 VS Code 中打开 在 VS Code Insiders 中打开 设置来配置从资源管理器视图中隐藏文件和文件夹的规则。此设置中的 Glob 模式遵循您操作系统的区分大小写规则(Windows/macOS 不区分大小写,Linux 区分大小写)。了解更多关于Glob 模式的信息。

您还可以通过启用 explorer.excludeGitIgnore 在 VS Code 中打开 在 VS Code Insiders 中打开 设置来隐藏 .gitignore 文件中指定的文件和文件夹。启用后,.gitignore 模式在 Windows 和 macOS 上应用不区分大小写的匹配,在 Linux 上应用区分大小写的匹配。例如,.gitignore 中的 node_modules 模式在 Windows 和 macOS 上将匹配 node_modules/Node_Modules/NODE_MODULES/ 以及其他大小写变体,但在 Linux 上仅匹配精确名称。

imageCarousel.explorerContextMenu.enabled 在 VS Code 中打开 在 VS Code Insiders 中打开 (实验性) 启用时,您可以右键点击资源管理器中的图像或视频文件或文件夹,并选择在轮播中打开图像以在专门的轮播视图中浏览媒体文件。这也适用于多选。

提示

您可以隐藏派生资源文件,例如 Unity 中的 *.meta 文件,或 TypeScript 项目中的 *.js 文件。对于 Unity 排除 *.cs.meta 文件,选择的模式应该是:"**/*.cs.meta": true。对于 TypeScript,您可以使用以下方式排除 TypeScript 文件生成的 JavaScript:"**/*.js": {"when": "$(basename).ts"}

多选

您可以在资源管理器视图和“已打开的编辑器”部分中选择多个文件,以对多个项目运行操作(删除、拖放或在侧边打开)。按住 Ctrl 键(macOS 为 Cmd 键)并选择单个文件,或按住 Shift 键选择一系列文件。如果您选择了两个项目,现在也可以使用上下文菜单中的比较选中项命令快速对比两个文件。

注意

在较早的 VS Code 版本中,按住 Ctrl 键(macOS 为 Cmd 键)点击会以新编辑器组在侧边打开文件。如果您仍然想要此行为,可以使用 workbench.list.multiSelectModifier 在 VS Code 中打开 在 VS Code Insiders 中打开 设置将多选修改键更改为 Alt 键。

"workbench.list.multiSelectModifier": "alt"

高级树导航

您可以过滤资源管理器视图中的文件和文件夹。在聚焦于资源管理器视图的情况下,按 ⌥⌘F (Windows, Linux Ctrl+Alt+F) 打开查找控件,然后输入您想要匹配的部分文件或文件夹名称。此导航功能适用于 VS Code 中的所有树视图。

过滤按钮可在两种模式之间切换:高亮显示和过滤。按下 Down 键让您可以聚焦第一个匹配元素并导航到后续匹配元素。在高亮显示模式下,文件夹上会显示一个徽章,表明它们包含匹配的文件。

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

Filtering files in the File Explorer

大纲视图

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

Outline view

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

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

Markdown Outline view

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

时间线视图

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

Timeline view

时间轴视图工具栏中的过滤操作使您能够在源代码管理事件和本地文件事件之间进行过滤

Timeline filter drop down with Git History unchecked and Local History checked

本地文件历史记录

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

对于每个条目,您可以

  • 将更改与本地文件或之前的条目进行比较。
  • 恢复内容。
  • 删除或重命名条目。
提示

如果您不小心删除了一个文件,可以使用时间轴视图中的 ... > 本地历史记录:查找要恢复的条目操作从本地历史记录中恢复它,然后从快速选择框中选择您的文件。

您可以为处理本地历史记录配置这些设置

  • workbench.localHistory.enabled 在 VS Code 中打开 在 VS Code Insiders 中打开 - 启用或禁用本地历史记录(默认:true)
  • workbench.localHistory.maxFileSize 在 VS Code 中打开 在 VS Code Insiders 中打开 - 创建本地历史记录条目时的文件大小限制(默认:256 KB)
  • workbench.localHistory.maxFileEntries 在 VS Code 中打开 在 VS Code Insiders 中打开 - 每个文件的本地历史记录条目限制(默认:50)
  • workbench.localHistory.exclude 在 VS Code 中打开 在 VS Code Insiders 中打开 - 用于将某些文件排除在本地历史记录之外的 Glob 模式
  • workbench.localHistory.mergeWindow 在 VS Code 中打开 在 VS Code Insiders 中打开 - 在此时间间隔(秒)内,后续更改将添加到本地文件历史记录中的最后一个条目中(默认 10秒)

提交历史记录

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

当您在历史记录中右键点击一个提交时,您可以

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

您可以配置此设置以处理 Git 历史记录

  • git.timeline.date 在 VS Code 中打开 在 VS Code Insiders 中打开 - 显示文件提交的提交日期或创作日期

视图

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

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

您可以使用视图:打开视图命令打开任何视图。

views

您可以通过右键点击活动栏来显示或隐藏视图,并使用拖放操作对其重新排序。在资源管理器视图中,您可以通过 '...' 菜单显示或隐藏部分,或者拖放部分对其重新排序。

命令面板

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

Command Palette

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

  • ⌘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) 使您能够导航到文件中的特定行

在输入框中输入 ?,即可获取可从命令面板运行的可用命令列表。

Quick Open Help

提示

您可以通过用鼠标光标抓住命令面板的上边缘并将其拖到其他地方来移动它。您还可以选择标题栏中的自定义布局控件,然后选择一个预配置的快速输入位置

Screenshot that shows the Command Palette in a different location, highlighting the Customize Layout control in the title bar and the preconfigured position options.

配置编辑器

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

隐藏菜单栏 (Windows, Linux)

您可以通过将 window.menuBarVisibility 在 VS Code 中打开 在 VS Code Insiders 中打开 设置从 classic 更改为 togglehidden,来隐藏 Windows 和 Linux 上的菜单栏。toggle 设置意味着按一次 Alt 键即可再次显示菜单栏。

您还可以使用视图:切换菜单栏命令在 Windows 和 Linux 上隐藏菜单栏。此命令将 window.menuBarVisibility 在 VS Code 中打开 在 VS Code Insiders 中打开 classic 设置为 compact,从而将菜单栏移动到活动栏中。要将菜单栏恢复到 classic 位置,您可以再次运行视图:切换菜单栏命令。

设置

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

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

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

workspace settings

注意

工作区设置会覆盖用户设置,非常适合在团队中共享项目特定的设置。

禅模式

禅模式让您可以隐藏除编辑器之外的所有 UI 元素,将 VS Code 切换到全屏模式并居中编辑器,从而专注于代码。禅模式可以通过视图 > 外观 > 禅模式菜单、命令面板中的视图:切换禅模式或使用快捷键 ⌘K Z (Windows, Linux Ctrl+K Z) 进行切换。连按两次 Esc 键即可退出禅模式。向全屏的过渡可以通过 zenMode.fullScreen 在 VS Code 中打开 在 VS Code Insiders 中打开 禁用。

禅模式可以通过以下设置进行进一步微调

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

使用“勿扰模式”减少通知

如果您被弹出的通知淹没,有一种方法可以减少通知,无论是针对所有通知,还是针对来自特定扩展的通知。

选择状态栏(如果通知位于右上角,则在标题栏中)中的铃铛图标以打开通知区域。这是一个您可以随时访问所有通知的地方,即使您已启用“勿扰模式”。您可以使用 workbench.notifications.position 在 VS Code 中打开 在 VS Code Insiders 中打开 设置更改通知位置。了解更多关于通知位置的信息。

Notifications center

找到带有删除线的铃铛图标,即可访问一个菜单,您可以在其中选择性地禁用来自扩展的通知,或者启用全局“勿扰模式”以禁用所有通知。

Notifications do not disturb menu

注意

全局“勿扰模式”还会隐藏错误通知,而特定于扩展的过滤器仍然允许显示错误通知。

居中编辑器布局

居中编辑器布局允许您使编辑器区域居中对齐。当在大显示器上使用单个编辑器时,这非常有用。您可以使用侧边框来调整视图大小(按住 Alt 键可以独立移动两侧)。

标签页

VS Code 在编辑器上方的标题区域显示带有标签页(选项卡标题)的打开项目。当您打开文件时,会为该文件添加一个新的标签页。标签页让您可以在项目之间快速导航。

tabs hero

您可以拖放标签页对其进行重新排序。要一次对多个标签页执行操作,请按住 Ctrl 键(macOS 为 Cmd 键)并选择您想要操作的标签页。要选择一系列标签页,请按住 Shift 键并选择该范围内的第一个和最后一个标签页。

当打开的项目多到无法在标题区域显示时,您可以使用资源管理器视图中的已打开的编辑器部分(通过 ... 按钮访问)来显示标签页项目的下拉列表。

标签页和编辑器区域之间还有一个滚动条,用于将编辑器拖入视野。您可以通过将 工作台 > 编辑器:标题滚动条大小 ( workbench.editor.titleScrollbarSizing 在 VS Code 中打开 在 VS Code Insiders 中打开 ) 设置为 large 来增加滚动条的高度,使其更易于拖动。使用 workbench.editor.titleScrollbarVisibility 在 VS Code 中打开 在 VS Code Insiders 中打开 设置来控制滚动条的可见性。

如果您不想使用标签页,可以通过将 workbench.editor.showTabs 在 VS Code 中打开 在 VS Code Insiders 中打开 设置为 single 来禁用该功能

    "workbench.editor.showTabs": "single"

请参阅以下部分以优化 VS Code 以不使用标签页的工作方式

提示

双击编辑器标题区域可快速创建新标签页。

标签页排序

默认情况下,新标签页会添加到现有标签页的右侧。您可以通过 workbench.editor.openPositioning 在 VS Code 中打开 在 VS Code Insiders 中打开 设置来控制新标签页的出现位置。

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

    "workbench.editor.openPositioning": "left"

您可以通过拖放操作重新排序标签页。

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

workbench.editor.showTabIndex 在 VS Code 中打开 在 VS Code Insiders 中打开 设置使您能够在标签页标题中显示每个标签页的索引。这使得可以轻松查看使用 Ctrl 键(macOS 为 Cmd 键)+ 数字键盘快捷键快速切换到特定标签页时需要使用的数字。

预览模式

当您单击或在资源管理器视图中选择文件时,它会在预览模式下显示并重用现有的标签页(预览标签页)。如果您正在快速浏览文件且不想让每个访问过的文件都拥有自己的标签页,这非常有用。当您开始编辑文件或使用双击从资源管理器中打开文件时,一个新的标签页将专用于该文件。

预览模式由标签页标题中的斜体表示

preview mode

如果您更喜欢不使用预览模式并始终创建新标签页,可以通过以下设置控制行为

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

换行标签页

要查看更多编辑器标签页,可以使用换行标签页布局,其中编辑器标签页会换行以填充编辑器区域上方的多行。通过 工作台 > 编辑器:换行标签页 ( workbench.editor.wrapTabs 在 VS Code 中打开 在 VS Code Insiders 中打开 ) 设置启用换行标签页。

Wrapped editor tabs filling two rows about the editor region

自定义标签页标签

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

要启用标签页的自定义显示标签,请设置 workbench.editor.customLabels.enabled 在 VS Code 中打开 在 VS Code Insiders 中打开 设置

    "workbench.editor.customLabels.enabled": true

您可以使用 workbench.editor.customLabels.patterns 在 VS Code 中打开 在 VS Code Insiders 中打开 设置指定一个或多个用于标签页显示标签的命名模式。命名模式包含两个部分

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

以下示例将 /src/orders/index.html 文件显示为标签页标签 orders/index

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

Screenshot of Setting editor to enable and specify custom labels for tabs

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

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

自定义标签页标签也适用于“已打开的编辑器”视图和 快速打开 (⌘P (Windows, Linux Ctrl+P))。

网格编辑器布局

默认情况下,编辑器组以垂直列布局。例如,当您拆分编辑器时,它会在侧边打开编辑器。您可以按任何您喜欢的布局(垂直和水平)排列编辑器组

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

Grid Empty

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

Grid Editor Layout Menu

默认情况下,在侧边打开的编辑器(例如,通过选择编辑器工具栏中的拆分编辑器操作)会打开在活动编辑器的右侧。如果您更喜欢在活动编辑器下方打开编辑器,请将 workbench.editor.openSideBySideDirection 在 VS Code 中打开 在 VS Code Insiders 中打开 设置为 down

有许多键盘命令可以使用键盘调整编辑器布局。如果您更喜欢使用鼠标,可以使用拖放操作向任何方向拆分编辑器

提示

如果您按住 Alt 键并将鼠标悬停在拆分编辑器的工具栏操作上,它会提供以另一种方向拆分的选项。这是快速向右或向下拆分的方法。

Grid Alt Click

键盘快捷键

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

  • ⌥⌘→ (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 在 VS Code 中打开 在 VS Code Insiders 中打开 设置为 singlenone 来完全禁用标签页。

禁用预览模式

在没有标签页的情况下,资源管理器视图中的“打开的编辑器” (Open Editors) 部分是进行文件导航的一种快捷方式。但是,如果启用了预览编辑器模式 (preview editor mode),文件将不会添加到“打开的编辑器”部分。你可以通过 workbench.editor.enablePreview 在 VS Code 中打开 在 VS Code Insiders 中打开 workbench.editor.enablePreviewFromQuickOpen 在 VS Code 中打开 在 VS Code Insiders 中打开 设置来禁用此功能。

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

你可以更改 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 在 VS Code 中打开 在 VS Code Insiders 中打开 window.openFilesInNewWindow 在 VS Code 中打开 在 VS Code Insiders 中打开 用于配置是打开新窗口还是重用上一个活动窗口来处理文件或文件夹,可选值为 defaultonoff

如果配置为 default,VS Code 会根据打开请求的来源上下文来决定是重用窗口还是打开新窗口。将其更改为 onoff 以始终保持相同的行为。例如,如果你希望通过“文件”菜单选择文件或文件夹时始终在在新窗口中打开,请将其设置为 on

注意

在某些情况下此设置会被忽略,例如当你使用 -new-window-reuse-window 命令行选项时。

设置 window.restoreWindows 在 VS Code 中打开 在 VS Code Insiders 中打开 用于告知 VS Code 如何恢复上一个会话中打开的窗口。默认情况下,VS Code 会恢复你在上一个会话中工作的所有窗口(设置:all)。将此设置更改为 none 则不会重新打开任何窗口,始终以空的 VS Code 实例启动。更改为 one 可重新打开你上次工作的窗口,或更改为 folders 仅恢复已打开文件夹的窗口。

后续步骤

既然你已经了解了 VS Code 的整体布局,可以通过查看以下文章开始根据你的工作偏好自定义编辑器:

  • 更改主题 - 设置你喜欢的颜色主题和/或文件图标主题。
  • 使用自定义布局 - 了解更多关于 VS Code 工作台和编辑器布局的自定义设置。

常见问题

如何更改缩进参考线的颜色?

和大多数 VS Code 用户界面元素一样,缩进参考线的颜色也是可以自定义的。若要为当前激活的颜色主题自定义缩进参考线颜色,请使用 workbench.colorCustomizations 在 VS Code 中打开 在 VS Code Insiders 中打开 设置并修改 editorIndentGuide.background 值。

例如,若要将缩进参考线设置为亮蓝色,请将以下内容添加到你的 settings.json 中:

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

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

可以,你可以通过资源管理器的“视图”菜单并切换“打开的编辑器” (Open Editors) 菜单项来显示或隐藏该部分。

Explorer menu to enable or disable views in the Explorer

© . This site is unofficial and not affiliated with Microsoft.