Visual Studio Code 用户界面(User Interface)完全指南:六大区域布局、编辑器分组与工作台定制

原创2026-10-10 02:53:571,135 阅读
文章标签:文档教程

Visual Studio Code 用户界面(User Interface)完全指南:六大区域布局、编辑器分组与工作台定制

本指南以 Visual Studio Code(VS Code)官方用户界面文档为骨架,系统讲解工作台(Workbench)的六大核心区域、编辑器分组与并排编辑、标签页(Tabs)体系、Explorer 视图、迷你地图(Minimap)、Sticky Scroll、面包屑(Breadcrumbs)、命令面板(Command Palette)以及 Zen Mode、窗口管理等定制能力。读完本文,你将能够熟练驾驭 VS Code 的默认布局,并通过设置项与键盘快捷键把工作台调整成最适合自己工作流的样子。

基本布局:工作台的六大区域

VS Code 本质是一个代码编辑器,与其他主流编辑器一样,它采用"左侧资源管理器 + 右侧编辑器"的通用布局:左侧的 Explorer 展示你所能访问的全部文件与文件夹,右侧的编辑器区域展示你打开的文件内容。在此基础上,用户界面被划分为六个主要区域:

区域 位置与作用
编辑器(Editor) 编辑文件的主要区域,可以横向、纵向并排打开任意数量的编辑器
主侧边栏(Primary Side Bar) 包含 Explorer 等视图,辅助你完成项目操作
次侧边栏(Secondary Side Bar) 位于主侧边栏对侧,默认承载 Copilot Chat 视图;可将主侧边栏中的视图拖拽到次侧边栏
状态栏(Status Bar) 展示打开项目与当前编辑文件的相关信息
活动栏(Activity Bar) 位于最左侧,用于切换视图,并提供上下文相关指示(如启用 Git 时显示待推送更改数);右键可打开上下文菜单调整位置
面板(Panel) 位于编辑器区域下方的附加空间,默认包含输出、调试信息、错误与警告以及集成终端;也可移动到左侧或右侧以腾出更多纵向空间

VS Code 用户界面六大主要区域示意图

每次启动 VS Code,它都会恢复到上次关闭时的状态:文件夹、布局和打开的文件都会被保留。各编辑器中打开的文件以标签页(Tabs)形式显示在编辑器区域顶部,详见后文 标签页 一节。

提示:右键单击活动栏并选择 Move Primary Side Bar Right,即可把主侧边栏移到右侧;也可使用 kbstyle(workbench.action.toggleSidebarVisibility) 快捷键切换其可见性。关于主/次侧边栏的更多细节,参见仓库中的 自定义布局指南。

并排编辑(Side by Side Editing)

你可以横向或纵向并排打开任意数量的编辑器。在已有一个编辑器打开时,有多种方式在旁边打开第二个编辑器:

  • 按住 Alt 键并在 Explorer 视图中单击文件;
  • 使用 kbstyle(workbench.action.splitEditor) 将当前编辑器一分为二;
  • 在 Explorer 右键菜单中选择 Open to the Side(kbstyle(explorer.openToSide));
  • 单击编辑器右上角的 Split Editor(拆分编辑器)按钮;
  • 把文件拖拽到编辑器区域的任意一侧;按住 Ctrl(macOS 为 Option)拖拽则复制标签而不是移动;
  • 在 Quick Open(kbstyle(workbench.action.quickOpen))文件列表中按 kbstyle(explorer.openToSide)。

并排编辑效果

当打开另一个文件时,内容会显示在当前处于激活状态的编辑器中。如果两个编辑器并排,想把 foo.cs 打开到右侧编辑器,请先单击右侧编辑器使其激活,再打开该文件。

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

拥有多个编辑器时,按住 Ctrl(macOS 为 Cmd)并按 1、2、3 可快速切换。

提示:编辑器支持调整大小与重排,直接拖拽编辑器标题区即可重新定位或调整大小。

编辑器组(Editor Groups)

