概述

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

基本布局

VS Code提供了一个简单直观的布局，最大限度地利用了编辑器提供的空间，同时为浏览和访问文件夹或项目的完整上下文留下了足够的空间。UI分为五块：

• Editor（编辑器）：编辑文件的主要区域。您可以在垂直和水平方向上并排打开任意多个编辑器。
• Side Bar（边栏）：包含不同的视图，如资源管理器，以协助您的项目工作。
• Status Bar（状态栏）：有关打开的项目和您编辑的文件的信息。
• Activity Bar（活动栏）：它位于最左侧，允许您在视图之间切换，并为您提供额外特定的上下文指示，比如启用Git时输出变化的数量。
• Panels（面板）：您可以在编辑器区域下方显示不同的面板，以显示输出或调试信息、错误和警告或集成终端。面板也可以向右移动以获得更多的垂直空间。

每次你启动VS Code时，它都会以上次关闭它时的状态打开。文件夹、布局和打开的文件都被保留。每个编辑器中的打开的文件都显示在编辑器区域顶部的带选项卡标题(选项卡)中。

提示：您可以将侧边栏移动到右边(View > Appearance > Move Side Bar Right)或切换其可见性(Ctrl+B)。

并排编辑

您可以在垂直和水平方向上并排打开任意多个编辑器。如果你已经打开了一个编辑器，有多种方法可以打开另一个编辑器到现有编辑器的旁边：

• 按住Alt键，然后单击资源管理器中的文件。
• Ctrl+\将活动编辑器一分为二。
• 通过资源管理器中，选中文件右键，选择菜单Open to the Side (Ctrl+Enter)
• 单击编辑器右上角的Split Editor按钮（Ctrl+\）。
• 将文件拖放到编辑器区域的任何一侧。
• 在Quick Open(Ctrl+P)文件列表中，通过上下键选择文件然后Ctrl+Enter (macOS: Cmd+Enter)或者通过鼠标在选择的文件后面点击Open to the Side。

每当您打开另一个文件时，处于活动状态的编辑器将显示该文件的内容。因此，如果您有两个并排的编辑器，并且想要将文件“ foo.cs”打开到右侧编辑器中，请在打开文件“ foo.cs”之前，确保该编辑器处于活动状态（通过在其中单击）。

默认情况下，新打开编辑器将活动编辑器的右侧。您可以通过设置workbench.editor.openSideBySideDirection更改此行为。并将其配置为在活动编辑器的底部打开新的编辑器。

当您打开多个编辑器时，您可以通过按住Ctrl (macOS: Cmd)键并按1、2或3快速切换它们。

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

迷你地图

一个迷你地图(代码大纲)给你源代码的一个高级概述，这对于快速导航和理解代码是很有用的。文件的迷你地图显示在编辑器的右侧。您可以单击或拖动阴影区域，以快速跳转到文件的不同部分。

提示：你可以将迷你地图移动到左边或完全禁用它，可以通过在你的用户或工作空间设置中分别设置"editor.minimap.side": "left"或"editor.minimap.enabled": false。

• 缩进指南

上面的图像还显示了缩进参考线(竖线)，帮助您快速查看匹配的缩进级别。如果您想禁用缩进参考线，您可以在您的用户或工作区设置中设置"editor.renderIndentGuides": false。

面包屑

编辑器的内容上方有一个名为面包屑的导航栏。它显示当前位置，并允许您在文件夹、文件和符号之间快速导航。

面包屑路径总是显示文件路径，如果当前文件类型对符号有语言支持，则符号路径一直到光标位置。你可以用View > Show Breadcrumbs切换命令禁用面包屑。

资源管理器

资源管理器用于浏览、打开和管理项目中的所有文件和文件夹。VS Code是基于文件和文件夹的：你可以通过在VS Code中打开一个文件或文件夹立即开始。

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

• 创建、删除和重命名文件和文件夹。
• 用拖放移动文件和文件夹。
• 通过右键菜单来查看所有选项。

提示：你可以将文件从vscode外部拖放到资源管理器中复制它们(如果资源管理器为空，VS Code将打开它们)。

VS Code可以很好地与您可能使用的其他工具配合使用，尤其是命令行工具。如果你想在VS Code中打开的文件夹的上下文中运行命令行工具，右键单击该文件夹并在命令提示符中选择Open in Integrated Terminal(或者在macOS或Linux的终端中选择Open in Terminal)。

