VSCode-精粹-一-

VSCode 精粹（一）

原文：Visual Studio Code Distilled

协议：CC BY-NC-SA 4.0

一、VSCode 简介

VSCode 不仅仅是另一个带有语法着色和自动缩进的记事本。相反，它是一个非常强大的以代码为中心的开发环境，旨在使用不同开发平台可用的语言更轻松地编写 web、移动和云应用，并通过内置调试器和对流行的 Git 版本控制引擎的集成支持来支持应用开发生命周期。

使用 VSCode，您可以处理单个代码文件或包含项目或松散文件的文件夹。本章介绍 VSCode，为您提供何时以及为何应该使用它的信息，以及在不同的支持操作系统上安装和配置程序的详细信息。

Note

在整本书中，我将交替使用产品的全名 VSCode 和友好名称 VS Code 和 Code 来指代该产品。

VSCode，一个跨平台开发工具

VSCode 是 Microsoft Visual Studio 系列中第一个运行在 Windows、Linux 和 macOS 上的跨平台开发工具。它是免费的、开源的( https://github.com/microsoft/vscode )，绝对是一个以代码为中心的工具，它不仅使编辑代码文件和基于文件夹的项目系统变得更加容易，而且有助于在最流行的平台上编写跨平台的 web、移动和云应用，如 Node.js 和.NET 5(包括早期版本的.NET Core)，集成了对大量语言的支持和丰富的编辑功能，如智能感知、查找符号引用、快速到达类型定义等等。

VSCode 基于 Electron ( https://electronjs.org/ )，这是一个使用原生技术创建跨平台应用的框架，并将强大代码编辑器的简单性与开发人员支持应用生命周期开发所需的工具相结合，包括调试器和基于 Git 的版本控制集成。因此，VSCode 是一个完整的开发工具，而不是一个简单的代码编辑器。为了更丰富的开发体验，你会想考虑 Windows 上的 Microsoft Visual Studio 2019 和 macOS 上的 Visual Studio 2019 for Mac，但 VSCode 在许多情况下真的很有帮助。

在本书中，您将学习如何使用 VSCode，以及如何充分利用它；您将发现如何将它用作强大的代码编辑器和完整的端到端开发环境。除非有必要区分操作系统，否则数据基于 Microsoft Windows 10，但通常 Linux 和 macOS 的界面没有区别。此外，VSCode 包括许多颜色主题，这些主题对其布局进行了样式化。在本书中，图形显示光(Visual Studio)主题，因此如果选择不同的颜色主题，您可能会在自己的屏幕上看到不同的颜色。第五章解释了如何改变主题，但如果你想与书中的人物保持一致，只需选择文件 ➤ 首选项 ➤ 颜色主题并选择 Visual Studio 灯光主题。值得一提的是，你选择的主题并不影响本书中描述的所有特性。

VSCode 的时间和原因

在您学习如何使用 VSCode、探索它提供的功能以及发现它如何提供改进的代码编辑体验之前，您必须清楚地了解它的用途。VSCode 不是简单的代码编辑器；相反，它是一个强大的环境，以编写代码为中心。VSCode 的主要目的是使在 Windows、Linux 或 macOS 上工作的任何开发人员更容易为 web、移动和云平台编写代码，提供对专有开发环境的独立性。

为了更好地理解 VSCode 的非专有性质，让我们考虑一个基于 ASP.NET 核心的示例，这是一种跨平台的开源技术，能够在 Windows、Linux 和 macOS 上运行，是微软为创建可移植的 web 应用而开发的；强迫你用微软 Visual Studio 2019 构建跨平台、可移植的 web 应用，会让你依赖于那个特定的集成开发环境(IDE)。这也适用于(免费)Visual Studio 2019 社区版。相反，尽管 VSCode 肯定不会取代更强大和更完整的环境，但它可以在各种操作系统上运行，可以管理不同的项目类型，以及最流行的语言。为此，VSCode 提供了以下核心功能:

• 内置对多种语言编码的支持，包括您通常在跨平台开发场景中使用的语言，如 C#和 JavaScript，具有高级编辑功能，并通过可扩展性支持其他语言

• Node.js 的内置调试器，支持附加调试器(例如.NET 5)通过可扩展性

• 基于流行的 Git 版本控制系统的版本控制，它为支持代码提交和分支的协作提供了一个集成的体验，对于一个可能与任何语言一起工作的工具来说，这是一个正确的选择

为了将所有这些功能适当地组合到一个工具中，VSCode 提供了一个基于文件夹的编码环境，这使得处理项目中没有组织的代码文件变得容易，并提供了一种处理不同语言的统一方法。从这一假设出发，VSCode 提供了一种高级编辑体验，它具有任何受支持语言所共有的功能，以及某些特定语言可用的功能。正如您将在整本书中了解到的，Code 还通过提供定制语言、语法着色、编辑工具、调试器以及许多可扩展性点来轻松扩展其内置特性。它是一个以代码为中心的工具，主要关注 web、跨平台代码。也就是说，它并没有提供完整、更复杂的应用开发和应用生命周期管理所需的所有功能，也不是某些开发平台的最佳选择。如果必须做出选择，请考虑以下几点:

• 只有当您使用的语言支持通过命令行界面(CLI)、编译器和调试器生成二进制文件和可执行文件时，VSCode 才能生成二进制文件和可执行文件。如果您使用的语言没有广泛的支持(例如，开源的 Go 编程语言， https://golang.org )，VSCode 就不能调用编译器。你可以通过实现任务自动化来解决这个问题，这将在第八章中讨论，但是这不同于集成编译过程。

• VSCode 没有设计器，因此创建应用的用户界面只能通过手动编写所有相关代码来完成。可以想象，对于某些语言和某些场景来说，这是没问题的，但对于某些类型的应用和开发平台来说，这可能会非常复杂，特别是如果你习惯于使用 Microsoft Visual Studio 2019 中可用的强大图形工具。

• VSCode 是一种通用工具，不适合特定的开发方案，如构建 Windows 桌面应用。

如果您的要求不同，请考虑 Microsoft Visual Studio 2019 或 Microsoft Visual Studio 2019 for Mac，它们针对构建、测试、部署和维护多种类型的应用进行了优化。

现在，您对代码的目标有了更清晰的认识，您已经准备好学习令人惊叹的编辑特性，这些特性使它超越了任何其他代码编辑器。

安装和配置 VSCode

安装 VSCode 是一项简单的任务。事实上，您可以简单地从您最喜欢的浏览器访问 https://code.visualstudio.com ，网页将检测您的操作系统，并建议合适的安装程序。图 1-1 显示了下载页面在 Windows 上的显示方式。

图 1-1

VSCode 的下载页面

Note

VSCode 也可以在可移植模式下运行，这意味着您可以创建一个可以跨环境移动的自包含文件夹。因为这是一个非常特殊的场景，所以不在本书中讨论；您可以阅读文档( https://code.visualstudio.com/docs/editor/portable )来了解生成便携模式所需的步骤。

在下面几节中，您将了解在各种支持的系统上安装 VSCode 的提示。

Note

在撰写本文时，VSCode 的最新稳定版本是 1.56 版，于 2021 年 4 月发布。

在 Windows 上安装 VSCode

VSCode 可以安装在 Windows 7、8 和 10 上。对于此操作系统，VSCode 有两个安装程序:一个全局安装程序和一个用户级安装程序。第一个安装程序需要管理权限才能安装，并使代码可供所有用户使用。第二个安装程序使代码仅对当前登录的用户可用，但它不需要管理权限。

我推荐选择后者，特别是如果你在公司环境中工作，并且你没有在你的 PC 上安装软件的管理特权。图 1-1 中的Windows下载按钮会自动下载用户安装程序。如果您希望下载系统级安装程序，请转到 https://code.visualstudio.com/download 并选择最适合您的系统配置(32 或 64 位，或 ARM)的系统安装程序下载。

下载完成后，启动安装程序，只需按照大多数 Windows 程序的典型步骤进行操作。在安装过程中，将提示您指定如何在 Windows shell 中集成 VSCode 的快捷方式。在“选择附加任务”对话框中，确保选择(至少)以下选项:

• 在 Windows 资源管理器文件上下文菜单中添加“用代码打开”动作，允许右击资源管理器中的代码文件，用 VS 代码打开这样的文件

• 将“用代码打开”动作添加到 Windows 资源管理器目录上下文菜单中，该菜单允许右击资源管理器中的文件夹并使用 VS 代码打开该文件夹

• 添加到 PATH(重启后可用)，它将 VS 代码的路径名添加到 PATH 环境变量中，这样就可以轻松地从命令行运行 VSCode，而无需键入完整的路径

Note

一些防病毒和系统保护工具(如 Symantec Endpoint Protection)可能会阻止安装某些被识别为误报的文件。在大多数情况下，这不会阻止 VSCode 运行，但是建议您在安装代码之前禁用保护工具，或者如果您没有提升的权限，请让管理员为您禁用保护工具。

安装过程完成后，会出现一个特定的对话框通知您。用户级安装程序的安装文件夹是 C:\ Users \ username \ AppData \ Local \ Programs \ Microsoft VS Code，而全局安装程序的安装文件夹在 64 位系统上是 C:\ Program Files \ Microsoft VS Code，在 32 位系统上是 C:\ Program Files(x86)\ Microsoft VS Code。如果在安装过程中选择了创建快捷方式的选项，您将在“开始”菜单和桌面上找到 VSCode 的快捷方式。启动时，VSCode 如图 1-2 所示。

图 1-2

在 Windows 上运行的 VSCode

在 macOS 上安装 VSCode

在 macOS 上安装 VS 代码极其简单。在下载页面，只需点击下载 macOS 软件按钮，等待下载完成。在 macOS 上，VSCode 作为一个单独的程序运行，因此您只需双击下载的文件就可以启动应用。图 1-3 显示了在 macOS 上运行的 VSCode。

图 1-3

在 macOS 上运行的 VSCode

在 Linux 上安装 VSCode

Linux 是一个非常流行的操作系统，并且存在许多派生的发行版，因此根据您使用的发行版，有不同的安装程序可用。对于 Ubuntu 和 Debian 发行版，您需要。deb 安装程序。对于 Red Hat Linux、Fedora 和 SUSE 发行版，您需要。rpm 安装程序。这一澄清很重要，因为与 Windows 和 macOS 不同，浏览器可能无法自动检测您正在使用的 Linux 发行版，因此它将提供这两种选项。

安装 VSCode 后，只需单击桌面上的显示应用按钮，然后单击 VSCode 快捷方式。图 1-4 显示了运行在 Ubuntu 上的 VSCode。

图 1-4

在 Ubuntu 上运行的 VSCode

Note

如果您是 Windows 用户，并且想要在 Linux 发行版上尝试 VSCode，您可以使用 Hyper-V 工具创建一个虚拟机。例如，您可以安装最新的 Ubuntu 版本( https://www.ubuntu.com/download/desktop )作为 ISO 镜像，并将其用作 Hyper-V 中的安装介质。在 macOS 上，您需要单独购买 Apple Parallels Desktop 软件以创建虚拟机，但您基本上也可以这样做。

本地化支持

VSCode 以英语发布，但它可以本地化为许多其他受支持的语言和文化。启动时，VS 代码检查操作系统语言，如果不是英语，它会显示一条弹出消息，建议安装一个适合您的操作系统文化的语言包。本地化支持也可以手动启用。

为此，选择视图 ➤ 命令面板。当文本框出现在页面顶部时，键入以下命令:

> Configure Display Language

您也可以只输入display，该命令将自动列在命令面板中(见图 1-5 )。

图 1-5

调用命令来更改本地化

Note

命令面板将在第二章中详细讨论。

单击此命令时，命令选项板会显示两个选项:

• en ，允许选择美式英语作为文化。这是默认的本地化，并且始终可用。

• 安装附加语言，这允许安装由微软构建的附加语言包。

当你点击安装附加语言时，VS Code 会显示可用语言包列表，如图 1-6 所示。

图 1-6

安装语言包

选择语言包以查看本地化描述，然后单击安装按钮。然后，VSCode 的用户界面将根据您的选择在重新启动时本地化。

更新 VSCode

VSCode 被配置为在后台接收自动更新，通常，Microsoft 每月发布更新。

Note

因为 VS 代码每月更新一次，所以有些特性可能在你阅读的时候已经更新了，而有些可能是全新的。这是一个必要的澄清，你应该在阅读时牢记在心，这也是为什么我还将提供官方文档的链接，以便你可以更容易地保持最新。

此外，在 Windows 和 Linux 上，您可以使用帮助 ➤ 检查更新，在 macOS 上使用代码 ➤ 检查更新来手动检查更新。如果您不想接收自动更新而喜欢手动更新，您可以禁用自动更新，方法是选择文件 ➤ 首选项 ➤ 设置，然后在应用设置组的更新部分禁用后台更新选项。图 1-7 显示了一个基于 Windows 的例子。(显然，在 macOS 和 Linux 上，启用 Windows 后台更新选项不可用。)

图 1-7

禁用自动更新

您可以按照相同的步骤在后台重新启用更新。每当 VSCode 收到更新时，您都会收到一条通知，建议您重新启动代码以应用更改。在更新后第一次重新启动 VSCode 时，您将看到已安装版本的发行说明，如图 1-8 所示。

图 1-8

VS 代码发布说明

发行说明包含新增和更新功能的列表，以及将打开文档中相应功能页面的超链接。您可以随时从帮助 ➤ 发布说明中调用发布说明。

使用内部构件预览功能

默认情况下，VSCode 网站的下载页允许您下载最新的稳定版本。但是，微软也定期发布 VSCode 的预览版本，称为 Insiders builds，您可以下载这些版本，以便在向公众发布之前了解即将推出的新功能和更新功能。

内部版本可以从 https://code.visualstudio.com/insiders 下载，并遵循之前针对每个操作系统描述的相同安装规则。它们有不同的图标颜色，通常是绿色图标而不是蓝色图标，你在应用栏看到的名称是 VSCode - Insiders 而不是 VSCode(见图 1-9 )。

图 1-9

VSCode 内部人员构建

内部构建和稳定构建可以毫无问题地一起工作。因为每一个都存在于它自己的环境中，所以您在稳定构建中安装的设置定制和扩展不会自动对内部构建可用，反之亦然，所以您需要再次提供它们。

内部版本是了解 VSCode 的一个很好的选择，但是因为它们不是稳定的最终版本，所以不建议您在生产中使用它们或者将它们与您要发布到生产中的代码一起使用。

摘要

VSCode 不是一个简单的代码编辑器，而是一个针对 web、移动和云开发而优化的全功能开发环境。在本章中，您了解了如何在 Windows、macOS 和 Linux 发行版上安装 VSCode，学习了如何选择合适的安装程序和微调安装过程。您还了解了如何配置本地化和更新。最后，您看了一下内部版本，它提供了即将到来的、未发布的特性的预览。

既然您已经准备好使用您的环境，是时候开始发现 VSCode 提供的惊人特性了。下一章将介绍这个环境，然后在第三章中，您将看到所有令人惊叹的代码编辑特性，这些特性使 VSCode 成为一个丰富、强大的跨平台编辑器。

二、了解环境

在使用 VSCode 作为您选择的编辑器之前，为了充分利用开发环境，了解工作区是如何组织的以及有哪些命令和工具是很方便的。

VS 代码用户界面和布局被优化以最大化代码编辑的空间，它还提供了简单的快捷方式来快速访问给定上下文中需要的所有附加工具。更具体地说，用户界面分为五个区域:代码编辑器、状态栏、活动栏、面板区域和侧栏。本章解释了用户界面是如何组织的，以及如何最有效地使用它。

Note

本章中讨论的所有特性都适用于任何语言的任何文件，无论图中显示的语言是什么(通常是 C#)，它们都是可用的。您可以通过文件➤打开文件打开一个或多个代码文件，以激活一些编辑器窗口并探索本章中讨论的功能。然后，第四章更详细地讨论了如何使用一种或多种语言同时处理单个文件和多个文件。

欢迎页面

启动时，VSCode 显示欢迎页面，如图 2-1 所示。

图 2-1

欢迎页面

在页面的左侧，在 Start 组下，您可以找到创建和打开文件和文件夹以及克隆现有 Git 存储库的快捷方式。在最近组下面是最近打开的文件和文件夹列表，你可以点击快速打开。在帮助组下，有一些有用的链接指向备忘单、介绍性视频、产品文档和其他关于 VSCode 的学习资源。在欢迎页面的右侧，在自定义组下，可以找到通过安装扩展、更改键盘快捷键、更改颜色主题来自定义 VSCode 的快捷方式。在 Learn 组下是关于命令和用户界面学习资源的附加快捷方式。

欢迎页面中突出显示的大多数特性在本书中都有讨论。默认情况下，欢迎页面设置为在每次启动代码时显示。要更改此默认行为，请取消选中启动时显示欢迎页面复选框。要在启动时重新启用欢迎页面，请点击帮助➤欢迎并重新添加复选标记。

代码编辑器

代码编辑器当然是你在 VS 代码中花费最多时间的地方。当您创建新文件或打开现有文件和文件夹时，代码编辑器变得可用。您可以一次编辑一个文件，也可以同时并排编辑多个文件。图 2-2 显示了后者的一个例子。

图 2-2

代码编辑器和多个文件视图

为此，您有几个选择:

• 右键单击浏览器栏中的文件名，然后选择打开到侧面。

• 按住 Ctrl 键并单击浏览器栏中的文件名。这将在本章后面的“侧栏”一节中讨论。

• Ctrl+(或 macOS 上的⌘+)将编辑器一分为二。

请注意，如果您已经打开了三个文件，并且想要打开另一个文件，活动的编辑器将显示该文件。开放编辑器也可以组织成组。为此，您可以将一个打开的编辑器的标题拖放到另一个编辑器附近，它们将被分组到同一个空间，浏览器栏将显示组列表。您可以通过按 Ctrl + 1、2 和 3 在编辑器之间快速切换。请记住，这适用于多达九个编辑器窗口。代码编辑器是 VSCode 的核心，它提供了大量强大的生产力特性，我们将在下一章深入讨论这些特性。现在，知道如何打开和排列编辑器窗口就足够了。

重新排序、调整大小和缩放编辑器窗口

您可以根据自己的偏好对编辑器窗口进行重新排序和调整大小。要对编辑器重新排序，请点按编辑器的标题(您可以在此处看到文件名),并将编辑器移动到不同的位置。当指针在编辑器的边界上时，可以通过单击鼠标左键来调整编辑器的大小，直到它显示为左/右箭头对。

您还可以通过分别单击 Ctrl++和 Ctrl+-，放大和缩小活动编辑器。或者，您可以选择视图➤放大和视图➤缩小。您可以使用外观➤重置缩放来重置原始缩放因子。

Note

在 VSCode 中，缩放实际上是一种辅助功能。作为一种暗示，当您缩放代码编辑器时，其他所有内容也将被缩放。

状态栏

状态栏包含有关当前文件或文件夹的信息，并提供一些快速操作的快捷方式。图 2-3 显示了一个状态栏如何出现的例子。

图 2-3

状态栏

状态栏从左至右包含以下信息:

• Git 版本控制信息和选项，比如当前分支。这只有在 VS 代码连接到 Git 存储库时才可见。

• 在源代码中检测到错误和警告。

• 以行和列表示的光标位置。

• 制表符大小，在本例中为空格 : 4 。您可以单击此处更改缩进大小，并将缩进转换为制表符或空格。

• 当前文件的编码。

• 当前的行终止符。

• 打开文件的编程语言或标记语言。通过单击当前语言名称，您可以从弹出的下拉列表中更改语言。

• 项目名称，如果打开的文件夹包含受支持的项目系统。值得注意的是，如果文件夹包含多个项目文件，单击此项可以在项目之间切换。

• “反馈”按钮，使您能够在 Twitter 上共享您对 VSCode 的反馈。

• 通知图标，显示新通知的数量(如果有)。通知消息通常来自扩展，或者是关于产品更新的。

值得一提的是，状态栏颜色会根据情况而变化。例如，当您打开单个文件时，它是紫色的；当您打开文件夹时，它是蓝色的；当 VSCode 处于调试模式时，它是橙色的。此外，第三方扩展可能会使用状态栏来显示它们自己的信息。

活动栏

活动栏位于工作区的左侧，可以看作是侧栏的折叠容器。图 2-4 所示为活动栏。

图 2-4

活动栏

活动栏提供了资源管理器、搜索、Git、运行和调试、扩展、帐户和设置工具的快捷方式，这些工具将在下一节中介绍。当您单击快捷方式时，与所选工具相关的侧栏会变得可见。您可以再次单击同一快捷方式来折叠侧栏。

侧栏

侧边栏是 VSCode 中最重要的工具之一，也是您将更多与之交互的工具之一。它由五个工具组成，每个工具都由相应的图标启用，在以下小节中进行了描述。

浏览器栏

通过单击边栏顶部的第一个图标可以启用浏览器栏，浏览器栏提供了您正在处理的文件夹或文件的结构化、有组织的视图。打开编辑器子视图包含活动文件列表，包括不属于项目或文件夹的打开文件或已被修改的文件。相反，它们显示在子视图中，子视图的名称是文件夹或项目名称。图 2-5 提供了一个探索者的例子。

图 2-5

浏览器栏

Note

您必须将光标悬停在文件夹名称(图 2-5 中的 APP1)上，以使四个按钮可见。

显示文件夹结构的子视图提供了四个按钮(从左到右):新建文件、新建文件夹、刷新浏览器和在浏览器中折叠文件夹，每个按钮都是不言自明的。打开编辑器子视图有三个按钮(鼠标悬停时出现):切换垂直/水平编辑器布局、保存所有编辑器和关闭所有编辑器。在资源管理器中右键单击一个文件夹或文件名会提供一个上下文菜单，该菜单提供常用命令(如本章前面提到的打开到侧面)。一个很有意思的命令是在资源管理器中显示(或者在 Mac 上显示给查找器，在 Linux 上打开包含文件夹，打开选中项目的包含文件夹。请注意，活动栏中的资源管理器图标也报告了已修改文件的数量。

大纲视图

浏览器栏的底部包含另一组名为的轮廓。该组提供了代码文件中定义的类型和成员或隐式。图 2-6 和 2-7 分别显示了基于打字稿文件和基于 HTML 文件的轮廓。

图 2-7

HTML 文件的大纲视图

图 2-6

类型脚本文件的大纲视图

您可以展开标记文件中定义的类型和成员，以查看它们定义的其他对象，并且可以单击每个项目，将光标放在源代码中选定的项目定义上。值得一提的是，VSCode 用不同的颜色(在 Visual Studio Light 主题的情况下为红色)突出显示有潜在问题的项，这些项在代码编辑器中用波浪线突出显示。目前，Outline 视图只对 JavaScript、TypeScript、HTML、Markdown 和 JSON 等语言可用。安装适当的扩展时，可能会支持其他语言。

搜索工具

通过单击搜索图标可以启用搜索工具，该工具允许进行搜索，并且可以选择替换文件中的文本。您可以搜索一个或多个单词，包括特殊字符(如*和？)，甚至可以基于正则表达式进行搜索。图 2-8 显示了运行中的搜索工具，扩展了高级选项(要包括的文件和要排除的文件)，您可以通过单击位于替换下的 … 按钮来启用这些选项。在该示例中，仅在内执行搜索。cs 文件。

图 2-8

搜索工具

搜索结果显示在分层视图中，该视图对包含指定搜索关键字的所有文件进行分组，显示包含该关键字的代码行的摘录。文件列表和代码编辑器中的匹配项也会突出显示。最后，您可以点击工具栏中靠近搜索标题的清除搜索结果按钮来清除搜索结果。如果您想用新文本替换某些文本，您可以在替换文本框中输入新文本，然后点击全部替换按钮。

Git 酒吧

侧栏提供了对版本控制的 Git 集成的访问。Git 集成是一个核心话题，将在第七章中详细讨论，但是为了侧栏的完整性，这里提供了一个快速浏览。

Git 栏可以通过单击侧栏顶部的第三个按钮(带有一种叉状图标)来启用，并提供对所有常见源代码控制操作的访问，例如初始化存储库、提交代码文件和同步分支。Git 图标还显示了本地修改的文件数量。图 2-9 显示了一个例子。修改后的文件列在修改组下。每个列出的文件都有三个按钮:打开文件、废弃变更和阶段变更。在 Git 中，正如您将在第七章中了解到的，阶段化变更的概念意味着将变更从主代码分支中分离出来，以便开发人员可以评估是提交变更还是丢弃变更。单击文件名将启用拆分视图，显示修改后的代码和原始代码之间的差异；该主题也将在第七章中进行更全面的讨论。

图 2-9

Git 酒吧

Git 栏还提供了一个弹出菜单，其中包含 VSCode 中支持的 Git 命令的列表，这些命令被组织到子菜单中，例如 Commit、Push、Pull 以及本书后面将会介绍的其他几个命令。点击 Git 栏右上角的 … 按钮打开菜单。

运行和调试栏

VSCode 不仅仅是一个简单的代码编辑器，还是一个功能齐全的开发工具，它附带了一个集成的调试器.NET Core，并且可以用第三方调试器为其他平台和语言进行扩展。第九章更详细地描述了 VSCode 的这一重要部分，但是现在请注意，您可以通过单击侧边栏顶部的第四个图标来访问调试工具。这将打开运行和调试栏，如图 2-10 所示。

图 2-10

运行和调试栏

在第九章中，你将看到如何配置调试工具，以及它们在 VSCode 中的强大功能。您还将看到安装额外的调试器是多么容易。

扩展栏

可以通过单击活动栏中从顶部数第五个按钮来启用扩展栏，并允许搜索和安装 VSCode 的扩展，其中包括其他语言、调试器、代码片段等等。扩展性将在第六章中讨论，但是图 2-11 提供了一个扩展栏如何出现的例子。

图 2-11

扩展栏

您不仅可以在线搜索扩展，还可以看到已安装的扩展以及禁用和推荐的扩展的列表。

“帐户”按钮

VSCode 的最大好处之一是，您可以通过将开发环境安排在对您最方便的配置中，以多种方式对其进行自定义。这包括扩展、键盘快捷键、常规设置等等。

如果您在多台机器上运行 VS 代码，如果您可以在所有机器上自动重新创建您的环境，而不需要在每台机器上手动设置您的首选项，这将非常有用。幸运的是，这可以通过侧边栏上的账户按钮来实现。

有了这个工具，你可以用一个 Microsoft 或 GitHub 帐户登录，你的设置将在你用同一个帐户登录的所有 VS 代码安装中同步。以下是可以同步的设置列表:

• 常规设置

• 快捷键

• 扩展ˌ扩张

• 用户定义的代码片段

• 用户界面的状态

点击账户按钮，然后打开设置同步，即可启用设置同步。此时，代码显示一个设置列表，您可以跨机器同步这些设置，默认情况下选择所有设置，如图 2-12 所示。

图 2-12

选择要同步的设置

选择您想要同步的设置，然后点击登录&打开。在这一点上，你会被要求指定你想使用哪种帐户，如微软或 GitHub。显然，您需要在所有其他代码安装上使用相同的帐户。将打开一个浏览器窗口，您可以在其中输入凭据，登录完成后，您将很快收到一条确认消息。

Note

在 Windows 上，防火墙可能会提示您一条警告，说 VS 代码正在试图打开 Web 上的资源。如果发生这种情况，您可以安全地允许此操作。

此时，VSCode 开始同步所有选定的设置，这可能需要一段时间。在后台，设置同步基于两个文件，settings.json 和 extensions.json，VS 代码需要从不同的安装中合并这两个文件。如果在自动合并这些文件时遇到问题，VS Code 会提供一个选项，让您使用与 Git 相同的合并工具来手动合并设置。这是一个非常有用的特性，它将为您节省大量时间，让您在不同的机器上获得同样舒适的环境。

设置按钮

“设置”按钮用齿轮图标表示，位于活动栏的底部。如果你点击它，你会看到一个弹出菜单，上面有一列命令，代表自定义 VSCode 的快捷方式(这将在第五章中详细讨论)。其中，菜单中的命令使您能够手动搜索产品更新。

在文件间导航

除了单击编辑器的选项卡之外，VSCode 还提供了两种在文件之间导航的方式。最快的方法是按 Alt+Left 或 Alt+Right 在活动文件之间切换。

如果您改为按 Ctrl+Tab，您将能够浏览当前打开的文件列表并选择一个进行编辑，如图 2-13 所示。

图 2-13

在活动文件之间导航

命令选项板

与代码编辑器、活动栏和侧边栏一起，命令面板是 VSCode 中另一个非常重要的工具，它使您能够通过键盘访问 VSCode 内置命令以及由扩展添加的命令。你可以打开命令面板，如图 2-14 用视图 ➤ 命令面板或者通过 Ctrl+Shift+P 键盘快捷键(macOS 上的⌘+P)打开。

图 2-14

命令选项板

命令选项板不仅仅是菜单命令或用户界面工具，还包括在其他地方无法访问的其他操作。例如，命令面板使您能够安装扩展以及恢复当前项目或文件夹上的 NuGet 包。您可以简单地上下移动来查看可用命令的完整列表，并且可以键入一些字符来过滤列表。您会注意到它们中有多少是菜单中可用的映射操作，并且其中许多都有可用的键盘快捷键。与扩展、调试和 Git 相关的其他命令将在后面的章节中讨论，所以此时开始使用命令面板是很重要的。

面板区域

VSCode 通常不仅需要显示关于源代码的信息，还需要显示来自 Git 引擎、外部工具或调试器的信息。为了以一种有组织的方式实现这一点，环境提供了所谓的面板区域，默认情况下，它出现在用户界面的底部。

Panels 区域由四个内置面板组成:问题、输出、调试控制台和终端，本节将分别讨论这四个面板。默认情况下，面板区域是不可见的，当面板所代表的信息变得可用时(例如调试器发送有关源代码中符号的信息)，它通常会弹出。此外，默认情况下，面板区域出现在 VS 代码用户界面的底部，但是您可以通过右键单击面板，然后选择右移面板或左移面板，或者使用将面板移至底部来恢复原始位置，从而将其移动到工作区的一侧。此外，您现在可以使用鼠标将面板拖放到不同的位置。现在让我们更详细地讨论每个面板。

问题面板

对于具有内置增强编辑支持的语言，如 TypeScript ( https://www.typescriptlang.org )，或者添加了扩展以提供高级编辑功能的语言，如 C#，VSCode 可以在您键入时检测代码问题。在代码编辑器中，这些通常用红色曲线突出显示(表示阻塞错误)，用绿色突出显示(表示警告)。错误、警告和信息性消息的列表也显示在“问题”面板中。这可以通过点击状态栏左下角的错误数量来启用(参见图 2-15 )。

由于图标不同，问题面板可以很容易地区分错误和警告(红色背景上的白色 x 表示错误，黄色背景上的黑色感叹号表示警告)。图 2-15 显示了一个基于 C#代码的例子，其中包含一个未使用的变量(警告)和一个语法错误。

图 2-15

问题面板

如果打开了多个文件,“问题”面板会按文件名对问题进行分组。此外，对于每个问题，您将能够看到文件夹名称和在源代码文件中的位置。只要双击一个问题，VS 代码就会将光标移动到代码编辑器中选中的项目。

Note

代码编辑器还提供了一种在输入时快速修复代码问题的方法，但这与问题面板无关，将在下一章讨论。

输出面板

“输出”面板是 VSCode 显示来自内部和外部工具(如运行时工具、Git 命令、扩展和任务)的消息的地方。图 2-16 显示了基于输出的示例.NET 的 NuGet 包管理器。

图 2-16

输出面板

因为在针对源代码文件的操作期间(例如，包还原然后编译)或者在 VSCode 生存期(例如扩展)期间，可能会同时运行多个工具，所以您可以使用面板中的下拉框来更改视图并查看每个工具的输出。如果外部工具的执行失败，并且您想要获得关于发生了什么的更多信息，那么这个工具特别有用。

调试控制台面板

顾名思义，调试控制台面板是调试器用来显示代码执行信息的专用面板。图 2-17 显示了一个基于简单 C#应用执行的例子。

图 2-17

调试控制台面板

调试控制台不仅显示有关代码执行、调试符号的信息以及调试器需要显示的任何其他信息，还充当一个交互式控制台，您可以在其中计算表达式。图 2-17 显示一个数学表达式已经使用代码中定义的变量进行了手动求值。调试在 VSCode 中是一个非常重要的主题，在第九章中有详细的讨论，在那里你可以找到关于调试控制台的更多信息。

使用终端

VSCode 允许直接在开发环境中针对操作系统执行命令。事实上，您可以选择终端 ➤ 新建终端命令，在工作区底部的面板中打开一个新的终端实例。图 2-18 显示了一个基于 Windows 的例子。

图 2-18

终端面板

在 macOS 和 Linux 上，终端工具基于每个系统的 bash shell。在 Windows 上，默认情况下，终端基于 PowerShell。但是，您可以通过单击面板工具栏上的下拉菜单，然后单击选择默认 Shell来选择不同的工具。此时，您将能够从命令面板中选择 Windows 命令提示符、PowerShell 和 Git bash 命令行工具。您也可以通过点击新建终端按钮(带有 + 符号的图标)来打开多个终端实例。

VSCode 还使用终端面板来启动针对操作系统的自动脚本和命令。例如，当您生成 C#应用时，VSCode 会启动.NET Core 编译器，其输出显示在终端面板，如图 2-19 所示。

图 2-19

用于自动脚本的终端面板

摘要

在本章中，您了解了 VSCode 中的工作区以及您将经常使用的工具。您看到了如何利用欢迎页面中的快捷方式，以及如何排列编辑器窗口。

您看到了状态栏如何提供关于活动文件的信息，以及活动栏如何是边栏中包含的工具的快捷方式的折叠容器:浏览器栏、搜索工具、Git 栏、调试栏、扩展栏、帐户按钮和设置按钮。您看到了如何在文件之间快速导航，以及命令面板如何提供通过键盘访问命令的方法，包括 VSCode 命令和扩展的命令。您还浏览了环境中的另一个重要区域，Panels 区域，在这里您可以获得关于代码问题的信息，从内部和外部工具和调试器获得消息，并通过终端执行命令和脚本。

现在您已经看到了环境是如何组织的，是时候享受一下代码编辑器中所有强大的生产力特性了。这是下一章的主题。

三、语言支持和代码编辑功能

VSCode 不仅仅是另一个具有语法着色和自动缩进的文本编辑器。相反，它是一个非常强大的以代码为中心的开发环境，旨在使使用不同开发平台可用的语言编写 web、移动和云应用变得更加容易。

为了提供一个强大、丰富的开发环境，VSCode 集成了许多编辑功能，旨在提高代码的生产率和质量。本章讨论 VSCode 中支持哪些语言以及所有可用的代码编辑功能，从所有支持的语言都支持的最基本的功能开始，到特定语言(如 C#、JavaScript 和 TypeScript)都支持的最高级的生产力工具。

Note

本章中使用的键盘快捷键基于 VSCode 中的默认设置。

语言支持

开箱即用，VSCode 内置了对许多语言的支持。表 3-1 通过编辑功能对支持的语言进行分组。

表 3-1

按功能的语言支持

|

语言

|

编辑功能

| | --- | --- | | Batch、C、C#、C++、Clojure、CoffeeScript、Diff、Dockerfile、F#、Go、HLSL、Jade、Java、HandleBars、Ini、Lua、Makefile、Objective-C、Objective-C++、Perl、PowerShell、Properties、Pug、Python、R、Razor、Ruby、Rust、SCSS、ShaderLab、Shell 脚本、SQL、Visual Basic、XML | 常见功能(语法着色、括号匹配、基本单词补全) | | Groovy，Markdown，PHP，Swift | 常见功能和代码片段 | | CSS，HTML，JSON，带注释的 JSON，Less，Sass | 通用功能、代码片段、智能感知、大纲 | | 类型脚本，类型脚本反应，JavaScript，JavaScript 反应 | 通用功能、代码段、IntelliSense、大纲、参数提示、重构、查找所有引用、转到定义、查看定义 |

VSCode 可以用开发人员社区开发的其他语言进行扩展，也可以从 Visual Studio Marketplace 下载。这在第六章中有更详细的讨论，但是，与此同时，你可以看看现成可用的语言。出于本书的目的，为了方便起见，提供了对 C#和 C++的介绍。

使用 C#和 C++

C#编程语言值得更详细的介绍，因为它很受欢迎，因为它现在是一种跨平台语言，不仅可以在 Windows 上使用，还可以在 macOS 和 Linux 上使用。从表 3-1 中可以看出，VSCode 为 C#提供的开箱即用的编辑体验仅限于常见功能。

然而，通过微软 C#免费扩展( https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp )提供了对 C#编码体验的全面而丰富的支持。这为提供了优化的体验.NET Core development，包含了用 C#构建应用所需的所有支持和工具，包括对.NET 核心调试器。有了这个扩展，您基本上可以获得与 TypeScript 相同的体验，包括基于.NET 编译器平台(也称为 Roslyn ),可以更容易地在您键入时修复代码问题。如果你打算使用 C#，我强烈建议你安装这个扩展，特别是因为本章讨论了一些只能通过扩展使用的编辑特性。

扩展性在第六章中有更详细的解释，但是您可以通过打开任何 C#代码文件(.cs ),并在检测到该文件类型有合适的扩展名时按照 VSCode 显示的说明进行操作。

类似地，您可能希望安装 Microsoft C/C++扩展，该扩展为 C 和 C++语言添加了增强的编辑功能，以及对 Windows (PDB、MinGW、Cygwin)、macOS 和 Linux 的调试支持。该扩展可从 https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools 获得，您可以通过打开 a .c .，按照与刚才描述的 C#扩展相同的简单安装步骤进行安装。h 或者。cpp 文件。

基本代码编辑功能

VSCode 提供了许多您期望从功能强大的代码编辑器中获得的功能。本节描述了这个工具的哪些编辑特性让您的编码体验变得令人惊叹。如果您熟悉 Microsoft Visual Studio，您还会看到一些功能是如何从该 IDE 继承而来的。值得一提的是，VSCode 为几乎所有的编辑功能提供了键盘快捷键，让您可以更快地编辑代码。由于这个原因，键盘快捷键也被提到了许多描述的功能。

Note

本节描述的功能适用于表 3-1 中描述的所有支持的语言，除非另有明确说明。

使用文本

正如您所料，VS Code 中的代码编辑器提供了文本操作和文本选择命令。编辑菜单提供了撤销、重做、复制、剪切、粘贴、查找、替换、在文件中查找和在文件中替换命令。这些命令在每个文本编辑器中都可用，不需要任何进一步的解释。

编辑菜单还包括切换行注释和切换块注释命令，根据语言分别添加单行注释或块注释。例如，在 C#中，第一个命令会注释这样一行:

// int a = 0;

相比之下，块注释工具将添加多行注释，如下所示:

/* int a = 0;
int b = 0; */

编辑菜单也提供了一个命令来处理代码片段， Emmet:扩展缩写。此命令是代码编辑器提供的键盘快捷键的菜单表示形式，用于添加代码段。代码片段将在本章的“可重用代码片段”一节中详细讨论。

选择菜单不仅提供了文本选择命令，还提供了更容易在当前行上下移动或复制代码行的命令。在上方添加光标、在下方添加光标和在行尾添加光标命令允许使用多光标，如本章“多光标”一节所述。

如果您在编辑器中单击一个标识符、保留字或类型名称，您可以使用添加下一个事件、添加上一个事件和选择所有事件命令，这些命令允许快速选择所选单词的事件，事件将以不同的颜色突出显示，这取决于当前主题。

语法着色

对于表 3-1 中总结的所有语言，VSCode 中的代码编辑器提供了正确的语法着色。图 3-1 显示了一个基于类型脚本代码文件的例子。

图 3-1

语法着色

通过可扩展性，语法着色可用于其他语言。如果您需要使用不包含在 VSCode 中的现成语言，可以查看 Visual Studio 市场，看看是否有支持这种语言的扩展。有关扩展性的信息，请参见第六章。顺便提一下，语法着色是扩展为增加对新语言的支持而必须提供的最低要求。

分隔符匹配和文本选择

代码编辑器可以突出显示匹配的分隔符，如方括号和圆括号(包括方括号和圆括号)。这个特性对于分隔代码块非常有用，当光标靠近其中一个分隔符时就会被触发。图 3-2 显示了一个基于构造函数定义中括号匹配的例子。

图 3-2

分隔符匹配

当您需要直观地分隔嵌套块以及复杂而长的表达式时，此功能也非常有用。值得一提的是，可以按 Ctrl+D 快速选择光标右侧的一个单词或标识符。您还可以通过按 Shift+Alt+向右箭头键来快速选择代码块分隔符内的所有文本，并且可以通过按 Shift+Alt+向左箭头键来快速取消选择同一代码块。

代码块折叠

代码编辑器允许折叠分隔的代码块。只要将光标悬停在行号上，一个表示向下箭头的符号就会出现在代码块的开头附近。只需单击折叠，此时您将看到>符号，单击它可以展开代码块。图 3-3 提供了一个例子。

图 3-3

代码块折叠

Note

如果在代码编辑器中没有启用代码块折叠，打开 VS 代码的设置，然后在文本编辑器组中启用折叠和折叠高亮选项。

多光标

代码编辑器支持多光标。每个光标独立操作，您可以通过按住 Alt 键并单击所需位置来添加辅助光标。使用多光标的最典型的情况是当您想要在代码文件的不同位置添加(或替换)相同的文本时。

可重用的代码片段

VSCode 附带了许多内置代码段，您可以通过使用 Emmet 缩写语法并按 Tab 键来轻松添加这些代码段。请参见“语言支持”部分的表 3-1 查看哪些语言本身支持代码片段。例如，在一个 Swift 文件中，你可以通过使用do代码片段很容易地添加一个do..catch块定义，如图 3-4 所示。

图 3-4

添加代码片段

当您在代码编辑器中键入代码时，代码段是可用的，您可以通过代表一个小的白色表单的图标来识别它们。请注意工具提示如何显示代码片段的预览。在前一个代码片段上按 Tab 会产生如图 3-5 所示的结果。

图 3-5

突出显示变量名的新添加的代码片段

请注意，如果代码片段包含变量名或标识符，这些可能会被高亮显示，以建议您给它们一个不同的名称(如图 3-5 中的error标识符)。重命名突出显示的标识符时，所有出现的标识符也会被重命名。

VSCode 不限于内置的代码片段。您可以从 Visual Studio Marketplace 下载其他开发人员为多种语言制作的代码片段。实际上，大多数引入或扩展编程语言支持的扩展也包含了许多代码片段。

单词补全

VSCode 中的代码编辑器为所有受支持的语言实现了基本的单词完成功能。此功能可帮助您在键入时完成单词和语句。例如，图 3-6 显示了代码编辑器如何根据开发人员键入的内容，建议在 Visual Basic 文件中用Class关键字终止一条语句。

图 3-6

使用单词补全功能完成语句

只需按 Enter 或 Tab 键插入建议的单词。单词完成引擎在您编码时学习，并可以根据您声明的变量和成员名称提供建议。例如，图 3-7 展示了编辑器如何建议添加一个名为Test的变量，这个变量之前在代码中声明过。

图 3-7

代码编辑器可以建议代码中声明的标识符

Minimap 模式

有时很难找到光标在源代码文件中的位置，尤其是对于非常长的文件。VSCode 提供了小地图，这是代码编辑器滚动条上源代码文件的一个小预览。图 3-8 提供了一个例子。

图 3-8

小地图允许在滚动条上预览源代码

如果您单击小地图，代码编辑器中可见的源代码部分会在滚动条中突出显示，这样您可以更好地了解光标的当前位置。使用视图 ➤ 显示小地图命令可以禁用和启用小地图。

空白渲染和面包屑

文本编辑器的一个非常常见的特性是显示亮点而不是空白。在 VSCode 中，缩进中的空白是可能的。为此，您选择视图 ➤ 渲染空白。图 3-9 显示了一个如何用圆点替换缩进的空白的例子。对于此图，为了在纸上更好地可视化，使用了日晒浅色主题。

图 3-9

用点呈现缩进空间

只需使用相同的命令返回空白。另一个非常有用的命令是切换面包屑，在视图菜单中可用。使用支持的语言，如 JavaScript、TypeScript、安装了扩展的 C#，该命令在编辑器顶部显示当前代码文件中定义的类型和成员列表，可以展开查看其成员，如图 3-10 所示。

图 3-10

使用面包屑在类型和成员之间导航

单击类型或成员名称会将光标移动到其定义处，并突出显示相关的代码块，从而使代码导航变得更加容易。

减价预览

VSCode 支持 Markdown 语法，用于在非常流行的。md 文件格式。除了语法着色，对于这种特定的语言，VSCode 还提供了文档外观的预览。只需在代码编辑器中按 Ctrl+Shift+V(MAC OS 上为 Cmd+Shift+V)，预览就会出现在单独的窗口中，如图 3-11 所示。

图 3-11

集成降价预览

此功能非常有用，因为它允许您预览文档，而不需要外部程序，如 web 浏览器。

进化的代码编辑

VSCode 是一个非常强大的代码编辑工具，它为跨平台和多语言环境带来了微软 Visual Studio 多年来一直可用的许多功能，提供了所谓的进化代码编辑。本节解释了对于诸如 TypeScript 和 JavaScript 之类的语言，以及安装了适当扩展的 C#、C++和 Python 之类的语言，现成可用的所有高级代码编辑特性。

使用智能感知

IntelliSense 通过在您键入时出现的方便的弹出列表提供丰富的高级单词补全功能。在来自微软的开发者工具中，比如 Visual Studio，IntelliSense 一直是最受欢迎的功能之一，原因就在于它不是简单的单词补全。事实上，IntelliSense 会在您键入时提供建议，显示有关成员的文档(如果有的话),并在每个建议旁边显示一个图标，描述某个单词代表哪种语法元素。图 3-12 显示了使用 C#代码文件时的智能感知。

图 3-12

IntelliSense 在您键入时显示建议和高级单词完成功能

正如你在图 3-12 中看到的，对于给定的类型(在本例中为Console)，智能感知会在你编写时显示可用成员的列表。当您用键盘滚动列表并停留在完成列表中的一个单词上时，VSCode 会显示成员文档。对话框右侧的小箭头可用于关闭文档。

Note

只有开发人员提供了类型或成员的文档，该文档才可用。例如，在 C#中，类型和成员的文档必须提供 XML 注释。这使得 IntelliSense 能够在工具提示中显示它，如图 3-12 所示。

按 Tab 或 Enter 来完成单词插入，或者只需单击。不限于此，VSCode 中的 IntelliSense 支持建议筛选:基于 CamelCase 约定，您可以键入成员名称的大写字母来筛选建议列表。例如，如果您正在处理System.Console类型，并且您键入了cv，建议列表将显示CursorVisible属性，如图 3-13 所示。

图 3-13

智能感知中的建议过滤

IntelliSense 还为代码编辑器中依赖于它的其他高级功能提供了基础，这些功能将在下一小节中介绍。

参数提示

当您编写函数调用时，IntelliSense 还会显示描述每个参数的工具提示。这个特性被称为参数提示，只有在函数参数的文档已经实现的情况下才可用。在图 3-14 中可以看到一个例子。

图 3-14

智能感知显示参数提示

对于 C#和 TypeScript 等语言，或者更一般地说，对于允许函数重载的语言，参数提示显示每个重载的参数说明。您也可以使用向上和向下箭头键滚动重载列表，以选择不同的重载。

带工具提示的内嵌文档

如果将光标悬停在类型、变量和类型成员上，VSCode 会显示一个工具提示，其中包含所选对象的文档。图 3-15 提供了一个例子。

图 3-15

工具提示提供快速、内嵌的文档

与参数提示一样，只有在文档已经实现的情况下，此功能才可用

Note

如果将光标悬停在变量名称上，工具提示将仅显示该变量的类型。

转到定义并查看定义

VSCode 提供了另一个有趣的特性，叫做转到定义。如果您将光标悬停在某个符号上并按下 Ctrl(或 macOS 上的⌘)，该符号会显示为超链接；另外，工具提示显示了声明该符号的代码。如果在按住 Ctrl 键的同时单击类型名称，您将被重定向到定义该类型的代码。图 3-16 显示了当你按住 Ctrl 键并将鼠标悬停在一个类型名上时，代码编辑器是如何出现的。

图 3-16

Ctrl +悬停在某个类型上可以转到定义

如果选择一个类型名称并按 F12，或者右键单击一个类型名称，然后从上下文菜单中选择 Go to Definition ，也可以使用相同的工具。这是一个非常有用的特性，可以让您快速浏览不同代码文件中的类型定义。

Note

对于 C#，转到定义还可以打开由.NET 核心库和任何包含类型定义信息的 NuGet 包，而不仅仅是您的代码。

现在假设您有几十个代码文件，并且想要查看或编辑您当前正在使用的类型的定义。使用其他编辑器，您可能会在代码文件中搜索，这不仅令人讨厌，而且会将您的注意力从原始代码上移开。VSCode 用一个叫做 Peek Definition 的特性出色地解决了这个问题。

你可以简单的右击一个类型名，然后选择peek➤peek definition(键盘快捷键是 alt+F12)；将出现一个交互式弹出窗口，显示定义该类型的代码，不仅提供查看代码的选项，还提供直接编辑的选项。图 3-17 显示了正在运行的 Peek 定义窗口。您可以按 Esc 键快速关闭 Peek 定义窗口，作为单击关闭按钮的替代方法。

图 3-17

使用 Peek 定义处理另一个文件中定义的类型

如您所见,“查看定义”窗口与“查找所有引用”功能非常相似，它仍然在顶部显示定义该类型的文件名。只需单击文件名，在单独的编辑器中打开代码文件。

转到实现并查看实现

有时，您可能需要了解一个接口或抽象类已经实现了多少次以及在哪里实现。

虽然您可以通过查找类型的引用来实现这一点(请参见下一节)，但 VSCode 现在提供了更方便的方法，其工作方式类似于转到定义和查看定义，分别称为转到实现和查看实现。你可以右击一个接口或者抽象类定义，然后选择转到实现或者查看 ➤ 查看实现。这两个操作都会打开一个交互式的嵌套编辑器，在右侧显示所选类型的实现列表，以及第一次出现的实现代码，如图 3-18 所示。

图 3-18

在类型实现中导航

这两个操作的区别如下:使用 Go to Implementation，当您单击列表中的一个实现时，VS Code 会打开一个新的编辑器窗口，指向包含该实现的文件；对于 Peek 实现，当您单击列表中的一个实现时，它会显示在一个交互式弹出窗口中，类似于 Peek 定义的工作方式。

查找参考

您经常需要知道在代码中何处使用了类型或成员，VSCode 提供了两个很好的工具来检索引用。

第一个工具称为“查找所有引用”,如果您有在 Windows 上使用 Visual Studio 的经验，您可能已经熟悉它了。运行这个工具有不同的选项:你可以右击一个类型或成员名，然后选择查找所有引用或者你可以按 Shift+Alt+F12(在 macOS 上是 Option+Shift+F12)。图 3-19 显示了一个基于查找一个叫做Startup的类型的所有引用的例子。

图 3-19

查找类型和成员的所有引用

“引用”面板在屏幕左侧打开，显示按代码文件分组的引用列表，以及引用和涉及的代码文件的总数。它还会在侧栏中添加一个新条目，一旦关闭“参考”面板，该条目将被禁用。事件被突出显示；当您单击其中一个时，将打开一个编辑器，打开包含所选事件的文件，该文件将在代码中突出显示。

还有另一个称为“转到引用”的工具(Shift+F12)，它在活动编辑器窗口中工作。右键单击对象名称，然后选择转到引用，或者单击成员定义顶部的引用数量，即可启用转到引用(参见图 3-19 )。您可以在代码中的任何地方使用第一个选项，而只有当类型或成员定义在代码编辑器中获得焦点时，才可以使用第二个选项。

“转到引用”的用户界面与“查找所有引用”的用户界面相同。VSCode 还提供了另一个用于查找类型和成员引用的有用工具，称为 Peek 引用。右键单击对象名称，然后选择查看 ➤ 查看引用，可以启用该工具。顾名思义，Peek References 显示活动编辑器中的所有参考，在交互式面板内，类似于您之前在 Peek Definition 中看到的内容。图 3-20 显示了一个例子，也是基于找到一个叫做Startup的类型的所有引用。

图 3-20

查找带有 Peek 引用的引用

如果单击右侧列表中的某个匹配项，代码编辑器将打开一个弹出窗口，其中包含找到该匹配项的代码。需要注意的是，这个弹出窗口是交互式的，这意味着您可以直接编辑代码，而不需要单独打开包含代码的文件。这使您能够将注意力集中在代码上，从而节省时间。另外，请注意交互式弹出窗口在顶部显示了包含所选引用的文件名。

与查找所有引用类似的是查找所有实现，这使得查找接口或抽象类的实现变得容易。图 3-21 显示了一个名为IPerson的接口由两个类Person和Employee实现的例子。“查找所有实现”在树视图中显示接口的所有实现，并在代码编辑器中突出显示类定义。

图 3-21

查找所有类型实现

重命名符号和标识符

重命名符号是一项频繁的任务，因此 VSCode 提供了一种方便的方法来完成这项任务。如果您在想要重命名的符号上按 F2 键，或右击并选择重命名符号命令，会出现一个小的交互式弹出框。在那里，您可以在没有任何对话框的情况下编写新名称，将注意力集中在代码上。图 3-22 显示了一个基于符号app的例子。

图 3-22

重命名符号

如果在重命名前按 Shift+Enter，VSCode 会显示符号如何被重命名的预览(参见图 3-22 底部的重构预览选项卡)。选项卡中的工具栏按钮使您能够接受更改(“应用重构”按钮)和拒绝更改(“放弃重构”按钮)。

通过按 Enter 键，该符号的所有引用将被相应地重命名。此外，您可以重命名标识符的所有出现。你只需右击标识符，然后选择更改所有事件(或者在 Windows/Linux 上按 Ctrl+F2，在 macOS 上按⌘+f2)；所有事件都将高亮显示，并在您键入时用新名称更新。

实时代码分析

有了 C#、TypeScript 和可以通过 Python 等扩展增强支持的语言，VSCode 可以在您键入时检测代码问题，提出修复建议并提供代码重构。这是该工具中最强大的特性之一，这是大多数其他代码编辑器中所没有的。接下来的示例基于 C#编程语言，因为它(和 TypeScript 一起)支持 VSCode 中最丰富的体验，因此讨论可用的强大编码功能是一个不错的选择。当然，这里讨论的所有内容都适用于支持相同增强特性的所有其他语言。

根据代码问题的严重程度，VSCode 用曲线给需要您注意的代码段加下划线。绿色曲线表示警告；红色曲线表示必须修复的错误。如果您将鼠标悬停在带有曲线的线条或符号上，您会看到描述该问题的工具提示。图 3-23 显示了两个代码问题，一个是绿色曲线(一个未使用的局部变量)，另一个是红色曲线(一个不存在的符号)。

图 3-23

键入时检测代码问题

键入时会检测到代码问题，这些问题也会在“问题”面板中列出。再次查看图 3-23 ，注意灯泡形状的图标。这个图标是一个叫做灯泡的工具的快捷方式。单击该图标时，VSCode 会显示当前上下文可能的代码修复。例如，图 3-24 显示了灯泡提供的建议，以修复红色波浪线下划线的缺失符号。

图 3-24

电灯泡建议的潜在解决方案

在这种特殊情况下，编辑器建议了五个选项:创建字段、创建只读字段、创建属性、创建局部变量或创建参数。在这种特殊情况下，将按如下方式创建一个字段:

private static bool welcomeMessage;

将会生成如下属性:

public static bool welcomeMessage { get; private set; }

可能bool不是您在这里期望的类型，但是 VSCode 没有足够的信息来推断不同的类型，所以它将基于方法的第一个重载接受的类型参数生成一个类型，这是bool的WriteLine。但是，当代码包含一些 VSCode 可以用来理解正确类型的信息时，它会生成预期类型的属性、字段、局部变量和参数。有了电灯泡，动态生成类型也变得更加容易。图 3-25 显示了一个基于名为person的对象的例子，其类型尚未定义。正如您所看到的，对于这个上下文，代码编辑器显示了一个更大的可能修复列表，包括在当前文件或一个单独的文件中生成一个新类，包括嵌套类的选项。

图 3-25

动态生成类型

灯泡还可以帮助你重构代码，让代码更整洁。例如，你可以点击任何一个using指令(或者其他语言中的等效指令)，当灯泡出现时，你可以看到它是如何提供移除未使用代码的，如图 3-26 所示。

图 3-26

代码重构变得简单

实际上，灯泡工具提供了更多的能量。假设您想要创建一个实现IDisposable接口的类。如图 3-27 所示，代码编辑器找不到该接口的定义，并显示一条红色曲线，但是灯泡提供了快速修复该问题的快捷方式。例如，它建议添加一个using System;指令，这是代码所需要的。

图 3-27

添加缺失的指令

此时，IDisposable仍然带有红色的下划线，因为代码还没有实现接口。当在类型的使用上检测到代码问题时，您可以将光标悬停在带下划线的代码上，并看到一个信息工具提示，如图 3-28 所示。

图 3-28

关于代码问题的信息工具提示

当您将光标从问题上移开时，工具提示会消失，但是您可以单击查看问题并将错误描述停靠在代码编辑器中的红色框内。如果你的灯泡还亮着，你会看到代码编辑器如何根据当前的上下文给出潜在的修复建议，比如用不同的方式实现接口(见图 3-29 )。

图 3-29

灯泡根据当前环境提供建议

为了让您了解这个工具的强大之处，如果您选择了带有 Dispose pattern 选项的 Implement interface，下面是生成的代码:

using System;

public class Person: IDisposable
{
    #region IDisposable Support

    private bool disposedValue = false; // To detect redundant calls

    protected virtual void Dispose(bool disposing)
    {
        if (!disposedValue)
        {
            if (disposing)
            {
                // TODO: dispose managed state (managed objects).
            }

            // TODO: free unmanaged resources (unmanaged objects)
            // TODO: set large fields to null.
            disposedValue = true;
        }
    }

    // // TODO: override a finalizer only if Dispose(bool disposing) above has code to free unmanaged resources.
    // ~Person() {

        // Do not change this code. Put cleanup code in Dispose(bool disposing) above.
        // Dispose(false);
    // }

    // This code added to correctly implement the disposable pattern.
    public void Dispose()
    {
        // Do not change this code. Put cleanup code in Dispose(bool disposing) above.
        Dispose(disposing: true);
        GC.SuppressFinalize(this);
    }
    #endregion
}

如果您选择其他可能的代码修复，您会得到类似的结果，但是实现不同。虽然不可能显示 VSCode 可以应用的所有代码修复的示例，但您必须记住的是，建议和代码修复是基于代码问题的上下文的，这是一个非常强大的功能，使 VSCode 成为一个独特的编辑器。

摘要

VSCode 是一个以代码为中心的工具，它支持各种现成的语言，提供了所有受支持语言通用的编码功能，如语法着色、分隔符匹配、代码块折叠、多指针、代码片段和代码完成。

此外，TypeScript 和 C#等语言通过 IntelliSense、Go to Definition 和 Peek Definition、Find All References 以及极其强大的灯泡等集成工具提供了所谓的进化代码编辑体验，这些工具可以在您键入时检测代码问题，并根据上下文提出潜在的修复建议。

既然你已经了解了 VSCode 所提供的强大的编码特性，那么在第四章中，是时候看看如何在单独的源代码文件和结构化文件夹中使用它们了。

四、使用文件和文件夹

作为功能强大的编辑器，VSCode 提供了一种处理包含松散文件和项目的代码文件和文件夹的便捷方式。在本章中，你将学习如何处理单个文件、包含源代码文件的文件夹以及工作区。您还将了解 VS Code 独立于专有项目系统，以及它对一些流行项目类型的内置支持。

VSCode 和项目系统

VSCode 是基于文件和文件夹的。这意味着您可以单独打开一个或多个代码文件，但也意味着您可以打开一个包含源代码文件的文件夹，并以结构化、有组织的方式处理它们。当您打开文件夹时，VSCode 会搜索下列文件之一，以组织文件夹中文件列表的结构化视图:

• Tsconfig.json 文件

• Jsconfig.json

• Package.json

• Project.json

• 。和的 sln Visual Studio 解决方案。的 csproj 项目文件。安装了 C#扩展的. NET

如果 VS 代码找到了这些文件中的一个，它就能够将文件结构组织成一种方便的编辑体验，并且可以提供额外的丰富的编辑功能，比如智能感知和代码重构。如果一个文件夹只包含源代码文件，没有任何上述内容。json 或者。sln 文件，它仍然会打开并显示该文件夹中的所有源代码文件，提供了一种在所有源代码文件之间切换的便捷方式。本章描述如何在 VSCode 中使用单个文件和文件夹，有关它如何管理项目的更多详细信息将在“使用文件夹和项目”小节中提供

使用单个文件

开始编辑 VSCode 的最简单方法是使用一个代码文件。你可以用文件 ➤ 打开打开一个已有的支持的代码文件(macOS 上的 Ctrl+O 或⌘+O)。VSCode 自动检测代码文件的语言，并启用适当的编辑功能。此外，它还会检查市场上是否有针对所选语言的扩展，如果有，它会提供安装以改善编辑体验。当然，你当然可以通过按 Ctrl+Tab(或者 macOS 上的^+Tab)打开更多的文件，轻松地在文件之间切换。如图 4-1 所示，一个方便的弹出框显示了打开的文件列表；通过按 Ctrl+Tab，您可以浏览文件并在列表中的文件之间循环，当您释放这些键时，选定的文件将成为活动的编辑窗口。

图 4-1

在打开的编辑器之间快速导航

只需点击每个选项卡右上角的关闭按钮，或者使用文件 ➤ 关闭编辑器即可关闭编辑器。您也可以使用右上角选项中 … 快捷方式下的关闭所有命令快速关闭所有打开的编辑器。

Note

在 VSCode 术语中，通常将打开的文件称为活动编辑器或打开的编辑器。这是因为编辑器窗口不限于代码文件，还可以显示文档文件或提供其他类型文件(例如，图像和电子表格)内容的格式化预览。

创建文件

创建新文件有几种方法:

• Via 文件 ➤ 新文件

• 通过按 ctrl+n(MAC OS 上的⌘+N)

• 通过使用欢迎页面上的新文件快捷方式

• 当文件夹当前打开时，点击浏览器栏中的新文件按钮

默认情况下，新文件被视为纯文本文件。要更改新文件的语言，单击状态栏右上角微笑图标附近的选择语言模式项。在这种情况下，您将看到纯文本作为当前模式，因此单击它。如图 4-2 所示，你会看到一个支持语言的列表，你可以从中选择当前文件的新语言。您也可以开始键入语言名称来过滤列表。

图 4-2

为新文件选择语言

当您选择一种新语言时，选择语言模式项会用当前语言更新，编辑器会启用所选语言的支持功能，如语法着色、单词补全和代码片段。

显然，您可以更改任何打开的代码文件的语言，而不仅仅是新文件。

文件编码、行终止符和行浏览

VSCode 允许您为新文件和现有文件指定编码。新文件的默认编码是 UTF-8。您可以通过点击状态栏中的选择编码项来更改当前编码(在前面的图中，它用 UTF-8 表示，即当前编码)。首先要求你在用编码重新打开和用编码保存之间选择一个动作。单击第一个选项，会出现一个支持编码的长列表和一个搜索框，您可以在键入时过滤列表(参见图 4-3 )。

图 4-3

选择文件编码

类似地，您可以通过点击选择行序列结束项来更改行终止符(在前面的图中它由 CRLF 表示)。VSCode 支持 CRLF(回车和换行符)和 LF(换行符)，默认选择是 CRLF。在 Windows 上，默认序列是 CRLF，而在 macOS 和 Linux 上是 LF。您也可以通过点击转到第行项目，快速移动到一行代码，由状态栏中的行号/列组表示。这将打开一个搜索框，您可以在其中键入您想要转到的行号，并且在您键入时该行代码会立即突出显示(参见图 4-4 )。按 Enter 键时，光标会移动到选定行的开头。

图 4-4

快速移动到特定代码行用 转到行

使用文件夹和项目

与其他开发环境(如 Microsoft Visual Studio)不同，VSCode 是基于文件夹的，而不是基于项目的。这使得 VSCode 独立于专有的项目系统。VS 代码可以打开磁盘上包含多个代码文件的文件夹，并在环境中以最佳方式组织它们，它还支持各种项目文件。更具体地说，当您打开一个文件夹时，VS 代码首先搜索以下内容:

• MSBuild 解决方案文件(。sln) :在这种情况下，VS 代码期望找到一个由 C#项目构成的. NET 核心解决方案，所以扫描引用的项目(*。csproj 文件)并以适当的方式组织文件和子文件夹。请记住，VS 代码需要安装 Microsoft C#扩展来正确处理解决方案文件。注意 VS 代码可以打开任何。sln 解决方案，但目前仅提供对的全面支持.NET 核心。这种情况的一个例子将在第八章中提供。

• tsconfig.json 文件:如果找到了，VS Code 知道这些代表了 TypeScript 项目的根，所以它扫描被引用的文件并提供正确的文件和文件夹表示。

• jsconfig.json 文件:如果找到了，VS 代码知道这些代表了一个 JavaScript 项目的根。因此，类似于 TypeScript，它扫描引用的文件并提供正确的文件和文件夹表示。

• package.json 文件:这些文件通常包含在 JavaScript 项目和.NET 核心项目，所以 VS 代码会根据文件夹的内容自动解析项目类型。

• project.json 文件:如果找到，VS 代码会把这个文件夹当作一个. NET 核心项目。

Note

打开一个. sln，。csproj 或。json 文件将直接导致编辑单个文件的内容。因此，您必须打开文件夹，而不是解决方案或项目文件。

额外的项目系统可以通过可扩展性来支持。如果找不到任何受支持的项目，VSCode 会将文件夹中的所有代码文件作为松散的组合加载，将它们组织到一个虚拟文件夹中，以便于导航。现在让我们通过相应的示例来探索如何在 VSCode 中使用文件夹和支持的项目。

打开文件夹

您可以通过文件 ➤ 打开文件夹或通过欢迎页面上的打开文件夹快捷方式打开文件夹。您还可以将文件夹名称从 Windows 资源管理器或 macOS Finder 拖放到 VSCode 中。

Note

在 Windows 上，VS 代码安装程序还提供了一个选项，当您在文件资源管理器中右键单击文件夹或文件名时，可以启用一个名为的快捷方式，用代码打开。

无论您打开哪个文件夹，VS Code 都会在浏览器栏中创建一个结构化视图，其中显示属于主文件夹的所有文件和子文件夹。图 4-5 显示了一个基于 TypeScript 项目的例子。

图 4-5

资源管理器中文件和文件夹的结构化视图

根容器是文件夹名称。嵌套您可以看到文件和子文件夹，您可以展开每个子文件夹来浏览它包含的每个文件。只需点击一个文件打开一个编辑器窗口。

正在打开。网络解决方案

当您打开包含基于 MSBuild 项目系统的. NET 解决方案的文件夹时。sln 文件)或 C#项目(。csproj 文件)，VSCode 将所有代码文件组织到浏览器栏中，并启用 C#的所有可用编辑功能。图 4-6 显示了一个例子。

图 4-6

a.NET 解决方案在 VSCode 中打开

请注意，资源管理器中的根级别是项目名称。您可以浏览文件夹、浏览代码文件以及编辑 VSCode 可以正确识别的任何内容。值得一提的是，VS 代码当然可以打开任何 MSBuild 解决方案，不仅仅是.NET 核心解决方案，但它只能运行和调试.NET 核心应用，而不是.NET 框架解决方案。例如，最新版本的.NET Core 允许创建 Windows 演示基础(WPF)和 Windows 窗体项目；VSCode 和 C#扩展支持打开这种类型的解决方案以及运行和调试代码。为创建的 WPF 和 Windows 窗体项目.NET Framework 仍然可以在 VS 代码中打开，您仍然可以从浏览器栏中的结构化文件夹视图和完整的 C#语言支持中受益，但您将无法构建、运行和调试代码。相反，用.NET Core 还集成了调试支持，允许直接在 VS 代码中运行、调试和测试代码。这将在第九章中讨论。

打开 JavaScript 和 TypeScript 项目

类似于.NET 核心解决方案，VSCode 可以通过搜索 jsconfig.json 或 package.json 文件来管理 JavaScript 文件夹。如果找到，代码以适当的方式组织文件夹和文件的列表，并为它支持的所有文件启用所有可用的编辑功能，如图 4-7 所示。

图 4-7

在 VSCode 中打开的 JavaScript 项目

TypeScript 项目的行为与 JavaScript 的行为相同，只是 VSCode 搜索名为 tsconfig.json 的文件作为根。

打开松散的文件夹

VSCode 支持打开包含不相关的松散文件组合的文件夹。VS 代码基于文件夹名创建一个逻辑根目录，显示文件和子文件夹。图 4-8 显示了一个基于名为 MyFiles 的示例文件夹的示例，该文件夹包含不同语言的文件。

图 4-8

包含各种松散文件的文件夹

有了这个选项，您基本上可以在 VS 代码中打开任何文件夹并编辑所有支持的文件，利用每个文件单独的代码编辑特性。

使用工作空间

VSCode 有一个工作空间的概念。工作区可以被认为是文件夹的逻辑容器。

Note

如果您有使用 Microsoft Visual Studio 的经验，可以将 VSCode 中的工作区比作作为项目容器的 Visual Studio 解决方案。

工作区对于将多个项目和/或文件夹组织到一个地方非常有用。例如，您可能有一个. NET 核心 Web API 项目、一个使用此类 API 的 JavaScript 应用和一个包含文档的文件夹。您可以将它们放在同一个工作区中，并同时在 VSCode 中使用它们，而不是分别处理每个文件夹。图 4-9 显示了一个名为 SampleWorkspace 的工作区，它包括一个. NET 核心 Web API 项目、一个 JavaScript 项目和一个松散文件夹。

图 4-9

一个工作区可以将多个项目和文件夹分组到一个逻辑容器中

multeor-master 文件夹包含一个名为 multeor 的示例开源项目的文件，您可以从 https://github.com/filidorwiese/multeor 下载用于教学目的。浏览器栏用大写字母显示了工作区的名称和**(工作区)**文字，这样更容易识别。在接下来的部分中，我将更详细地解释如何创建和打开工作区，以及工作区文件的结构是什么。

创建工作区

无论是否已经打开了文件夹，您都可以创建工作区。如果你已经打开了一个文件夹，选择文件 ➤ 将工作区另存为，VS Code 会要求你为新的工作区指定位置和文件名。一个工作区由一个 JSON 文件来表示。代码工作空间扩展，它的结构将很快解释。

工作区名称只是没有。codeworkspace 扩展，并显示在浏览器栏中(参见图 4-9 )。然后您可以通过选择文件 ➤ 将文件夹添加到工作区来将其他文件夹添加到工作区。添加的文件夹显示在工作区根目录下的浏览器栏中。

如果您还没有打开任何文件夹，您可以从文件 ➤ 将工作区另存为开始，或者从文件 ➤ 将文件夹添加到工作区开始。对于第一个选项，基本上是创建一个带有名称的空工作区，然后按照前面的描述添加文件夹。使用第二个选项，您可以从现有文件夹开始创建一个空的、无标题的工作区。在这种情况下，实际上，浏览器栏显示 UNTITLED (WORKSPACE) 作为新的工作空间名称。当您按照上文所述保存工作区时，浏览器栏会显示基于工作区文件名的新名称。请记住，工作区只是逻辑容器，不会以任何方式影响项目和文件夹的结构或行为。

Note

添加到工作区的文件夹可以在磁盘上的任何位置；VSCode 会将它们的内容分组到工作区根目录下，让您可以像在同一位置一样工作。

打开现有工作区

您可以通过文件 ➤ 打开工作区打开一个已有的工作区。您还可以将工作区文件名从操作系统的文件浏览程序拖放到 VSCode 图面上。直接打开. code-workspace 文件只会导致查看文件内容，而不会打开工作区。同样，打开包含. code-workspace 文件的文件夹会导致只打开文件夹，而不是工作区。您只能使用本段开头描述的特定命令。

工作空间结构

VSCode 工作区的信息存储在扩展名为. code-workspace 的文件中。工作空间文件是一个 JSON 文件，其根元素叫做folders。这是一个由path元素组成的数组，每个元素都被赋予一个包含在工作区中的文件夹的名称。以下 JSON 标记表示图 4-9 中所示示例的工作空间文件在我的机器上的外观，并且在您的计算机上会有所不同:

{
    "folders": [
        {
            "path": ".\MyFiles"
        },
        {
            "path": "C:\\Source\\webapp"
        },
        {
            "path": "C:\\Source\\multeor-master"
        }
    ]
}

请注意，只有当文件夹不在工作区文件的相同位置时，才会提供文件夹的完整路径名。在这种情况下。代码工作区文件、webapp 文件夹和 multeor-master 文件夹都在同一位置；相反，MyFiles 文件夹位于不同的文件夹下。如果您想亲自查看工作区文件的结构，您可以通过文件 ➤ 打开文件在 VSCode 中打开它。

摘要

VSCode 基于文件和文件夹，它允许处理单个文件以及包含源代码文件的文件夹，并以结构化、有组织的方式处理它们。

VSCode 还支持许多项目系统，如.NET Core、TypeScript 和 JavaScript，它允许创建和管理工作区。工作区是文件夹的逻辑容器，使得在同一个可视根目录下拥有多个项目和文件夹变得容易。VS Code 不仅是一个非常强大的代码编辑器，而且是一个非常灵活的环境，可以通过多种方式进行定制。定制是下一章的主题。

五、自定义 VSCode

VSCode 是一个非常通用的开发工具，可以通过多种方式进行自定义和扩展。事实上，您可以自定义它的外观、代码编辑器和快捷键，使您的编辑体验变得非常个性化。

此外，您可以安装第三方扩展，如新语言、调试器、主题、linters 和代码片段。本章解释如何自定义 VSCode，解释自定义和扩展之间的区别。然后，在下一章，你将学习如何使用扩展。

解释了定制和扩展

您可以通过自定义和扩展来个性化 VSCode 的环境。不同之处在于，扩展添加了新的工具，或者它们向工具添加了功能，或者改变了现有功能的行为。为默认情况下没有智能感知的语言实现智能感知、向状态栏添加命令以及添加自定义调试器都是扩展的示例。

相反，自定义与环境设置相关，并不为工具添加功能。常见的自定义示例有颜色主题和按键绑定。表 5-1 总结了 VS 代码中的定制和扩展。

表 5-1

自定义和扩展

|

特征

|

描述

|

类型

| | --- | --- | --- | | 颜色主题 | 用不同的颜色设计环境布局。 | 用户化 | | 用户和工作区设置 | 指定环境首选项。 | 用户化 | | 按键绑定 | 重新定义键盘快捷键。 | 用户化 | | 语言语法和语法着色程序 | 使用语法着色程序添加对其他语言的支持。 | 用户化 | | 代码片段 | 添加 TextMate 和 Sublime 文本片段，更快地键入重复代码。 | 用户化 | | 调试器 | 为特定的语言和平台添加新的调试器。 | 延长 | | 语言服务器 | 为在 VS 代码中打开的文件实现您的验证逻辑。 | 延长 | | 激活 | 当检测到特定文件类型或在命令选项板中选择命令时，加载扩展名。 | 延长 | | 编者ˌ编辑 | 处理代码编辑器的内容，包括文本操作和选择。 | 延长 | | 工作空间 | 增强状态栏、工作文件列表和其他工具。 | 延长 | | 事件 | 与 VS 代码的生命周期事件交互，比如打开和关闭。 | 延长 | | 进化编辑 | 使用 IntelliSense、查看定义、转到定义和所有支持的高级编辑功能来改进语言支持。 | 延长 |

在本章中，您将看到如何通过更改现有的首选项来自定义 VSCode。然后在下一章中，您将看到如何安装扩展，包括向开发环境添加新的定制的扩展，比如主题和键绑定。

自定义 VSCode

在本节中，您将发现通过浏览表 5-1 中描述的定制类型来定制 VSCode 是多么容易。

主题选择

您可以在几个主题中进行选择，以赋予 VSCode 不同的外观和感觉。在第一章的开始已经给出了颜色主题的简要介绍，但是现在你会得到更多的细节。

你可以用文件 ➤ 偏好设置 ➤ 颜色主题或者通过点击设置按钮然后颜色主题来选择颜色主题。可用颜色主题的列表显示在命令调色板中，如图 5-1 所示。

图 5-1

选择主题

主题分为浅色主题、深色主题和高对比度主题。一旦您选择了不同的颜色主题，它会立即应用。此外，当你用键盘滚动列表时，你可以预览主题。图 5-2 展示了应用于 VS 代码的黑暗(Visual Studio)主题，这是一个非常受欢迎的选择；尝试其他主题，找到适合自己的主题。

图 5-2

应用于 VSCode 的黑暗(Visual Studio)主题

正如您所料，应用主题还会影响代码编辑器中使用的颜色，以便达到适当的亮度和对比度平衡。在下一章，你将看到如何安装额外的主题作为扩展。

定制环境

在大多数应用中，包括其他 ide，您可以通过一个方便的用户界面来设置环境设置和参数，VS 代码也不例外。有两种不同类型的设置:用户设置和工作空间设置。用户设置全局应用于开发环境，而工作区设置仅应用于当前项目或文件夹。以下小节涵盖了用户设置和工作区设置。

了解用户设置

用户设置全局应用于 VS 代码的开发环境。通过选择文件 ➤ 首选项 ➤ 设置来完成定制用户设置。当你这样做时，设置编辑器出现，如图 5-3 所示。

图 5-3

使用用户设置

在编辑器的左侧，设置按类别分组。在搜索设置栏中，你可以根据你输入的内容快速搜索设置，还可以看到找到的设置总数，这取决于 VS 代码的版本和你安装的扩展的数量。您可以手动展开设置类别，也可以滚动设置列表，相关类别会在您滚动时自动高亮显示。例如，您可以通过定位并选择功能类别下的浏览器来控制浏览器栏的行为，并在那里更改当前设置，如图 5-4 所示。

图 5-4

更改用户设置

类似地，您可以更改文本编辑器、整个应用和扩展设置的设置和首选项。事实上，允许定制参数的扩展将它们的设置存储在与 VS 代码相同的位置，这样你就有了一个独特的设置编辑器。有数百种设置，数量根据您的配置和安装的扩展而有所不同，因此不可能在此列出所有设置。有关可用设置的更多详细信息，请访问官方文档( https://code.visualstudio.com/docs/getstarted/settings )。

幕后:settings.json 文件

在后台，VS 代码(和扩展)将设置存储在一个名为 settings.json 的文件中。

了解该文件的工作原理很重要，因此单击位于搜索栏上方的打开设置(JSON) 按钮，该按钮由一个带有加号的表单图标表示(从左到右第一个)。图 5-5 显示了编辑器此时的样子。

图 5-5

使用 settings.json 文件

如您所见，settings.json 的编辑器允许您通过覆盖一个或多个默认设置来定义自定义设置。值得一提的是，您在这个文件中所做的更改只是在用户或工作区级别，并不影响 VS 代码的一般设置。图 5-5 显示了如何更改主题、如何控制白色字符、如何在代码编辑器中控制字符和面包屑以及如何启用小地图模式的示例。此外，您将看到 IntelliSense 如何在您键入时帮助您在可用设置中进行选择。代码编辑器还会报告错误，比如缺少逗号或花括号，这是您在编辑 JSON 文件时会想到的。在图 5-5 中，您还可以看到为扩展定制设置是可能的:我的机器上安装了 Microsoft SQL Server 扩展，settings.json 允许指定扩展设置，如服务器地址和凭证。每次在用户界面中修改设置时，settings.json 中的相关 JSON 都会更新。

IntelliSense 还允许您通过单击鼠标悬停来获取有关给定设置的更多信息，鼠标悬停会通过方便的工具提示显示有关设置的提示，正如您在第三章中了解 IntelliSense 功能后所期望的那样。完成后，不要忘记保存 settings.json 否则您的更改将会丢失。

一个真实的例子:使用代理

如果你为企业工作，网络可能在代理服务器后面。在这种情况下，您或系统管理员可能需要配置 VSCode 来使用代理。否则，您将无法下载软件包、扩展和产品更新。VSCode 应该自动检测代理并询问您的凭据，但这并不总是发生，因此您可能需要采取一些手动步骤。

首先要做的是确保表 5-2 中描述的站点在防火墙的允许应用列表中。

表 5-2

防火墙允许的站点

|

统一资源定位器

|

描述

| | --- | --- | | update.code.visualstudio.com | VSCode 下载和更新服务器 | | code.visualstudio.com | VSCode 文档 | | go.microsoft.com | Microsoft 链接转发服务 | | vscode.blob.core.windows.net | VSCode 的 Blob 存储 | | marketplace.visualstudio.com | Visual Studio 市场 | | *.gallery.vsassets.io | Visual Studio 市场 | | * . gallerrycdn . vsassets . io .中 | Visual Studio 市场 | | rink.hockeyapp.net | 崩溃报告服务 | | bingsettingssearch.trafficmanager.net | 产品内设置搜索 | | vscode.search.windows.net | 产品内设置搜索 | | raw.githubusercontent.com | GitHub 存储库原始文件访问 | | vsmarketplacebadge.apphb.com | Visual Studio 市场徽章服务 | | az764295.vo.msecnd.net | 用于 VSCode 下载的内容交付网络(CDN) | | download.visualstudio.microsoft.com | Visual Studio 下载服务，包括对 C#和 C++等扩展的依赖 |

下一步是配置 VS 代码来使用代理。实际上，如果已经在系统级定义了http_proxy和https_proxy环境变量，VS 代码就会使用它们的值。如果没有设置这些变量，您必须在用户设置中提供代理地址。在设置编辑器中，在应用类别下找到代理。然后，如图 5-6 所示，在代理文本框中输入代理地址。

图 5-6

配置 VS 代码在代理服务器后面工作

如果您的代理还需要授权头，这必须在 settings.json 文件中指定，因此您必须单击 settings.json 中的编辑超链接，然后输入网络管理员提供的值作为http.proxyAuthorization键的值。此外，如果证书应根据提供的证书颁发机构列表进行验证，请选中代理严格 SSL 复选框。

保存您的更改并检查 VSCode 是否能够下载某些语言所需的扩展、包和库以及产品更新。如果您仍然遇到网络问题，您应该请网络管理员帮助您配置代理设置。

Note

一些保护程序(如 Symantec Endpoint Protection)会阻止一些 VSCode 安装(和更新)文件，因为它们被识别为 CryptoLocker 病毒实例。显然，这些都是误报，但是您可能需要与网络管理员联系，以查看 VSCode 的保护规则。

隐私设置:遥测

默认情况下，VSCode 匿名收集并向 Microsoft 发送有关使用、错误和崩溃的信息。您可以通过将用户设置滚动到位于应用类别下的遥测组来禁用这些遥测设置中的一个或多个(参见图 5-7 )。

图 5-7

在 VSCode 中管理遥测

启用崩溃报告器选项允许向微软发送崩溃报告，而启用遥测允许发送使用数据和错误。隐私策略的快捷方式也是可用的，我建议您在启用一个或两个选项之前阅读它。

同步设置

在第一章中，您了解到 VSCode 允许跨不同安装同步设置。通过应用类别下的设置同步组，您可以完全控制可以同步的项目。

您可以决定同步哪些扩展，不同步哪些扩展，可以从同步中排除特定设置，还可以禁用或重新启用键绑定同步。除了后者(通过一个简单的复选框管理)之外，您需要在 settings.json 文件中进行更改。忽略的扩展和忽略的设置超链接使您能够分别编辑关于扩展和常规设置的特定设置块。如前所述，IntelliSense 将帮助添加可用设置。图 5-8 显示了一个例子，但是请记住，可用的设置可能在您的机器上有所不同，尤其是取决于您已经安装的扩展。

图 5-8

IntelliSense 帮助管理同步设置

了解工作空间设置

与全局应用于 VS 代码环境的用户设置不同，工作区设置应用于当前工作区和工作区中的文件夹。这意味着，您首先需要打开一个现有的工作区，或者将一个现有的文件夹添加到一个新的工作区，以定制工作区设置。

接下来你仍然选择文件 ➤ 偏好设置 ➤ 设置。此时，设置编辑器显示三个选项卡:一个用于用户设置，一个用于工作区设置，一个用于工作区内的单个文件夹，如图 5-9 所示。

图 5-9

自定义工作区设置

您可以像自定义用户设置一样自定义工作区和文件夹设置，因此在设置编辑器中不仅有第二个视图，还有另外两个 JSON 文件，您可以在其中指定您的首选项。更具体地说，工作区设置存储在。code-workspace 文件(可以在资源管理器中看到)，而文件夹设置存储在 settings.json 文件中。那个。code-workspace 文件保存在 workspace 文件夹下，settings.json 保存在。VSCode 在打开的文件夹中创建的 vscode 子文件夹，将设置的可用性限制为仅在当前文件夹中可用。

自定义键盘快捷键

VSCode 包括大量的键盘快捷键，您可以用自定义值重写这些快捷键。如果您习惯于使用其他开发工具，并且希望在 VSCode 中使用相同的键盘快捷键，这将非常有用。

Note

在下一章，你将学习如何下载现成的键盘快捷键，这将节省你很多时间，但首先重要的是你要知道他们实际上是如何工作的。

像用户和工作区设置一样，键盘快捷键用 JSON 标记表示，每个快捷键由两个元素组成:key，它存储一个或多个与动作相关联的键，以及command，它表示要调用的动作。在某些情况下，VS 代码可能为不同的场景提供相同的快捷方式。这是 Esc 键的典型情况，它针对许多操作，具体取决于您正在处理的内容，如代码编辑器或工具窗口。为了识别正确的动作，键盘快捷键设置支持 when 元素，该元素根据上下文指定正确的动作。选择文件 ➤ 首选项 ➤ 键盘快捷键可以快速获得当前键盘快捷键列表。此时，VSCode 显示了一个格式良好的命令和快捷键列表，如图 5-10 所示。

图 5-10

当前键盘快捷键列表

要自定义键盘快捷键，您只需点击位于窗口右上角的打开键盘快捷键按钮，该按钮由一个带有加号的工作表图标表示。这将打开 keybindings.json 文件，在这里您可以用自定义快捷键覆盖默认快捷键(参见图 5-11 )。

图 5-11

添加键盘快捷键

Note

请记住，VSCode 有(并允许自定义)不同的默认键盘快捷键，这取决于它运行的操作系统。

您可以通过点击 Define Keybinding 按钮或使用按钮文本中建议的快捷键(因您的操作系统而异)来快速添加自定义键盘快捷键。当你这样做时，会出现一个弹出框，要求你指定键盘快捷键，如图 5-11 所示。

当你按回车键时，新键盘快捷键的 JSON 标记被添加，如图 5-12 所示。

图 5-12

编辑新的键盘快捷键

您需要使用您想要映射的命令以及针对哪个场景来编辑command和when元素。此外，当手动编辑 keybindings.json 时，您需要为旧的快捷方式和新的快捷方式提供标记。例如，假设您想用 Shift+Alt+O 替换 C/C++扩展的 Alt+O 快捷方式(开关:头/源)，您需要编写的标记如下所示:

{
    "key": "shift+alt+o",
    "command": "C_Cpp.SwitchHeaderSource",
    "when": "editorTextFocus && editorLangId == 'cpp'"
},
{
    "key": "alt+o",
    "command": "-C_Cpp.SwitchHeaderSource",
    "when": "editorTextFocus && editorLangId == 'cpp'"
}

实际上，when元素是可选的。将更改保存到 keybindings.json 文件，以准备好新的键盘快捷键。

摘要

VSCode 使您能够进行多种自定义，这将有助于您感觉宾至如归，尤其是如果您习惯于使用其他开发工具或代码编辑器。您可以从列表中选择不同的颜色主题，可以自定义全局或特定文件夹的环境设置，甚至可以创建自定义键盘快捷键。

但非常好的消息是，定制也可以作为扩展下载，以及新的语言、调试器和工具。扩展性将在下一章讨论。

六、安装和管理扩展

扩展性是 VSCode 中的关键功能之一，因为您可以添加工具、语言、代码段、调试器、键绑定和主题。扩展性在语言领域尤其有益，因为 VSCode 使您能够使用特定的语法支持来扩展代码编辑器，这些语法支持还可以包括 IntelliSense、代码段和代码重构。

这一切都意味着 VSCode 对任何平台上的任何语言和任何工具都有开放的支持，为无限的开发场景提供了可能性。本章解释了如何查找和安装扩展，以及如何在您的系统上管理扩展。

安装扩展

您有两种浏览和安装扩展的方式:从 Visual Studio 市场和从 VSCode 中。Visual Studio Marketplace 是一个包含最流行的 Microsoft 开发工具和服务的扩展的网站，如 Visual Studio、VSCode 和 Azure DevOps。在 https://marketplace.visualstudio.com 有，需要点击 VSCode 标签才能看到 VSCode 的扩展列表。图 61 显示了 VSCode 的市场。

图 6-1

Visual Studio 市场

您可以通过在搜索框中键入内容来搜索扩展，也可以浏览下面的组，如“特色”、“趋势”、“最受欢迎”和“最近添加的”。如果您滚动到页面底部，还可以按类别或集合浏览扩展。找到您感兴趣的扩展后，单击其名称可查看详细页面。图 6-2 显示了一个基于微软 C#扩展的例子。

图 6-2

扩展的详细信息页面

扩展的页面提供了关于使用扩展的详细描述和指导，通常提供到附加文档、资源和源代码(如果是开源的)的链接。我强烈建议您阅读详细信息页，以获得有关该扩展包括哪些内容的信息，尤其是添加了语言支持的扩展，因为了解是只支持新语法还是还支持 IntelliSense、代码片段和调试非常重要。

如果你点击安装按钮，你的浏览器会要求你确认打开 VSCode 的下载链接。当这开始时，扩展将被自动安装。您也可以下载扩展的离线安装程序，以便以后重用。为此，点击页面右侧资源组下的下载扩展超链接。这样，您将能够下载一个. vsix 安装程序文件，然后可以手动启动该文件。

Note

如果您有使用 Microsoft Visual Studio 开发环境的经验，您可能知道 VSIX 是 Microsoft 用于扩展安装程序文件的格式。但是，VSCode 的 VSIX 格式并不相同。VSCode 的扩展与一个名为 vsce 的工具打包在一起，不能与 Windows 上的 Visual Studio 2019 或 Mac 上的 Visual Studio 一起使用。

安装扩展的第二种方式是在 VSCode 中。您可以打开扩展栏并搜索一个扩展，然后单击特定的扩展以获取详细信息，如图 6-3 所示。

图 6-3

从 VSCode 中安装扩展

准备就绪后可以点击安装按钮。您需要点击 Reload 按钮(一旦安装完成就会出现)来启用 VS 代码中的扩展。您还可以筛选搜索结果；例如，如果在搜索框中键入 category:linters，VSCode 将列出所有为特定语言提供语法着色的林挺支持的扩展。您可以使用在 Visual Studio 市场中看到的相同类别名称。

或者，您可以使用命令面板来下载(和管理)扩展。打开命令面板，输入ext，会出现一个与扩展管理相关的不言自明的命令列表。当您不想失去活动编辑器窗口的焦点时，您通常会更喜欢使用命令选项板中的扩展；否则，使用扩展栏的用户界面肯定更容易。

Note

许多扩展，尤其是提供完整语言支持的扩展，如 C#和 C/C++，依赖于调试器和库等附加工具。这些附加工具通常在您第一次使用该扩展时下载。例如，在 C#扩展的情况下，当您第一次创建或打开 C#文件时，会下载所需的工具和库。这些包括要支持的库.NET 核心调试和工具，通过智能感知和实时静态分析来改善编辑体验。此外，新下载的扩展可能需要一些初始配置。在这种情况下，将出现一个弹出框，解释您需要做些什么来开始。

扩展建议

VSCode 可以根据您的活动提供有关推荐扩展的建议。当你打开扩展栏时，你会在已安装的扩展列表下看到一个名为推荐的的组。

推荐的扩展列表因您的活动而异，第一次使用 VSCode 时可能为空。作为一种选择，VSCode 可以根据您打开的文件建议扩展名。例如，假设您打开了一个用 Go 语言编写的代码文件，但是您还没有安装任何 Go 扩展。VSCode 具有对 Go 语言语法的内置支持，因此编辑器提供了语法着色和基本的单词完成功能，但是您可能希望使用更丰富的编辑体验，包括代码段、代码导航和丰富的 IntelliSense 支持。在这种情况下，VS Code 会建议有一个扩展可以帮助你处理 Go 文件，并提供安装它，如图 6-4 所示。

图 6-4

基于当前文件的扩展建议

你可以点击安装，VSCode 会自动安装它认为最合适的扩展，或者你可以点击显示建议查看可能的扩展列表。在这两种情况下，扩展栏都会打开，你会看到可用的推荐扩展列表，但是当你点击安装时，推荐的扩展已经在安装了。

有用的扩展

Visual Studio Marketplace 包含大量有用的扩展，但在日常工作中长时间使用 VSCode 后，我个人推荐一组扩展。表 6-1 总结了这组有用的扩展。

表 6-1

VSCode 的推荐扩展

|

名字

|

描述

|

类型

| | --- | --- | --- | | C# | C#完全语言支持 | 语言，调试器，编辑 | | C/C++ | C 和 C++完全语言支持 | 语言，调试器，编辑 | | 计算机编程语言 | Python 全语言支持 | 语言，调试器，编辑 | | Java 的语言支持 | Java 全语言支持 | 语言，编辑 | | SQL Server (mssql) | SQL Server 支持 | 语言，编辑，工具 | | Chrome 调试器 | 使用 Chrome 浏览器调试 JavaScript | 调试器 | | Java 调试器 | Java 调试支持 | 调试器 | | Microsoft Edge 调试器 | 使用 Edge 浏览器调试 JavaScript | 调试器 | | 科尔多瓦工具 | 使用 Apache Cordova 进行移动开发 | 编辑，工具 | | 节点调试 | Node.js 的调试支持 | 调试器 | | Visual Studio Keymap | 基于 Microsoft Visual Studio 的键盘快捷键 | 按键绑定 | | 原子键盘映射 | 基于 Atom 的键盘快捷键 | 按键绑定 | | 记事本++键盘映射 | 基于记事本++的键盘快捷键 | 按键绑定 | | 码头工人 | Dockerfile 的语言支持 | 语言，编辑，工具 | | vscode 图标 | 浏览器栏的彩色图标 | 工具 | | 走吧 | 为 VSCode 扩展 Git 集成特性 | 工具 | | 管理员 | PowerShell 脚本支持 | 语言，编辑，工具 | | 实时分享 | 协作式实时开发的扩展，与其他开发人员共享 VS 代码实例 | 工具 |

当您在项目和您选择的操作系统上使用 VSCode 时，您将能够找到并微调有助于提高工作效率的扩展。

管理扩展

扩展栏允许您快速管理扩展。显示已安装的扩展列表，如图 6-5 所示。然后，对于每个扩展，带有齿轮图标的按钮会打开一个弹出菜单，其中包含禁用或卸载扩展的命令。

图 6-5

扩展管理快捷方式

也可以点击扩展名，详情页会显示禁用和卸载按钮。请注意，当您禁用或卸载一个扩展时，在大多数情况下，您需要单击一个名为 Reload (当扩展被禁用或卸载时出现)的按钮来刷新开发环境。值得一提的是，您可以通过点击扩展组顶部的 … 按钮并选择视图子菜单来更改扩展栏的默认视图(显示已安装的扩展列表)。然后，您可以在不同的选项中进行选择，例如查看流行的扩展、检查扩展更新以及从安装扩展。vsix 文件。

Note

命令选项板中还提供了扩展管理的快捷方式。

配置扩展

VSCode 有一些选项，允许您控制扩展的全局行为。你可以在用户设置中的扩展组下看到这些选项，如图 6-6 (基于我机器上安装的扩展列表，可能与你的不同)。

图 6-6

关于扩展管理的自定义选项

有详细的注释解释每个选项是关于什么的。每个扩展都允许在用户设置中定制自己的行为，也可以在众所周知的 settings.json 文件中进行编辑。例如，假设您安装了 C#扩展。如果你查看用户设置，你会发现一个名为 C#配置的组。如果您展开这个组，您将看到关于 C#扩展的选项的完整列表，其中包括代码编辑和扩展添加的工具的选项。图 6-7 显示了这些选项。

图 6-7

自定义扩展选项

如果您想改为编辑 settings.json 文件中的扩展设置，IntelliSense 将通过在您滚动列表时显示设置名称和带有设置说明的工具提示来简化您的工作。图 6-8 显示了一个例子，智能感知显示了 C#扩展的一些设置，用csharp文字标识。

图 6-8

在 settings.json 中自定义扩展选项

通常，扩展作者会提供详细的注释，解释选项是关于什么的，以便您更容易微调扩展行为，例如在 C#扩展的情况下。

关于扩展创作的提示

您可以为 VSCode 构建扩展，并通过 Visual Studio 市场共享它们。您基本上可以构建任何类型的受支持的扩展，例如语言支持、编辑功能、主题、代码片段、调试器适配器和键绑定。您还需要在 Marketplace 上注册为发布者，这需要您拥有一个 Microsoft 帐户。

扩展通常是用 TypeScript 编写的，对于大多数扩展，您可以使用 Node.js 上的 Yeoman 工具之类的扩展生成器。如果您对扩展创作感兴趣，可以浏览一下官方文档( https://code.visualstudio.com/api )，其中提供了许多场景的示例和指导。

摘要

扩展性是 VSCode 中的一个关键特性，因为它允许您为开发环境增加功能。扩展可以添加新的语言(有或没有丰富的编辑支持)、调试器、键盘快捷键、主题、代码片段和工具。您可以通过扩展栏或命令面板从 Visual Studio 市场或 VSCode 中安装扩展。

VSCode 还可以根据上下文提供扩展建议，例如当您打开一个用没有内置支持的语言编写的文件时。VSCode makes 还简化了扩展的管理，提供了禁用和卸载扩展的快捷方式以及通过用户设置文件配置扩展行为的能力。在下一章中，你将看到如何利用扩展将特性添加到 VSCode 的另一个核心特性中，这使它比它的竞争对手前进了一步:Git 版本控制。

七、将 Git 用于源代码控制

编写软件通常需要协作。无论您是开发团队的一员，参与开源项目，还是与客户互动的个人开发人员，都是如此。微软强烈支持协作和开源，因此 VSCode 提供了一个集成的源代码控制系统，该系统基于 Git，可以扩展到其他提供商。

本章不仅描述了 VSCode 中所有现成可用的源代码协作集成工具，还描述了如何使用在工作中非常有用的扩展来更好地审查您的代码并将您的工作推送到 Azure DevOps。请注意，源代码控制和版本控制这两个术语可以互换使用。

VSCode 中的源代码管理

VSCode 通过可扩展性支持不同的源代码管理提供程序，但它提供了对 Git 的集成支持。Git ( https://git-scm.com/ )是一个非常流行的分布式、跨平台的版本控制引擎，它使得小型和大型项目的协作更加容易。它受欢迎的原因之一是 Git 是开源的，因此它一直受到大型开源社区的喜爱。

VSCode 适用于任何 Git 存储库，如 GitHub 或 Azure DevOps，并提供了一种管理代码提交的集成方式。

注意这一章不是 Git 的指南；相反，它是一个学习 VSCode 如何使用它的地方，所以要了解更多信息，请访问 Git 官方页面。另外，请记住 VSCode 要求 Git 引擎安装在本地，所以请确保您的机器上有该引擎，或者从 https://git-scm.com/downloads 下载。为了演示 Git 版本控制如何与 VSCode 一起工作，我将使用一个名为 Greeter 的小型 TypeScript 项目，它可以从微软的 TypeScript 示例库中获得( https://github.com/Microsoft/TypeScriptSamples )。您可以在您的系统上下载存储库，并解压缩磁盘上的 Greeter 子文件夹。显然，你可以完全自由地使用你选择的另一个例子或另一个项目，不管是什么语言，但是要理解本章中的例子，你需要 Greeter。此时，在 VSCode 中打开项目，开始协作处理源代码。

下载其他源代码管理提供程序

正如我前面提到的，VS 代码通过可扩展性支持额外的源代码管理器，也称为 SCM。您可以打开扩展栏并在搜索框中键入SCM providers来查找针对其他源代码控制引擎的第三方扩展。图 7-1 显示了一个选择扩展的例子，该扩展增加了对 Subversion 引擎的支持( https://subversion.apache.org )。

图 7-1

安装其他源代码管理提供程序

因为 VS 代码只为 Git 提供框内支持，所以本章不讨论其他源代码控制提供者。如果您希望安装 SCM 扩展，请确保参考制造商提供的文档。

管理存储库

使用 Git，版本控制同时支持本地存储库和远程存储库工作。本节解释了如何创建这两者，提供了在文档中找不到的信息，特别是对于远程存储库。

Note

repository 的一个非常流行的缩写是 repo 。虽然这个术语在本书中没有用到，但是你会经常遇到，尤其是在搜索有关开源项目的信息时。

初始化本地 Git 存储库

作为下面示例的起点，打开之前下载的欢迎项目。您需要做的第一件事是为当前项目创建一个本地存储库。这是通过从侧栏打开 Git 工具来完成的，如图 7-2 所示。

图 7-2

准备初始化本地 Git 存储库

点击 Publish to GitHub 按钮将允许您初始化一个本地存储库并同时发布到 GitHub，但是因为理解流程如何工作以及如何正确地将 VS 代码授权给 GitHub 是很重要的，所以这里的步骤分为首先创建一个本地存储库，然后发布到远程存储库。点击顶部的初始化储存库按钮(见图 7-2 )。VSCode 将初始化本地存储库，并显示现在受版本控制但尚未提交的文件列表(参见图 7-3 )。

图 7-3

文件受版本控制，但尚未提交

注意 Git 图标是如何显示未决变更的数量的。这是一个重要的指示器，每当您有未决的、未提交的变更时，您总是会看到它。编写提交说明，然后按 Ctrl+Enter。您将看到一条警告消息，指出目前没有暂存文件，您将被要求直接暂存和提交所有文件。我们将在下一节讨论分期，所以现在单击 Yes 。此时，文件被提交到本地存储库，并且挂起的更改列表将被清除。现在有一个问题:您需要一个远程存储库，但是官方文档没有描述如何将它与 VS 代码关联起来。下一节将解释如何实现这一点。

创建远程存储库

VSCode 适用于任何 Git 存储库。有很多平台使用 Git 作为版本控制引擎，但可能最受欢迎的平台是 GitHub、Atlassian Bitbucket 和 Microsoft Azure DevOps。本节向您展示了如何在 GitHub 上创建远程存储库。我选择 GitHub 不仅是因为该平台的流行，还因为 VSCode 包含一个名为 GitHub 的内置扩展，该扩展旨在简化 GitHub 本身的工作流程。这需要您拥有一个现有的 GitHub 帐户，或者在 https://github.com/join 免费创建一个。VSCode 使得通过单击鼠标将存储库发布到 GitHub 变得非常容易，但是 VS 代码首先需要得到 GitHub 引擎的授权，因此有一些预备步骤只需做一次。

Note

GitHub 不再支持 Edge、Internet Explorer 等微软浏览器。虽然您可以用这两种方式打开网站，但有些操作将不可用。我推荐用 Chrome 或者 Firefox 之类的浏览器打开 GitHub。

在状态栏上，点击发布到 GitHub 按钮，该按钮由一个代表带箭头的云的图标标识，位于主分支名称的右侧。图 7-4 显示该按钮在绿框内。

图 7-4

“发布到 GitHub”按钮

一个警告将通知您 VS 代码想要访问 GitHub，在您单击 OK 接受之后，它将打开默认浏览器，指向一个 GitHub 页面，在那里可以授权 VS 代码。点击授权，然后输入你的 GitHub 凭证，接受扩展所需的访问要求。接下来，GitHub 生成一个特定于 VSCode 的授权令牌，它看起来像是在我的机器上生成的，如图 7-5 所示。

图 7-5

为 VSCode 生成的授权令牌

您的浏览器将询问您是否允许打开包含 VSCode 的 URL。允许这样做，以便 VSCode 能够自动完成身份验证过程。(这是对以前版本的改进，以前版本需要手动输入令牌。)此时，VS 代码被启用来访问 GitHub。正如我前面提到的，授权 VSCode 所需的步骤只需完成一次。请注意，您不会得到授权已完成的确认…这是一个静默的过程。

此时，您需要再次点击状态栏上的发布到 GitHub 按钮。VS 代码显示了一个包含存储库名称的文本框；默认情况下，这基于当前的文件夹名称，但是您可以编写不同的名称。它还提供了两个基于文件夹名称将资源库发布到 GitHub 的选项，如图 7-6 所示；一个选项是发布到私有存储库，另一个选项是发布到公共存储库。

图 7-6

远程发布存储库的可用选项

对于当前示例，将使用 public 选项，但是您可以自由选择您喜欢的选项。发布完成后，您会收到一条确认消息和一个在浏览器中打开 GitHub 存储库的选项。

Note

如果您使用不同于 GitHub 的平台，您可以通过单击位于源代码控制栏右上角的 … 按钮，然后选择 Remote ➤ Add Remote 来轻松关联远程存储库。这在本章末尾的“使用 Azure DevOps 和 Team Foundation Server”一节中有实际解释。

处理文件更改

Git 在本地跟踪您的代码文件上的更改，VS 代码中的 Git 图标显示有挂起更改的文件的数量。这个数字实际上只有在您保存文件后才会更新。在 VS 代码中，处理文件更改非常简单。在图 7-7 中，你可以看到在 Git 图标中未决变更的数量是如何突出显示的，以及有变更的文件是如何用棕色 M 标记的(其中 M 代表已修改)，而删除的文件用红色 D 标记(其中 D 代表已删除)。注意，这些标记在浏览器栏中也是可见的。

图 7-7

确定待定变更的数量

通过单击列表中的文件，您可以使用 Diff 工具查看文件的当前版本和以前版本之间的差异。图 7-8 给出了一个例子。

图 7-8

使用比较工具比较文件版本

左侧显示旧版本，右侧显示新版本。用红色突出显示的行代表已经删除的代码，而用绿色突出显示的行代表新代码。代码行内部的具体变化用较暗的红色和绿色表示，正如你在图 7-8 中看到的单词world和developers。当使用任何版本控制引擎时，这是一个非常重要的工具。

暂存更改

您可以升级文件进行转移，这意味着将它们标记为准备好下次提交。这实际上不是强制性的，因为您可以直接提交，但是拥有一个可视化的变更表示是很有用的。您只需点击文件名称附近的 + 符号即可升级文件，或者右键点击变更标题，然后选择升级所有变更或点击工具栏上的加号图标即可升级所有文件。VSCode 将暂存文件组织到一个逻辑容器中，如图 7-9 所示。同样，您可以通过单击**–**符号来取消暂存文件。

图 7-9

阶段性和非阶段性变化的观点

基于 staging 的工作流非常方便，因为如果您不再想要提交文件，您可以在代码提交到存储库之前简单地取消它。

管理提交

… 按钮提供对附加动作的访问，例如提交、同步、拉取、存储、和拉取(重置)。图 7-10 显示了 VS 代码中可用的内置 Git 同步命令的完整列表。注意其中一些被分组到子菜单中，例如图 7-10 中可以看到的拉、推。

图 7-10

提交和同步更改的快捷方式

当您对源代码的工作感到满意时，您可以选择 Commit ➤ Commit All 命令来提交您的更改。请记住，此操作会将文件提交到本地存储库。此外，在提交之前，您可能希望检查暂存的和非暂存的更改，以便提交代码时不会丢失任何文件。您必须使用 Push 命令将变更发送到远程存储库。

您还可以选择使用提交 ➤ 撤销上一次提交命令来撤销上一次提交并恢复到之前的版本。拉和拉(Rebase) ，都在拉、推子菜单中，允许你将一个分支合并到另一个分支中； Pull 是非破坏性的，合并两个分支的历史，而 Pull (Rebase) 通过为本地分支中的每个提交创建新的提交来重写项目历史。同一个子菜单中的 Sync 命令首先执行 Pull 操作，然后执行 Push 操作，这样本地和远程存储库就同步了。

还有一个名为 Stash 的命令，它允许在缓存中存储修改的跟踪变更和阶段变更，这样您就可以在当前分支上有未完成的工作时切换到另一个分支。然后，使用弹出最新保存和弹出保存命令，在保存子菜单下，您可以分别重新拍摄您未完成作品的最新版本或未完成作品的特定版本。

每次使用 Git 命令，比如提交和推送，VSCode 都会将 Git 命令行的输出重定向到输出面板。图 7-11 给出了一个例子。

图 7-11

来自 Git 命令行的消息显示在输出面板中

您需要从输出面板的下拉菜单中选择 Git 来查看 Git 输出。您也可以使用图 7-10 所示的弹出菜单中的显示 Git 输出命令打开输出面板。

使用 Git 命令行界面

命令面板支持特定的 Git 命令，您可以像在命令行终端中一样键入这些命令。图 7-12 显示了可用 Git 命令的部分列表，通过在命令面板中键入Git来显示。命令的完整列表很长，无法完全包含在图 7-12 中，但是您可以在自己的计算机上键入Git并滚动列表来查看所有可用的命令。

图 7-12

命令面板中支持的 Git 命令

值得一提的是，命令列表也是按最近使用的命令和所有命令分组的。

例如，您可以使用Git Sync来同步本地和远程存储库，或者您可以使用Git Push将挂起的更改发送到远程存储库。使用Git命令的一个常见场景是分支。

创建和管理分支

为了更好地理解什么是分支，假设您有一个项目，在它生命周期的某一点，进入生产阶段。您需要继续开发您的项目，但是您不希望在您已经编写的代码上进行开发。

您可以使用分支创建两个历史。当您创建一个存储库时，您还会得到一个名为 master 的默认分支。

Note

GitHub 最近有变化，所以如果你先直接在这个平台上创建一个远程资源库，主分支就不再叫 master ，而是叫 main 。这个变化是特定于 GitHub 的，所以如果你在本地或者其他平台上创建一个 Git 仓库，你仍然可以得到主分支。

继续这个例子，主分支可以包含已经投入生产的代码，现在你可以创建一个新的分支，比如开发，基于主分支但又不同于主分支。在 VSCode 中，您有不同的选项来创建新的分支:第一个选项是通过键入Git branch，选择 Git: Create Branch 选项，并指定新的分支名称，如 development ，从命令面板创建分支。这在本地创建了一个新的分支，基于主。第二个选项是点击状态栏中的当前分支名称(本例中为主，然后点击创建新分支命令(见图 7-13 )。输入新的分支名称，然后按 Enter。

图 7-13

创建分支

此外，您可以使用 Create new branch from 命令从非活动分支创建一个新分支。创建新分支时，状态栏会将其显示为活动分支；当你准备好了，你可以通过发布变更按钮将新的分支发布到远程存储库，由云图标表示(见图 7-14 )。

图 7-14

新分支被设置为活动的，可以发布了

切换到不同的分支

切换到不同的分支非常容易。只需点击状态栏中活动分支的名称，VS Code 就会显示分支列表，如图 7-15 所示。如果存储库已经有一个远程分支，它也将在列表中可见。

图 7-15

选择不同的分支

单击所需的分支，VS Code 将其检出并设置为活动分支。

从分支合并

假设您已经完成并测试了开发分支的一些工作，并且您想要将这些工作发布到生产中。因为生产代码在主分支上，所以您必须将所有工作从开发分支带到主分支。这是一个合并操作(通常通过 pull 请求发生，这将在本章后面描述)。您可以使用 Git: Merge Branch 命令，通过命令面板将一个分支合并到另一个分支中。VS 代码显示分支列表，您需要选择想要合并到当前分支的分支(参见图 7-16 )。

图 7-16

从分支合并

Note

请记住，接收合并的分支是活动分支，所以在开始合并操作之前，请确保您已经切换到正确的分支。

在这个例子中，进行了一些变更并将其推送到开发分支，然后选择主分支作为活动分支，来自开发的变更将被合并到主分支中。

一旦合并操作完成，记得将您的更改推送到远程存储库。

解决合并冲突

当您合并修改了相同代码文件的分支时，VSCode 利用 Git 工具将不同的编辑合并到目标文件中的一个代码中。然而，有时 VS 代码不能自动合并编辑，在这种情况下，它会引发一个合并冲突。如果发生这种情况，VS Code 会显示一个编辑器，其中会突出显示存在冲突的代码，用不同的颜色显示当前版本和即将到来的版本，如图 7-17 所示，该图显示了一个由于不同分支中同一行代码的编辑而导致冲突的示例。

图 7-17

解决合并冲突

冲突也可以在侧边栏的“提交”面板中看到，并且必须在合并完成之前解决。如图 7-17 所示，代码编辑器提供了内联快捷方式来快速解决冲突:

• 接受当前变更:保留现有代码，拒绝引入的变更。

• 接受引入的变更:用引入的编辑覆盖现有的代码。

• 接受两个变更:保留现有的和输入的代码。传入代码被追加到现有代码中。

• 比较变更:在有几个冲突的情况下，允许决定应该合并现有代码还是引入的代码。

• 启动实时共享:只有安装了实时共享扩展才可用，允许启动实时共享会话，向其他开发者寻求帮助。

什么是正确的选择只取决于你的喜好。VSCode 为您提供了一种集成的、用户友好的方式来快速解决合并冲突，而无需处理复杂的 Git 命令。

关于重置分支的提示

在 VSCode 中 Git 的可用命令中，您会发现一个名为 Rebase 的命令。在 Git 中，重定基础仍然允许您将一个分支所做的更改包含在另一个分支中，但是重定基础和合并以不同的方式完成这项任务。

更具体地说，重定基础不会在分支之间产生重叠，而是将代码更改附加到目标分支的末尾，这意味着代码的历史更容易理解，即使需要频繁地将一个分支的提交合并到另一个分支中。

因此，重定基础提供了访问更线性历史的可能性，因为与合并不同，它允许您不将不必要的提交合并到目标分支中。

但是，应该小心使用重定基数。例如，如果另一个团队成员在同一个分支上工作，最好避免重定基础，因为这可能导致分支的重复，而不是合并变更。

删除分支

有时，您可能会创建一些分支，这些分支只是为了测试一些代码，在应用生命周期管理中并不真正需要。在这种情况下，在命令面板中，可以使用 Git: Delete Branch 命令。

使用如图 7-16 所示的用户界面，VS 代码显示分支列表。选择要删除的分支，然后按 Enter 键。请记住，不能删除活动分支，您首先需要切换到不同的分支。另外，请记住，只有创建了远程分支，才能删除它们。

用扩展增强 Git 工具的功能

Git 的集成工具涵盖了作为开发人员在使用本地和远程存储库管理源代码时可能会遇到的所有需求，但是还有一些扩展为集成工具提供了额外的功能。

本节描述最有用的免费扩展，它们将改善您在 VSCode 中的协作体验。

Git 历史

Git History 是一个免费的扩展，可以让你查看源代码的历史，比如每次提交的信息和作者，还可以显示文件是如何通过分支的；此外，它还添加了一些命令，使得针对 Git 管理代码变得更加容易。安装完扩展后，可以在浏览器栏的文件夹视图中右键单击一个文件，然后选择 Git: View File History 。

图 7-18 显示了一个基于有三次提交的文件的例子。如果可用的话，该视图显示包含文件的分支、提交的注释和作者以及提交 ID，并且它允许按分支和作者搜索和过滤内容。本地分支以绿色突出显示，远程分支以红色突出显示。

图 7-18

使用 Git 历史查看提交的历史

Note

如果提交作者将一张图片与 Git 凭证相关联，Git 历史记录会在作者姓名附近显示该图片。

如果点击每个提交右侧的更多快捷方式，会出现一个菜单，显示一些非常有用的命令，使处理提交更加容易(见图 7-19 )。

图 7-19

Git History 提供的命令使得处理提交变得更加容易

在视图的底部，您将看到所选提交中涉及的文件列表。如果您单击一个文件名，您还可以获得快捷方式，将该文件与以前的版本进行比较，并查看该文件的历史记录。Git History 是一个非常有用的扩展，尤其是当您的团队使用敏捷方法时，因为对于 backlog 中的每个任务，都会创建一个新的分支，然后在 sprint 结束时合并到一个分支中，这使得遍历工作的历史更加容易。

走吧

另一个非常有用的扩展是 GitLens，它可以提高你的工作效率。在第一次使用时，GitLens 要求您获得 GitHub 的授权，因此 VS Code 会邀请您按照创建第一个远程存储库时的步骤进行操作。GitLens 为 VS 代码添加了许多与 Git 相关的特性和命令。例如，GitLens 用一些有用的 Git 组扩展了源代码控制栏(见图 7-20 )。

图 7-20

gittens 扩展的源码控制栏

GitLens 扩展为源代码控制栏增加了几个区域。分支和远程区域分别显示本地和远程分支的列表，对于每个分支，GitLens 显示提交列表。可以展开每个提交以查看提交消息、提交中涉及的文件列表以及表示对文件所做操作的图标。隐藏区域显示具有相似结构的隐藏变更(如果有的话)。文件历史区域显示了一个文件的提交列表(这需要一个打开的编辑器)。对于每次提交，您可以看到名称、作者和上次编辑的时间。

VS 代码中的状态栏现在通过 GitLens 提供了一个包含当前提交的作者姓名和上次编辑时间的字段。如果点击这个信息，VS 代码会显示一个命令列表，如图 7-21 所示。

图 7-21

gittens 命令

这些命令不仅允许您打开远程存储库中的提交，还允许您打开提交修订。此外，您可以将提交 ID 或消息复制到剪贴板。您也可以展开下面的文件名，查看当前代码提交的各个详细信息。

GitLens 还在代码片段本身的上方添加了关于对特定代码片段所做编辑的摘要信息。图 7-22 显示了一个例子，GitLens 突出显示了作者在 4 小时前对Greeter类进行了代码更改。

图 7-22

GitLens 添加了关于代码片段的摘要信息。

Note

如果您将光标悬停在 GitLens 上，您将在一个交互式弹出框中看到一些信息，如作者、代码差异和提交号。

如果你点击分隔线的左侧，你会看到如图 7-21 所示的菜单。如果你点击作者的名字，VS 代码会显示一个弹出框，其中包含所选作者提交的列表，如果你将鼠标悬停在提交名称上，你会看到完整的提交细节(参见图 7-23 )。

图 7-23

显示提交信息的 gittens

右键单击代码编辑器时，可以在上下文菜单中使用其他命令，例如将提交 ID 复制到剪贴板、将消息复制到剪贴板，以及将远程文件 URL 复制到剪贴板，所有这些命令都是不言自明的。

Note

上述所有命令也可通过代码编辑器栏右上角的快捷方式获得(参见图 7-23 )。

GitHub 拉请求和问题

Git 中的 Pull 请求使执行代码审查变得更加容易，而 issues 使您能够跟踪来自其他开发人员的反馈。对于拉请求，您的代码不会自动合并到一个分支中，直到团队中的其他人审查并接受它。如果您将 GitHub 用于您的存储库，名为GitHub Pull Requests and Issues的扩展可用于在 VSCode 中引入对 Pull 请求的支持。当您第一次安装扩展(并重新加载环境)时，会要求您登录 GitHub。为此，您可以点击侧边栏中的设置，然后点击登录以使用 GitHub 拉请求和发布，或者点击 GitHub 栏中的登录按钮。只需按照与授权 GitLens 相同的步骤操作即可。

在您提供您的 GITHUB 凭证并打开一个与 GitHub 上的远程存储库相关联的文件夹后，您将能够利用 GitHub 栏，您可以通过单击侧栏上的 GitHub 图标来启用它。GITHUB 视图的示例如图 7-24 所示。

图 7-24

GitHub 拉请求视图

该扩展支持查看和提交 pull 请求，而不考虑它们的来源，可以是 VS Code、GitHub 或连接到同一个存储库的另一个开发环境。当“拉”请求可用时，您会看到它们在视图中列出。如果您选择一个拉动请求，一个新的编辑器窗口将出现，显示所有拉动请求的详细信息，您可以选择添加注释，然后关闭、拒绝或批准拉动请求(参见图 7-24 )。

您还可以通过单击 Checkout 按钮在本地处理拉请求，该按钮显示在树形视图中的本地拉请求分支节点下。

您可以通过使用 + 按钮在 VSCode 中创建问题，之后您可以编辑并保存它们，以便它们与远程存储库相关联。查看问题发生在浏览器内部，因此当您单击问题右侧的地球图标时，默认的 web 浏览器会打开该问题的 GitHub 页面。

这是一个非常有用的扩展，特别是如果你在敏捷团队中工作，但是记住它只支持 GitHub 作为主机。

使用 Azure DevOps 和 Team Foundation Server

Azure DevOps ( https://dev.azure.com )和 Team Foundation Server 是微软管理整个应用生命周期的完整解决方案，从开发到测试，再到持续集成和交付。Azure DevOps 是一种云服务，而 Team Foundation Server 在内部工作。在众多特性中，它们都提供了基于两个引擎的源代码控制功能:Git 和 Microsoft Team Foundation Server 引擎。

在这一节中，我将解释如何配置一个 Git 存储库，您可以将它用于 VSCode 的源代码控制，好消息是您不需要任何扩展。我将使用 Azure DevOps，这样您就不需要在本地安装 Team Foundation Server。此外，我将重用前面几节中描述的 Greeter 项目。如果您也想这样做，只需删除本地。git 文件夹位于项目文件夹下。

你显然需要一个 Azure DevOps 上的账号，你可以使用微软账号来创建。如果没有，您可以在 www.outlook.com 获得一个微软帐户，然后在 https://aka.ms/SignupAzureDevOps 获得一个 Azure DevOps 帐户。首次配置您的帐户时，请遵循所有必要的说明。

创建团队项目

在主页上，点击新建项目按钮。如图 7-25 所示，您需要提供团队项目名称、源代码控制引擎和工作项流程。

图 7-25

在 Azure DevOps 中创建团队项目

输入项目名称，点击创建。几秒钟后，您的新团队项目就准备好了。此时，Azure DevOps 站点显示了一个页面，其中包含您的新团队项目的所有信息。现在点击屏幕左侧的 Repos ，这样你就可以看到新 Git 仓库的所有信息(见图 7-26 )。请注意，新存储库是以与新项目相同的名称创建的。将存储库 URL 复制到剪贴板，因为很快就会用到它。

图 7-26

关于 Azure DevOps 上 Git 存储库的信息

既然已经设置了远程存储库，那么您有几个选项可以将它与 VSCode 关联起来。您可以将存储库克隆到本地机器上，或者甚至可以使用 Git CLI。然而，最简单也是最有效的选择是使用你在本章第一部分看到的 VS 代码工具，如下所述。

将 VSCode 连接到远程储存库

回到 VSCode。首先要做的是初始化一个本地 Git 存储库(参见本章前面的“初始化一个本地 Git 存储库”一节作为复习)。一旦建立了本地存储库，就可以毫不费力地将其连接到远程 Azure DevOps 存储库。

在源控制栏中，点击 … 按钮，然后点击远程 ➤ 添加远程。您首先需要指定远程存储库的名称(这是您在 Azure 中指定的名称)，然后您可以选择输入您创建的远程存储库的 URL，因此粘贴 URL 并按 enter 键(参见图 7-27 )。

图 7-27

指定 Azure DevOps 远程存储库

还会要求您提供一个名称，用作项目标识符。输入您选择的名称，不带空格，然后按 Enter 键。此时，VSCode 将本地存储库链接到远程存储库，但是请注意，您不会收到任何操作完成的确认消息，只会在状态栏上显示指示符。

最后一步是将分支推送到远程存储库，使用本章第一部分描述的任何选项；然而，你需要关心主分支。如前所述，由于 Azure DevOps 中最近的变化反映了 GitHub 的功能，当您在 Azure DevOps 上创建一个存储库时，主分支现在被命名为main而不是master。问题是 VS 代码仍然创建了一个master分支。所以基本上你需要从 VS 代码中推出master分支，然后创建一个拉请求将master合并到main中，这样你就可以使用新的分支了。

Note

如果您将现有代码连接到远程存储库，所有这些步骤都是必要的。如果您从为一个新项目创建一个远程存储库开始，您可以在 VS 代码中克隆这个存储库，这样您就可以直接从主分支开始。

一旦变更被推送，它们在 Azure DevOps 项目的 Repos 视图中是可见的(参见图 7-28 )。

图 7-28

源代码已经推送到 Azure DevOps

既然您的代码已经被远程推送，其他开发人员将能够在项目上进行协作。关键是在本地 Git 存储库和远程 Azure DevOps 存储库之间建立连接有多容易，所有这些都是在 VSCode 中完成的。

摘要

编写软件涉及到协作，无论你是开发团队的一员，参与开源项目，还是与客户有互动的个人开发者。在本章中，您已经探索了 VSCode 如何提供集成的工具来与 Git 一起工作，Git 是流行的开放源代码和跨平台源代码控制提供程序。

您已经看到了如何使用 Git bar 创建本地存储库，以及如何使用来自集成终端的几个命令将它与远程存储库相关联。您还看到了如何处理文件更改，包括提交，以及如何从环境中直接创建和管理分支。此外，还向您介绍了一些有用的扩展，如 Git History、Git Lens 和 GitHub Pull Requests and Issues，它们将通过添加每个开发人员在团队协作时都需要的重要功能来提高您的工作效率。最后，您了解了将本地存储库链接到 Azure DevOps 上托管的远程 Git 存储库是多么容易，Azure devo PS 是微软管理整个应用生命周期的首要云解决方案。在幕后，VSCode 调用 Git 命令来对您的源代码执行操作，并且它被预先配置为与这个外部工具一起工作。

然而，VSCode 并不局限于使用一小组预定义的工具；相反，它可以被配置为基本上与任何外部程序一起工作。这是你将在下一章学到的东西。