使用 Split Editor 或 Open to the Side 拆分编辑器时,会创建一个新的编辑器区域(编辑器组),该组可容纳多个项目。你可以纵向、横向并排打开任意数量的编辑器组。

在 Explorer 视图顶部的 Open Editors 区域(通过 Explorer 的 ... 菜单开启)可以清楚地看到这些编辑器组:

标签页与编辑器组

你可以在工作台上拖放编辑器组、在组间移动单个标签、或快速关闭整个组(Close All)。

注意:无论是否启用标签页,VS Code 都会使用编辑器组。禁用标签页时,编辑器组表现为一组堆叠的打开项,编辑器窗格只显示最近选中的一项。

组内拆分(Split in Group)

使用 View: Split Editor in Group 命令(kbstyle(workbench.action.splitEditorInGroup))可以在不创建新编辑器组的情况下拆分当前编辑器。关于该编辑器模式及两侧导航的专用命令,参见仓库中的 自定义布局-组内拆分 一节。

浮动窗口(Floating Windows)

编辑器、终端或特定视图可以移入独立的浮动窗口,适合多显示器场景下把某个文件单独放到另一块屏幕上显示。

浮动窗口示意

把编辑器标签拖出当前窗口即可打开为浮动窗口;也可以在编辑器标签的右键菜单中选择 Move into New Window 或 Copy into New Window。浮动窗口标题栏上的 Set Always on Top(置顶,图钉图标)选项可将其固定到屏幕最上层。更多细节参见仓库中的 自定义布局-浮动窗口 一节。

模态编辑器(Modal Editors)

某些配置型编辑器会以居中模态浮层的形式覆盖在编辑器区域上方,而不是作为普通标签页打开,包括:

  • Settings(设置) 编辑器
  • Keyboard Shortcuts(键盘快捷键) 编辑器
  • Profiles(配置文件) 编辑器
  • Workspace Trust(工作区信任) 编辑器
  • Language Models(语言模型) 编辑器
  • Extensions(扩展) 编辑器

单击浮层外部、按 Escape 或选择关闭按钮即可关闭模态编辑器;也可以将其最大化填满编辑器区域,或移回主窗口作为普通标签页。

注意:workbench.editor.useModal 设置控制该行为:off 表示始终以普通标签页打开;some 表示仅配置型编辑器以模态浮层打开(默认值);all 表示所有编辑器都以模态浮层打开。

迷你地图(Minimap)

迷你地图(代码大纲)提供源码的高层概览,便于快速导航与理解代码。文件迷你地图显示在编辑器右侧,可以单击或拖拽其中的阴影区域快速跳转到文件的不同位置。

迷你地图