您还可以通过右键单击文件或文件夹，并选择在Reveal in Explorer(或在macOS上的Reveal in Finder或在Linux上的Open Containing Folder)，导航到本地资源管理器中的文件或文件夹的位置。

提示：键入Ctrl+P(Quick Open)可以快速搜索并根据文件名打开文件。

默认情况下，VS Code会从资源管理器中排除一些文件夹(例如：.git)。使用files.exclude设置来配置从资源管理器隐藏文件和文件夹的规则。

提示：这对于隐藏派生资源文件非常有用，比如在Unity中的\*.meta或在TypeScript项目中的\*.js。对于Unity来说排除了\*.cs.meta文件，模式选择为:"**/*.cs.meta": true。对于TypeScript，你可以用"**/*.js": {"when": "$(basename).ts"}来排除为TypeScript文件生成的JavaScript。

多选

您可以在File Explorer 和OPEN EDITORS视图中选择多个文件，以对多个项目运行操作(删除、拖放、打开到侧面)。使用Ctrl/Cmd键点击选择单独的文件和Shift+点击选择的范围。如果您选择了两个项目，您现在可以使用邮件菜单Compare Selected命令来快速地比较两个文件。

注意：在早期的VS Code版本中，按下Ctrl/Cmd键将打开旁边的新编辑器组中的文件。如果您仍然喜欢这种行为，您可以使用workbench.list.multiSelectModifier设置将多选更改为使用Alt键。

"workbench.list.multiSelectModifier": "alt"

过滤文档树

您可以在文件资源管理器中输入要过滤当前可见的文件。将焦点放在文件资源管理器上后，开始输入想要匹配的部分文件名。您将在文件资源管理器的右上角看到一个筛选框，其中显示到目前为止您所输入的内容，并将突出显示匹配的文件名。当您按下光标键来上下移动文件列表时，它将在匹配的文件或文件夹之间跳转。

将鼠标悬停在“过滤器”框上，并选择Enable Filter on Type，将只显示匹配的文件/文件夹。使用“X”清除按钮来清除过滤器。

大纲视图

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

大纲视图具有不同的“排序依据”模式，可选的光标跟踪，并支持通常的打开手势。它还包括一个输入框，可以在输入时查找或过滤符号。错误和警告也显示在大纲视图中，让您可以粗略地看到问题的位置。

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

有几个大纲视图设置，允许你启用/禁用图标和控制错误和警告显示(所有默认启用)：

• outline.icons：切换显示大纲元素的图标。
• outline.problems.enabled：显示大纲元素上的错误和警告
• outline.problems.badges：切换对错误和警告使用徽章。
• outline.problems.colors：切换对错误和警告添加颜色。

打开的编辑器

在资源管理器的顶部是一个标签为OPEN EDITORS的视图。这是活动文件或预览的列表。你正在工作使用的这些文件是你之前在VS Code中打开的。例如，如果以下情况，文件将在OPEN EDITORS视图中列出：

• 对文件进行更改。
• 双击文件的标题。
• 在资源管理器中双击一个文件。
• 打开一个不属于当前文件夹的文件。

只要点击打开的编辑器视图中的一个项目，它就会在VS Code中激活。完成任务后，您可以从OPEN EDITORS视图中逐个删除文件，或者使用视图:Close All Editors或View:Close All Editors in Group来删除所有文件。

视图

文件资源管理器只是VS Code中可用的视图之一。也有以下视图：

• Search （搜索）：在打开的文件夹中进行全局搜索和替换。
• Source Control（源代码管理）:VS Code默认包含Git源代码控制。
• Run（运行）：VS Code的运行和调试视图显示变量、调用堆栈和断点。
• Extensions（扩展）：在VS Code中安装和管理你的扩展。
• Custom views（自定义视图）：由扩展提供的视图。

提示：您可以使用view > open view命令打开任何视图。

您可以在主视图中显示或隐藏视图，也可以通过拖放对它们进行重新排序。

• 活动栏

左边的活动栏可以让你在视图之间快速切换。你也可以通过在活动栏上拖放视图或完全删除视图来重新排序视图(右击“Hide from Activity Bar”)。

命令面板

VS Code同样可以通过键盘访问。要知道的最重要的组合键是Ctrl+Shift+P，它会调出命令面板。从这里，您可以访问VS Code的所有功能，包括最常见操作的键盘快捷键。

命令面板提供了对许多命令的访问。您可以使用相同的交互式窗口执行编辑器命令、打开文件、搜索符号和查看文件的快速轮廓。以下是一些建议：

• Ctrl+P：可以让你通过输入文件名导航到任何文件或符号。
• Ctrl+Tab：将循环浏览最后打开的一组文件。
• Ctrl+Shift+P：将直接将您带到编辑器命令。
• Ctrl+Shift+O：可以让你导航到文件中的特定符号。
• Ctrl+G：将让您导航到文件中的特定行。

类型?输入字段，以获得可用命令的列表，您可以从这里执行：

配置编辑器

VS Code提供了许多选项来配置编辑器。在View菜单中，可以隐藏或切换用户界面的各个部分，如侧边栏、状态栏和活动栏。

• 隐藏菜单栏(Windows, Linux)

您可以隐藏菜单栏在Windows和Linux与View > Appearance > Toggle Menu Bar命令。您仍然可以通过按Alt键(window.menuBarVisibility setting)访问菜单栏。

• 设置

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

• 选择File > Preferences > Settings(或按Ctrl+,)来编辑用户settings.json文件。
• 要编辑工作空间设置，请选择WORKSPACE SETTINGS选项卡来编辑工作空间settings.json文件。

macOS用户请注意： Preferences菜单在Code下，不是在File下。例如：Code > Preferences > Settings。

你会在左边的窗口中看到VS Code的默认设置，右边是你的可编辑settings.json。您可以使用顶部的搜索框轻松地过滤Default Settings中的设置。通过单击设置左边的编辑图标，将设置复制到右边的可编辑settings.json上。带有一组固定值的设置允许您选择一个值作为其编辑图标菜单的一部分。

编辑设置后，通过Ctrl+S保存更改。这些变动将立即生效。

注意：工作区设置将覆盖用户设置，对于跨团队共享项目特定设置非常有用。

• 禅定模式

禅定模式让你专注于你的代码，隐藏除编辑器之外的所有UI(没有活动栏，状态栏，侧边栏和面板)，进入全屏并居中编辑器布局。禅定模式可以使用视图菜单，命令面板或快捷键Ctrl+ kz来切换。双Esc退出禅定模式。可以通过zenMode.fullScreen禁用转换到全屏。禅定模式可以通过以下设置进一步调整：zenMode.hideStatusBar, zenMode.hideTabs, zenMode.fullScreen, zenMode.restore 和zenMode.centerLayout

• 居中编辑器布局

您可以通过View > Appearance >Centered Layout，来打开和关闭居中编辑器布局，居中编辑器布局允许您将编辑器区域居中对齐。当在大型显示器上使用单个编辑器时，这特别有用。你可以使用侧面的框来调整视图的大小(按住Alt键独立移动框)。

选项卡

Visual Studio Code在编辑器上方的标题区域中显示带有选项卡（带选项卡的标题）的打开的项目。

打开文件时，会为该文件添加一个新选项卡。

选项卡允许您在项目之间快速导航，您可以拖放选项卡来重新排序。当打开的项目超过标题区域所能容纳的数量时，您可以使用Show Opened Editors命令(通过…更多按钮)以显示选项卡项的下拉列表。

如果你不想使用选项卡，你可以通过将workbench.editor.showTabs设置为false来禁用该特性。

    "workbench.editor.showTabs": false

• 选项卡排序

默认情况下，新选项卡会被添加到现有选项卡的右侧，但您可以通过workbench.editor.openPositioning设置控制新选项卡出现的位置。

例如，您可能希望新的选项卡项出现在左边：

"workbench.editor.openPositioning": "left"

预览模式

当您在资源管理器中单击或选择一个文件时，它将以预览模式显示，并重用现有的选项卡。如果您正在快速浏览文件，并且不希望每个访问过的文件都有自己的选项卡，那么这非常有用。

当您开始编辑该文件或使用双击从资源管理器打开该文件时，将有一个专用于该文件的新选项卡。

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

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

• workbench.editor.enablePreview全局启用或禁用预览编辑器。
• workbench.editor.enablePreviewFromQuickOpen从Quick Open启用或禁用预览编辑器。

编辑器组

当您拆分编辑器时(使用Split Editor或Open to Side命令)，将创建一个新的编辑器区域，该区域可以容纳一组编辑器。您可以在垂直和水平方向上并排打开任意多个编辑器区域。

你可以在资源管理器视图顶部的OPEN EDITORS部分清楚地看到这些：

您可以在工作台中拖放编辑器组，在组之间移动单个选项卡，并快速关闭整个组(Close All)。