如果编辑器中存在 折叠标记(如 //#region 注释),迷你地图会显示折叠标记名称。折叠标记与语言相关,请确认你的语言支持哪些标记。

提示:在用户或工作区 设置 中设置 "editor.minimap.side": "left" 可将迷你地图移到左侧,设置 "editor.minimap.enabled": false 可完全禁用。

Sticky Scroll(粘性滚动)

Sticky Scroll 会在编辑器顶部固定显示当前可见嵌套作用域的起始行,帮助你随时了解自己在文件中的位置,并快速跳回当前作用域顶部。

Sticky Scroll

提示:可用 editor.stickyScroll.enabled 设置启用或禁用 Sticky Scroll。

Sticky Scroll 使用多种内容模型来生成标题,可在大纲提供者模型(outline provider)、**折叠提供者模型(folding provider)与缩进模型(indentation)**之间选择,以决定 Sticky Scroll 区域显示哪些行。若当前语言不提供某模型,VS Code 会按上述顺序回退到下一个模型。初始使用的默认模型由 editor.stickyScroll.defaultModel 设置决定。

缩进参考线(Indent Guides)

编辑器会显示缩进参考线(垂直线),帮助快速对齐匹配的缩进层级。如需禁用,可在用户或工作区 设置 中将 editor.guides.indentation 设为 false。

面包屑导航(Breadcrumbs)

编辑器顶部有一条导航栏,即面包屑。面包屑始终显示文件路径;如果当前文件类型具备语言符号支持,还会显示光标位置所在的符号路径。借助面包屑可以在文件夹、文件与符号之间快速导航。

面包屑导航

可通过 View > Appearance > Toggle Breadcrumbs 菜单项或 View: Toggle Breadcrumbs 命令禁用面包屑。关于外观定制(如 breadcrumbs.filePath、breadcrumbs.symbolPath、breadcrumbs.symbolSortOrder 等)的更多说明,参见仓库中 代码导航文章的面包屑章节。

Explorer 视图

Explorer 视图用于浏览、打开和管理项目中的文件与文件夹。VS Code 以文件和文件夹为基本单元,打开文件或文件夹即可立即开始工作。打开文件夹后,其内容会显示在 Explorer 视图中,你可以在此执行:

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

提示:可从 VS Code 外部把文件拖入 Explorer 视图进行复制;若 Explorer 为空则会改为打开这些文件。也可以从外部复制粘贴文件到 Explorer。explorer.autoOpenDroppedFile 设置控制拖入后是否自动打开该文件。

VS Code 与命令行工具配合良好。若想在当前打开的文件夹上下文中运行命令行工具,右键该文件夹并选择 Open in Integrated Terminal。如需在操作系统原生文件管理器中定位文件,右键选择 Reveal in File Explorer(Windows)、Reveal in Finder(macOS)或 Open Containing Folder(Linux)。

提示:按 kbstyle(workbench.action.quickOpen)(Quick Open)可以快速按名称搜索并打开文件。

默认情况下,VS Code 会在 Explorer 中排除部分文件夹(如 .git)。可用 files.exclude 设置配置隐藏规则,其 glob 模式遵循操作系统的大小写规则(Windows/macOS 不区分大小写,Linux 区分大小写),详见仓库中的 glob 模式文档。

还可通过启用 explorer.excludeGitIgnore 设置,让 .gitignore 中列出的文件与文件夹一并隐藏。启用后,.gitignore 模式在 Windows/macOS 上不区分大小写匹配,Linux 上区分大小写。例如 .gitignore 中的 node_modules 在 Windows/macOS 上会匹配 node_modules/、Node_Modules/、NODE_MODULES/ 等各种大小写变体,在 Linux 上则只精确匹配。

启用 imageCarousel.explorerContextMenu.enabled(实验性)后,可在 Explorer 中右键图片/视频文件或文件夹并选择 Open Images in Carousel,以轮播视图浏览媒体文件,也支持多选。

提示:可以隐藏派生资源文件,例如 Unity 的 *.meta 或 TypeScript 项目生成的 *.js。排除 Unity 的 *.cs.meta 可配置 "**/*.cs.meta": true;排除 TypeScript 编译生成的 JS 可配置 "**/*.js": {"when": "$(basename).ts"}。

多选(Multi-selection)

在 Explorer 视图和 Open Editors 区域可以多选文件,对多个项目批量执行操作(删除、拖放、打开到侧边)。按住 Ctrl(macOS 为 Cmd)逐个选择,或按住 Shift 选择连续范围。选中两项后,还可使用右键菜单的 Compare Selected 命令快速对比两个文件的差异。

注意:早期版本中,按住 Ctrl(macOS 为 Cmd)单击文件会在侧边新建编辑器组打开。若希望恢复该行为,可通过 workbench.list.multiSelectModifier 设置改用 Alt 键进行多选:

"workbench.list.multiSelectModifier": "alt"

高级树导航(Advanced Tree Navigation)

可以过滤 Explorer 视图中的文件与文件夹。聚焦 Explorer 视图后,按 kbstyle(list.find) 打开查找控件并输入要匹配的文件/文件夹名称片段。该导航功能适用于 VS Code 中所有树视图。

Filter 按钮在两种模式间切换:高亮与过滤。按 Down 可聚焦第一个匹配元素并逐个导航后续匹配项;高亮模式下,文件夹会显示徽标以提示其包含匹配文件。Fuzzy Match 按钮则在精确匹配与模糊匹配之间切换,模糊匹配下输入一串字符即可匹配文件名/文件夹名的任意部分。

在文件资源管理器中过滤文件

大纲视图(Outline View)

大纲视图是 Explorer 视图底部的独立区域,展开后显示当前激活编辑器的符号树。

大纲视图

大纲视图提供不同的 Sort By 排序模式、可选的游标跟踪、常规打开手势,以及用于查找/过滤的输入框。错误与警告也会显示在大纲视图中,让你一眼看到问题所在位置。

符号信息由已安装的扩展针对不同文件类型计算。例如,内置 Markdown 支持会返回 Markdown 文件的标题层级作为符号。

Markdown 文件的大纲视图

可通过 设置 配置大纲视图,搜索以 outline. 开头的设置项即可调整其显示内容。

时间线视图(Timeline View)

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

时间线视图

时间线工具栏中的过滤操作可在源控制事件与本地文件事件之间切换:

时间线过滤下拉菜单,Git History 未勾选,Local History 已勾选

本地文件历史(Local File History)

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

  • 与本地文件或上一个条目对比更改;
  • 恢复内容;
  • 删除或重命名该条目。

提示:如果不慎删除了文件,可在时间线视图中使用 ... > Local History: Find Entry to Restore 操作,再从 Quick Pick 中选择文件进行恢复。

本地历史的相关设置:

  • workbench.localHistory.enabled:启用或禁用本地历史(默认 true)
  • workbench.localHistory.maxFileSize:创建本地历史条目的文件大小上限(默认 256 KB)
  • workbench.localHistory.maxFileEntries:每个文件的本地历史条目上限(默认 50)
  • workbench.localHistory.exclude:将某些文件排除在本地历史之外的 glob 模式
  • workbench.localHistory.mergeWindow:后续更改并入上一条本地历史记录的间隔秒数(默认 10 秒)

提交历史(Commit History)

VS Code 内置的 Git 支持提供指定文件的 Git 提交历史。选择某个提交会打开该提交引入更改的差异视图;右键单击提交可获得 Copy Commit ID 和 Copy Commit Message 选项。右键历史中的提交时,还可:

  • Open Changes:打开文件更改的差异视图;
  • View Commit:打开多文件差异视图,查看提交中所有文件的更改;
  • Select for Compare:选择条目与另一条目对比;
  • Copy Commit ID:复制提交 ID 到剪贴板;
  • Copy Commit Message:复制提交消息到剪贴板。

Git 历史相关设置:

  • git.timeline.date:显示文件提交的提交日期(committed date)或作者日期(authored date)

视图(Views)

Explorer 只是 VS Code 提供的视图之一,此外还有:

  • Search(搜索):在打开的文件夹内进行全局搜索与替换;
  • Source Control(源代码管理):VS Code 默认内置 Git 源代码管理;
  • Run(运行):运行与调试视图,显示变量、调用栈和断点;
  • Extensions(扩展):在 VS Code 内安装和管理扩展;
  • 自定义视图:由扩展贡献的视图。

提示:可使用 View: Open View 命令打开任意视图。

各类视图

右键活动栏可以显示或隐藏视图,通过拖放可调整视图顺序。在 Explorer 视图内部,可通过 ... 菜单显示/隐藏分区,或拖放分区进行重排。

命令面板(Command Palette)

VS Code 同样强调键盘可达性。最重要的快捷键是 kbstyle(workbench.action.showCommands),它呼出命令面板。在这里可以访问 VS Code 的全部功能,包括最常见操作的键盘快捷键。

命令面板

命令面板提供大量命令:可以运行编辑器命令、打开文件、搜索符号、查看文件快速大纲,全部在同一交互窗口中完成。几个实用技巧:

  • kbstyle(workbench.action.quickOpen):输入名称即可跳转到任意文件或符号;
  • kbstyle(workbench.action.quickOpenPreviousRecentlyUsedEditorInGroup):在最近打开的文件集之间循环切换;
  • kbstyle(workbench.action.showCommands):直接进入编辑器命令列表;
  • kbstyle(workbench.action.gotoSymbol):跳转到文件中的特定符号;
  • kbstyle(workbench.action.gotoLine):跳转到文件中的特定行。

在输入框中输入 ? 可查看可从命令面板运行的全部命令列表。

Quick Open 帮助

提示:可用鼠标抓住命令面板顶部边缘将其拖到其他位置;也可在标题栏选择 Customize Layout 控件,再选择某个预置的 Quick Input Positions。

命令面板位于其他位置,高亮显示标题栏 Customize Layout 控件与预置位置选项

配置编辑器

VS Code 提供大量编辑器配置选项。通过 View > Appearance 菜单,可以隐藏或切换界面各部分,如 Side Bar、Status Bar 和 Activity Bar。

隐藏菜单栏(Windows、Linux)

在 Windows 和 Linux 上,可将 window.menuBarVisibility 从 classic 改为 toggle 或 hidden 来隐藏菜单栏。toggle 模式下按一次 Alt 键即可重新显示菜单栏。

也可以使用 View: Toggle Menu Bar 命令隐藏菜单栏:该命令将 window.menuBarVisibility 从 classic 切换为 compact,菜单栏会并入活动栏。再次运行 View: Toggle Menu Bar 可恢复 classic 位置。

设置(Settings)

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

在设置编辑器中查看与编辑设置(File > Preferences > Settings,或按 kbstyle(workbench.action.openSettings)),用 User 与 Workspace 选项卡切换用户/工作区设置,顶部搜索框可过滤设置项。

也可以直接编辑 settings.json:使用 Preferences: Open User Settings (JSON) 命令打开用户 settings.json;工作区设置则编辑工作区 .vscode 文件夹中的 settings.json。

工作区设置

注意:工作区设置会覆盖用户设置,适合在团队间共享项目特定配置。

Zen Mode(禅模式)

Zen Mode 通过隐藏除编辑器外的所有 UI 元素、切换到全屏并居中编辑器,让你专注于代码。可通过 View > Appearance > Zen Mode 菜单、命令面板中的 View: Toggle Zen Mode 或快捷键 kbstyle(workbench.action.toggleZenMode) 切换。连按两次 Esc 退出 Zen Mode。可通过 zenMode.fullScreen 设置禁用全屏过渡。

Zen Mode 相关设置:

  • zenMode.hideActivityBar:隐藏活动栏。默认 true
  • zenMode.hideStatusBar:隐藏状态栏。默认 true
  • zenMode.hideLineNumbers:隐藏行号。默认 true
  • zenMode.showTabs:控制显示多个、单个还是不显示编辑器标签。默认 multiple
  • zenMode.fullScreen:全屏显示工作台。默认 true
  • zenMode.restore:重启时恢复 Zen Mode。默认 true
  • zenMode.centerLayout:使用 居中编辑器布局。默认 true
  • zenMode.silentNotifications:不显示通知。默认 true

用勿扰模式(Do Not Disturb Mode)减少通知

如果被不断弹出的通知打扰,可以降低通知数量——无论是全部通知,还是来自特定扩展的通知。

单击状态栏中的铃铛图标(若通知定位在右上角,则位于标题栏)打开通知区域。这里可以随时访问所有通知,即使启用了勿扰模式。通知位置可通过 workbench.notifications.position 设置调整,更多参见仓库中的 自定义布局-通知位置。

通知中心

找到带斜线的铃铛图标可打开菜单,选择性禁用来自扩展的通知,或启用全局勿扰模式以禁用所有通知。

通知勿扰菜单

注意:全局勿扰模式也会隐藏错误通知;而针对扩展的过滤仍会显示错误通知。

居中编辑器布局(Centered Editor Layout)

居中编辑器布局将编辑器区域居中显示,适合在大显示器上使用单个编辑器。可通过两侧边框调整视图宽度(按住 Alt 键可独立移动两侧)。

标签页(Tabs)

VS Code 用标签页(标签式标题)在编辑器上方区域展示打开项。打开文件时,会为该文件新增一个标签页,方便你在各项目之间快速切换。

标签页总览

可拖放标签进行重排。要对多个标签批量操作,按住 Ctrl(macOS 为 Cmd)选择目标标签;按住 Shift 可选中连续范围内的标签。

当打开项超过标题区可容纳的数量时,可通过 Explorer 视图中的 Open Editors 区域(通过 ... 按钮访问)显示标签项下拉列表。

标签区与编辑器区之间还有一条滚动条,用于把编辑器拖入视野。设置 Workbench > Editor: Title Scrollbar Sizing(workbench.editor.titleScrollbarSizing)为 large 可加高滚动条便于拖拽;workbench.editor.titleScrollbarVisibility 设置控制滚动条可见性。

如果不想使用标签页,可将 workbench.editor.showTabs 设为 single 禁用该功能:

"workbench.editor.showTabs": "single"

相关优化参见下文 无标签页工作 一节。

提示:双击编辑器标题区可快速新建标签页。

标签排序(Tab Ordering)

默认情况下,新标签页添加到现有标签的右侧。可通过 workbench.editor.openPositioning 设置控制新标签的出现位置。例如,让新标签出现在左侧:

"workbench.editor.openPositioning": "left"

标签可通过拖放重排。若希望某个编辑器标签始终可见,可将其固定(pin)到标签栏,参见仓库中的 自定义布局-固定标签。

workbench.editor.showTabIndex 设置可在标签标题中显示每个标签的序号,方便与 Ctrl(macOS 为 Cmd)+ 数字快捷键配合快速切换到指定标签。

预览模式(Preview Mode)

在 Explorer 视图中单击文件时,文件以预览模式打开并复用现有标签(预览标签)。这适合快速浏览文件,避免每个访问过的文件都独占一个标签。当你开始编辑该文件,或在 Explorer 中双击打开文件时,才会为该文件单独创建标签。

预览模式在标签标题中以斜体显示:

预览模式标签以斜体显示

如果不想使用预览模式、始终创建新标签,可用以下设置控制:

  • workbench.editor.enablePreview:全局启用或禁用预览编辑器;
  • workbench.editor.enablePreviewFromQuickOpen:启用或禁用从 Quick Open 打开时的预览编辑器。

换行标签(Wrapped Tabs)

为了显示更多编辑器标签,可使用换行标签布局,让标签在编辑器区域上方换行填充多行。通过 Workbench > Editor: Wrap Tabs(workbench.editor.wrapTabs)设置启用:

换行标签在编辑器区域上方填满两行

自定义标签标签名(Customize Tab Labels)

当多个同名文件同时打开时,标签难以区分。为此可以给标签应用自定义显示标签,并可选择工作区中哪些文件应用。

启用 workbench.editor.customLabels.enabled 设置:

"workbench.editor.customLabels.enabled": true

再通过 workbench.editor.customLabels.patterns 设置指定一个或多个命名模式。命名模式由两部分组成:

  • Item:一个 glob 模式,匹配要应用自定义标签的文件路径。例如 **/static/**/*.html。
  • Value:自定义标签的模板,可使用 ${filename}、${extname}、${extname(N)}、${dirname}、${dirname(N)} 等变量,它们会被文件路径中的实际值动态替换。

下面的示例把 /src/orders/index.html 显示为 orders/index:

"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

注意:自定义标签同样作用于 Open Editors 视图和 Quick Open(kbstyle(workbench.action.quickOpen))。

网格编辑器布局(Grid Editor Layout)

默认情况下编辑器组以垂直列布局。例如拆分编辑器时,新编辑器打开在侧边。你可以把编辑器组排成任意布局,纵向横向均可。

为支持灵活布局,你可以创建空的编辑器组。默认关闭编辑器组最后一个编辑器时,该组也会随之关闭,但可通过 workbench.editor.closeEmptyGroups: false 改变此行为。

空编辑器组

View > Editor Layout 菜单提供一组预定义的编辑器布局:

网格编辑器布局菜单

默认情况下,侧边打开的编辑器(如通过编辑器工具栏 Split Editor 操作)打开在活动编辑器右侧。若希望打开在下方,可将 workbench.editor.openSideBySideDirection 设为 down。

提示:按住 Alt 键悬停在拆分编辑器的工具栏操作上时,会提供另一种方向的拆分。这是快速拆分到右侧或底部的捷径。

键盘快捷键

以下快捷键便于在编辑器与编辑器组之间快速导航:

  • kbstyle(workbench.action.nextEditor):转到右侧编辑器
  • kbstyle(workbench.action.previousEditor):转到左侧编辑器
  • kbstyle(workbench.action.quickOpenPreviousRecentlyUsedEditorInGroup):打开编辑器组最近使用列表中的上一个编辑器
  • kbstyle(workbench.action.focusFirstEditorGroup):转到最左侧编辑器组
  • kbstyle(workbench.action.focusSecondEditorGroup):转到中间编辑器组
  • kbstyle(workbench.action.focusThirdEditorGroup):转到最右侧编辑器组
  • kbstyle(workbench.action.closeActiveEditor):关闭活动编辑器
  • kbstyle(workbench.action.closeEditorsInGroup):关闭编辑器组中的所有编辑器
  • kbstyle(workbench.action.closeAllEditors):关闭所有编辑器

如需修改默认键盘快捷键,参见仓库中的 键绑定(Key Bindings) 一文。

无标签页工作(Working Without Tabs)

如果不想使用标签页(标签式标题),可将 workbench.editor.showTabs 设为 single 或 none 完全禁用。

禁用预览模式

无标签页时,Explorer 视图的 Open Editors 区域是快速进行文件导航的方式。但启用 预览编辑器模式 时,文件不会加入 Open Editors 区域。可通过 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" }

窗口管理(Window Management)

VS Code 提供多种选项,控制窗口(实例)如何在会话之间打开或恢复。

window.openFoldersInNewWindow 与 window.openFilesInNewWindow 设置用于配置为文件或文件夹打开新窗口或复用最后一个活动窗口,可选值为 default、on 和 off。

配置为 default 时,VS Code 会根据打开请求的上下文决定复用还是打开新窗口。设为 on 或 off 则始终如一地执行该行为。例如,若希望从 File 菜单选择文件或文件夹时总是打开新窗口,可设为 on。

注意:某些情况下该设置会被忽略,例如使用 -new-window 或 -reuse-window 命令行选项时。

window.restoreWindows 设置告知 VS Code 如何恢复上一会话打开的窗口。默认(all)恢复上一会话中处理过的所有窗口;设为 none 则永不重新打开窗口,始终以空实例启动;设为 one 只恢复最后处理的窗口;设为 folders 只恢复打开过文件夹的窗口。

常见问题(Common Questions)

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

缩进参考线颜色可以自定义,就像大多数 VS Code 用户界面元素一样。要在当前颜色主题下自定义缩进参考线颜色,可参考 主题色参考,使用 workbench.colorCustomizations 设置并修改 editorIndentGuide.background 值。

例如,将缩进参考线改为亮蓝色,可在 settings.json 中添加:

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

能否隐藏 Explorer 视图中的 Open Editors 区域?

可以。在 Explorer 的 Views 菜单中切换 Open Editors 菜单项即可显示或隐藏该区域。

Explorer 菜单以启用或禁用 Explorer 中的视图

下一步

现在你已经了解了 VS Code 的整体布局,可以开始按自己的工作习惯定制编辑器:

  • 更改主题:按偏好设置颜色主题和/或文件图标主题;
  • 使用自定义布局:深入了解 VS Code 工作台与编辑器布局的更多定制能力。
登录后查看全文
vscode-docs