注意：无论你是否启用了选项卡，VS Code都会使用编辑器组。如果没有选项卡，编辑器组就是打开项的堆栈，在编辑器窗格中可以看到最近选中的项。

网格编辑器布局

默认情况下，编辑器组以垂直列布局(例如，当您拆分一个编辑器以将其打开到一边时)。您可以轻松按自己喜欢的任何布局在垂直和水平方向上排列编辑器组：

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

在新的View > Editor Layout菜单中有一组预定义的编辑器布局：

向一侧打开的编辑器(例如，通过单击编辑器工具栏Split Editor操作)将默认打开活动编辑器的右侧。如果您喜欢在活动编辑器下面打开编辑器，请配置新设置workbench.editor.openSideBySideDirection: down。

有许多键盘命令可以单独使用键盘来调整编辑器的布局，但如果你更喜欢使用鼠标，拖放是一种快速的方法，可以将编辑器分割成任意方向：

专业提示：如果你按住Alt键，同时将鼠标悬停在工具栏动作拆分编辑器，它将提供拆分到另一个方向。这是一种向右或向底部拆分的快速方法。

• 键盘快捷键

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

• Ctrl + PageDown：切换右侧的编辑器。
• Ctrl + PageUp：切换左侧的编辑器。
• Ctrl + Tab：打开编辑器组MRU列表中的上一个编辑器。
• Ctrl + 1：转到最左侧的编辑器组。
• Ctrl + 2：转到中心编辑器组。
• Ctrl + 3：转到最右边的编辑器组。
• Ctrl + F4：关闭活动的编辑器。
• Ctrl + KW：关闭编辑器组中的所有编辑器。
• Ctrl + K Ctrl + W：关闭所有编辑器。

不使用选项卡

如果您不喜欢使用选项卡(选项卡标题)，可以通过将workbench.editor.showTabs设置为false来完全禁用选项卡(选项卡标题)。

• 禁用预览模式

如果没有选项卡，文件资源管理器的OPEN EDITORS部分是进行文件导航的一种快速方法。使用预览编辑器模式，单击打开时文件不会添加到OPEN EDITOR列表或编辑器组。您可以通过workbench.editor.enablePreview和workbench.editor.enablePreviewFromQuickOpen设置禁用此功能。

• Ctrl+Tab在整个编辑器历史中导航

您可以更改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有一些选项来控制在会话之间如何打开或恢复窗口(实例)。设置 window.openFoldersInNewWindow 和 window.openFilesInNewWindow提供配置打开新窗口或重用文件或文件夹的上一个活动窗口，可能的值是 default，on和off。

如果配置为default，我们将根据发出打开请求的上下文来对是否重用窗口进行最佳判断。将此选项设置为on或off，以始终保持相同的行为。例如，如果你觉得从File菜单中选择一个文件或文件夹应该总是打开一个新窗口，那么将这个设置为on。

注意：仍然有可能忽略此设置(例如，在使用-new-window或-reuse-window命令行选项时)。

window.restoreWindows设置告诉VS Code如何恢复你上一个会话打开的窗口。默认情况下，VS Code将恢复你在上一个会话中处理过的所有窗口(setting:all)。将此设置更改为none以永远不打开任何窗口，并且总是从一个空的VS Code实例开始。将其更改为one，以重新打开上次打开的窗口，或仅恢复已打开文件夹的窗口

接下来的步骤

现在你已经了解了VS Code的整体布局，开始通过查看以下主题来定制你喜欢的编辑器：

• （Changing the Theme）改变主题：设置一个颜色或文件图标主题到你的偏好（https://code.visualstudio.com/docs/getstarted/themes）。

常见问题

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

缩进导向颜色和大多数VS Code UI元素一样是可定制的。若要为当前活动颜色主题自定义缩进参考线颜色，请使用workbench.colorCustomizations设置并修改editorIndentGuide.background值。

例如，要使缩进参考线亮蓝色，添加以下内容到你的settings.json：

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

• 我可以在资源管理器中隐藏OPEN EDITORS部分吗?

当然可以，您可以使用explorer.openEditors.visible设置隐藏打开的编辑器列表，该设置声明在滚动条出现之前要显示多少项。当你有一个打开的文件夹时，设置"explorer.openEditors.visible": 0将隐藏打开的编辑器。如果你使用VS Code查看单独的松散文件，列表仍然会显示出来，因为它们不会显示在文件夹窗格中。