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

八、自动化任务

如前一章所述，VSCode 不仅仅是一个简单的代码编辑器，因为它使您能够通过运行外部工具来执行诸如编译和测试代码之类的操作。在这一章中，你将学习 VS 代码如何通过任务执行外部程序，包括现有的任务和定制的任务。要运行本章中提供的示例，您需要以下软件:

• Node.js，一个基于 Chrome 的 JavaScript 引擎的免费开源 JavaScript 运行时，你可以从 https://nodejs.org 下载

• TypeScript 编译器(tsc ),通过 Node.js 命令行使用以下命令安装:

> npm install -g typescript

使用 Node.js 和 TypeScript 有助于避免对操作系统和专有开发环境的依赖。显然，本章讨论的所有主题也适用于其他语言和平台。对于本章最后一个关于 Windows 上 MSBuild 任务的例子，你反而需要微软 Visual Studio 2019。社区版在 https://visualstudio.microsoft.com 免费提供。

了解任务

从本质上讲，VSCode 是一个以代码为中心的工具，因此它通常需要执行外部程序来完成应用生命周期中的一些操作，如编译、调试和测试。

在 VSCode 术语中，在应用生命周期的流程中与外部程序集成是一项任务。运行任务不仅意味着执行外部程序，还意味着获得外部程序的输出，并以最方便的方式在用户界面(如集成终端)内显示。

Note

任务仅适用于文件夹，不适用于单个代码文件。

任务基本上是一组用 JSON 符号表示的指令和属性，存储在一个名为 tasks.json 的特殊文件中。如果 VS 代码能够检测文件夹中的项目或源代码的类型，tasks.json 文件并不总是必需的，VS 代码会为您完成所有工作。如果 VS 代码无法检测到项目或源代码的类型，或者如果您对任务的默认设置不满意，在当前文件夹下，它会生成一个名为。vscode，并在该文件夹中生成 tasks.json 文件。如果 VS 代码能够检测文件夹中的项目或源代码的类型，它还会用适当的信息预先填充 tasks.json 内容；否则，您需要手动配置 tasks.json。为了更好地理解，我将解释 VS 代码可以检测到的任务以及它为您配置的任务，然后我将讨论如何手动创建和配置任务。

任务类型

对于源代码文件夹，可以使用的任务类型没有限制，但最常见的有以下几种:

• 构建任务:构建任务被配置为将源代码、资产、元数据和资源编译成二进制或可执行文件，例如库或程序。

• 测试任务:测试任务被配置为在源代码中运行单元测试。

• 观察任务:观察任务在所谓的观察模式下启动编译器。在这种模式下，编译器总是在最近一次编译后监视对任何未解析文件的更改，并在每次保存时重新编译它们。

VSCode 提供了执行生成任务的内置快捷方式。当添加新任务时，VS 代码会自我更新，为新任务提供快捷方式。此外，您可以区分相同类型的任务。例如，您可以有一个默认的生成任务和其他只能在特定情况下执行的自定义生成任务。

运行和管理任务

在实践中理解任务的第一种方法是运行现有的预配置任务。为了简单起见，启动 VSCode 并打开名为 simple 的项目文件夹，该文件夹来自您之前从 GitHub ( https://github.com/Microsoft/TypeScriptSamples )上的 TypeScript 示例库中下载的示例集合。

VSCode 将其检测为 TypeScript 项目，因此它预配置了一些任务(在下一节中，我将提供有关任务自动检测的更多细节)。现在打开终端菜单。如图 8-1 所示，有几个与任务相关的命令。

图 8-1

在终端菜单中运行和管理任务的命令

表 8-1 中提供了每个命令的解释。

表 8-1

用于任务执行和管理的命令

|

命令

|

描述

|
| --- | --- |
| 运行任务 | 在命令选项板中显示可用任务列表，并运行选定的任务 |
| 运行生成任务 | 运行默认的、预配置的构建任务(如果有) |
| 终止任务 | 强制停止任务 |
| 重新开始运行任务 | 重新启动当前运行的任务 |
| 显示正在运行的任务 | 在终端面板中显示当前运行任务的输出 |
| 配置任务 | 显示命令选项板中可用任务的列表，并允许在 tasks.json 文件编辑器中编辑选定的任务 |
| 配置默认构建任务 | 显示命令选项板中可用任务的列表，并允许选择任务用作构建任务 |

如果选择运行任务，VS Code 打开命令面板，显示可用任务类别列表，如图 8-2 所示。

图 8-2

从命令选项板中选择任务类别

在这里，您可以按类别选择一组可用的任务。在这种情况下，你需要选择类型脚本类别。此时，命令面板显示该类别的可用任务列表，如图 8-3 所示。

图 8-3

从命令选项板运行任务

可以看到，有两个任务， tsc: build 和 tsc: watch ，都指向 tsconfig.json 项目文件。这意味着这两个任务都将针对指定的文件运行。 tsc 是命令行类型脚本编译器的名称，而 build 和 watch 是两个预配置的任务，前面已经提供了它们的描述。如果选择 tsc build ，VSCode 启动 tsc 编译器，将 TypeScript 代码编译成 JavaScript 代码，如图 8-4 所示。

图 8-4

执行构建任务

Note

对于 TypeScript，构建任务将 TypeScript 代码编译成 JavaScript 代码。对于其他语言，构建任务从源代码生成二进制文件。更一般地说，构建任务根据语言从编译过程中产生预期的输出。此外，可用任务的列表会根据您正在处理的项目或文件夹的类型而有所不同。比如，对于.NET 核心项目，只有一个名为 build 的任务可用。

终端面板显示任务执行的进度和结果。在这种情况下，任务的结果也通过生成一个. js 文件和一个. js.map 文件来表示，现在可以在浏览器栏中看到。

Note

如果终端显示一条错误消息，说明由于系统上禁用了运行脚本，无法加载. ps1 文件，请尝试首先以管理员身份重新启动 VS 代码，然后重复这些步骤。如果这不能解决问题，您需要在您的计算机上启用脚本执行。如果您是计算机管理员，您可以自己完成此操作；否则，您需要询问网络管理员。您可以在 https:/go.microsoft.com/fwlink/?LinkID=135170 找到更多关于如何根据您的环境启用脚本执行以及如何启用特定权限的详细信息。

您可以分别使用终止任务和重启运行任务命令停止和重启任务，两者都在表 8-1 中描述。现在，假设有一个严重错误阻止构建任务成功完成。出于演示目的，从 simple.ts 文件的代码中删除一个右括号，然后再次运行构建任务。此时，VSCode 将在终端面板中显示来自 tsc 工具的详细日志，如图 8-5 所示，描述错误和导致错误的代码行。

图 8-5

VSCode 以方便的方式显示了外部工具的输出

在现实世界中，这种错误可能不会发生，因为您在代码编辑器中有问题面板和红色曲线来突出显示错误。但这实际上是 VSCode 如何与外部工具集成并在终端面板中直接显示其输出的示例，有助于用尽可能详细的信息解决问题。

默认的生成任务

因为构建源代码是最常用的任务，所以 VSCode 在终端菜单中提供了运行这个任务的内置快捷方式，称为运行构建任务(windows 上的 Ctrl+Shift+B，macOS 上的⇧+⌘+B)。然而，您首先需要设置一个默认的构建任务，因为否则运行构建任务命令将像运行任务命令一样。

为此，选择终端 ➤ 配置默认构建任务。当命令面板出现时，选择您想要设置为默认构建任务的任务，在本例中选择 tsc 构建。当您这样做时，VSCode 实际上正在更改其默认配置，因此会在。vscode 文件夹，然后在新的编辑器窗口中打开该文件。tasks.json 的内容和结构将在接下来的“配置任务”一节中讨论，所以现在让我们把重点放在新的默认构建任务上。选择终端 ➤ 运行构建任务，或者使用键盘快捷键，你会看到默认的构建任务将如何执行，而不需要每次都从命令面板中指定。

自动检测的任务

VSCode 可以自动检测以下环境的任务:Grunt、Gulp、Jake 和 Node.js。自动检测任务意味着 VSCode 可以分析为上述平台之一构建的项目，并生成适当的任务，而无需创建自定义任务。图 8-6 展示了一个基于 VSCode 的节点调试器扩展的例子，其源代码可在 https://github.com/Microsoft/vscode-node-debug 获得。

图 8-6

自动检测的任务

该扩展的源代码由 JavaScript 和 TypeScript 文件组成，构建在 Node.js 运行时之上。因此，VSCode 已经能够检测到许多适合这种项目的任务，例如 npm 构建和 npm 观察任务。然后，您可以打开 npm 类别，查看可以针对 npm 运行的预配置任务的完整列表。

自动检测的任务非常有用，因为它们允许您在任务自动化方面节省大量时间。然而，通常情况下，现有任务无法满足您的需求，因此您需要进行自定义。

Note

为了自动检测任务，幕后 VS 代码需要安装特定的环境。比如，只有安装了 Node.js，VS 代码才能基于 Node.js 自动检测任务；同样，只有安装了 Gulp，它才能基于 Gulp 自动检测任务，依此类推。

配置任务

当 VSCode 无法自动检测文件夹的任务时，或者当自动检测不能满足您的需要时，您可以通过编辑 tasks.json 文件来创建和配置自定义任务。在这一节中，我将给出两个例子来帮助您理解如何配置您自己的任务。

更具体地说，我将解释如何使用 OmniPascal 扩展和免费的 Pascal 编译器编译 Pascal 源代码文件，所有操作系统都可以使用，以及如何基于完整的。通过调用 MSBuild.exe 编译器在 Windows 上运行. NET Framework。

要完成这两个示例，您需要以下内容:

• VSCode 的 OmniPascal 语言扩展，可以通过扩展面板下载。这个扩展对于启用 Pascal 语法突出显示和代码导航很有用，尽管您仍然可以在没有它的情况下编译源文件。

• 免费的 Pascal 编译器，包括使用 Pascal 开发应用所需的全部内容，并提供免费的命令行编译器。Windows、macOS、Linux 等系统都有免费的 Pascal，可以从 https://www.freepascal.org 下载。

• 仅在 Windows 上，下载最新版本的.NET 框架(撰写本文时是 4.8 版)，其中包括 MSBuild.exe 工具。

让我们从一个基于 Pascal 语言的例子开始。

第一个例子:编译 Pascal 源代码

在这一节中，我将解释如何创建一个定制任务，通过从 VS 代码中调用免费的 Pascal 命令行编译器来编译 Pascal 源代码文件。假设你已经下载并安装了前文所列的软件，在磁盘上找到免费的 Pascal 文件夹安装(通常在 Windows 上是 C:\ FPC \版本号，在 macOS 和 Linux 上是/FPC/版本号)，然后打开 examples 文件夹。在 VSCode 中，打开任何包含一些 Pascal 源代码的文件夹。我会用一个叫 fcl-json 的。

图 8-7 显示了当前打开的 Pascal 源文件中 VSCode 的外观。

图 8-7

编辑 Pascal 源代码

之前安装的 OmniPascal 扩展支持语法着色和其他常见的编辑特性。现在假设您想通过调用免费的 Pascal 命令行编译器将源代码编译成可执行的二进制文件。您可以通过创建自定义任务来实现这一点。按照以下步骤创建一个新的 tasks.json 文件并设置自定义任务:

图 8-9

选择任务模板

图 8-8

从头开始创建新任务

1. 选择终端 ➤ 配置任务。当命令面板出现要求配置任务时，从模板中选择创建 tasks.json 文件(见图 8-8 )。此时没有现有的任务需要配置，所以您唯一能做的就是创建一个新的 tasks.json 文件。

2. 命令面板显示可用任务模板列表: MSBuild 、 maven 、。网芯，和其他(见图 8-9 )。选择其他创建一个独立于其他系统的新任务。

VSCode 生成一个名为。vscode 和该文件夹中的一个新的 tasks.json 文件，该文件的内容如下:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "echo Hello"
        }
    ]
}

这个 JSON 文件的核心节点是一个名为tasks的数组。它包含一个任务列表，对于每个任务，您可以指定 VS 代码将用来在命令面板中显示它的文本(label)、任务类型(type)以及将要执行的外部程序(command)。另外一个名为args的 JSON 属性允许您为所调用的程序指定命令行参数。在即将到来的“了解 tasks.json 属性”部分的表 8-2 中提供了支持的 JSON 属性列表，但是如果您不耐烦，可以快速查看该表，然后返回这里。

表 8-2

任务自定义的可用属性

|

属性名称

|

描述

|
| --- | --- |
| label | 用于标识任务的字符串(例如，在命令选项板中)。 |
| type | 表示任务类型。对于自定义任务，支持的值是shell和process。使用shell，命令被解释为 shell 命令(比如 bash、cmd 或 PowerShell)。使用process，该命令被解释为要执行的过程。 |
| command | 要执行的命令或外部程序。 |
| args | 要传递给命令的命令行参数数组。 |
| windows | 允许指定特定于 Windows 操作系统的任务属性。 |
| osx | 允许指定特定于 macOS 的任务属性。 |
| linux | 允许指定特定于 Linux 及其发行版的任务属性。 |
| group | 允许定义任务组和指定任务所属的组。 |
| presentation | 定义 VSCode 如何处理用户界面中的任务输出(请参见下面的示例)。 |
| options | 允许提供关于cwd(当前工作目录)、env(环境变量)和shell(默认 shell)选项的自定义值。 |

现在假设您想要创建一个构建任务，按照惯例，这是您用来编译源代码的任务类型。可以通过修改 tasks.json 来实现这一点，如下所示:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type": "shell",
            "command": "fpc",
            "args": ["${file}"]
        }
    ]
}

要点如下:

• 现在,label属性值是build,因此该任务显然是作为构建任务提供的。

• type属性值为shell，意味着它将由操作系统的 Shell 执行。

• command属性值为fpc，是自由 Pascal 编译器的文件名。

• args属性值是要传递给外部程序的命令行参数数组；在这种情况下，只有一个参数，即活动的源文件，由变量$(file)表示。

Note

一般来说，只有在操作系统的环境变量(如 Windows 上的PATH)中注册了完整路径的情况下，才可以调用外部程序，而无需指定其完整路径。在 Free Pascal 的情况下，安装程序声称负责注册程序的路径，但是要记住查看其他程序的环境变量。

您当然可以指定要编译的文件的名称，但是使用变量更灵活，因此您可以简单地编译代码编辑器中当前活动的任何文件。变量在“理解替代变量”一节中讨论，并在本章后面的表 8-3 中总结。注意智能感知如何帮助你在 tasks.json 中找到合适的属性，如图 8-10 所示。

图 8-10

智能感知有助于定义任务属性

表 8-3

支持的替代变量

|

可变的

|

描述

|
| --- | --- |
| ${workspaceFolder} | 表示当前打开的文件夹的路径。 |
| ${workspaceFolderBasename} | 表示当前打开的文件夹的名称，不带任何斜杠。 |
| ${file} | 活动代码文件的路径。 |
| ${relativeFile} | 相对于${workspaceFolder}的活动代码文件。 |
| ${fileBasename} | 活动代码文件的基本名称，不带路径和前导斜杠。 |
| ${fileBasenameNoExtension} | 不带扩展名的活动代码文件的基本名称。 |
| ${fileDirname} | 包含活动代码文件的目录的路径。 |
| ${fileExtname} | 活动代码文件的文件扩展名。 |
| ${cwd} | 任务的当前工作目录。 |
| ${lineNumber} | 活动文件中当前选定的行号。 |
| ${selectedText} | 活动文件中当前选定的文本。 |
| ${env.VARIABLENAME} | 引用一个环境变量，比如{$env.PATH}。 |

保存并关闭 tasks.json，然后打开一个 Pascal 源文件。现在您可以运行新创建的构建任务了。选择终端 ➤ 运行任务，从命令面板中选择构建任务(见图 8-11 )。

图 8-11

选择新任务

此时，VS Code 会询问您希望如何检测外部程序执行过程中遇到的任何问题，以便在 problems 面板中显示这些问题。检测程序输出中的问题是所谓的问题匹配器的工作。这是一个更复杂的主题，将在本章后面的“理解问题匹配器”一节中讨论。现在选择继续，不扫描任务输出(见图 8-12 )。

图 8-12

选择问题匹配器

免费的 Pascal 编译器在终端面板中执行，您也可以看到程序输出，如图 8-13 所示。

图 8-13

执行免费的 Pascal 编译器

如果执行成功，您将在源代码的文件夹中找到一个新的二进制文件。如果失败，终端面板中显示的编译器输出将帮助您了解问题所在。在开始第二个例子之前，我将解释更多关于默认任务、任务模板、tasks.json 中的 JSON 属性和变量的内容。

多个任务和默认构建任务

tasks.json 文件可以定义多个任务。正如本章前面所介绍的，除了其他任务之外，常见的任务是构建和测试，但是您可能希望实现特定于您的场景的多个任务。例如，假设您想使用免费的 Pascal 编译器来构建 Delphi 源代码文件。

免费的 Pascal 命令行编译器提供了-Mdelphi选项，支持基于 Delphi 兼容模式的编译。因此，您可以按如下方式修改 tasks.json:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type": "shell",
            "command": "fpc",
            "args": ["${file}"]

        },
        {
            "label": "Delphi build",
            "type": "shell",
            "command": "fpc",
            "args": [
                     "${file}",
                     "-Mdelphi"
                    ]
        }
    ]
}

如您所见，tasks 数组中有一个名为Delphi build的新定制任务，它仍然调用活动文件上的免费 Pascal 编译器，但是将-Mdelphi选项作为命令行参数传递。现在，如果您再次选择终端 ➤ 运行任务，您会在命令面板中看到这两个任务，如图 8-14 所示。

图 8-14

所有定义的任务都显示在命令选项板中

拥有多个构建任务，甚至多个相同类型的任务是很常见的，但是在大多数情况下，您通常会运行同一个任务，并为非常特殊的情况保留其他任务。与当前示例相关，您通常会构建 Pascal 源文件，有时会构建 Delphi 源文件，因此一个方便的选择是为 Pascal 文件配置一个默认的构建任务。正如您在前面的“默认构建任务”一节中所了解到的，您可以通过以下步骤轻松实现这一点:

1. 选择终端 ➤ 配置默认构建任务。

2. 在命令面板中，通过添加一个isDefault参数来选择前面定义的构建任务(您将很快在代码中看到)。

3. 在 Pascal 源文件激活的情况下，选择终端 ➤ 运行构建任务，或者按下系统的键盘快捷键。

该命令自动启动默认的构建任务，而不需要每次都手动选择任务。

了解 tasks.json 属性

有许多属性可用于自定义任务。表 8-2 总结了可用于自定义任务的常见属性。

下一节将分别讨论windows、osx和linux属性。group属性允许按类别对任务进行分组。例如，如果您考虑前面创建的两个多重任务，它们都与构建代码相关，因此它们可能被分组到一个叫做构建的类别中。这是通过修改 tasks.json 实现的，如下所示:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type": "shell",
            "command": "fpc",
            "args": ["${file}"],
            "group": "build",
        },
        {
            "label": "Delphi build",
            "type": "shell",
            "command": "fpc",
            "args": ["${file}", "-Mdelphi"],
            "group": "build"
        }
    ]
}

注意 IntelliSense 是如何显示group属性的内置支持值的(参见图 8-15 )。

图 8-15

智能感知帮助组

您还可以为组中的单个任务指定其他值。例如，如果您想将一个任务设置为组中的默认任务，您可以按如下方式更改 JSON:

"group": {
     "kind": "build",
     "isDefault": true
  }
}

kind属性表示组名，而isDefault不言自明。您还可以通过presentation属性定制 VS 代码处理任务输出的方式。当您键入presentation然后按 Tab 键时，IntelliSense 会添加一些带有默认值的键/值对，如下所示:

"presentation": {
    "echo": true,
    "reveal": "always",
    "focus": false,
    "panel": "shared",
    "showReuseMessage": true
}

以下是每个键及其值的描述:

• echo可以是true或false，指定任务输出是否实际写入终端面板。

• reveal可以是always、never或silent并指定运行任务的终端面板是应该总是可见、从不可见，还是仅在未指定问题匹配器且出现一些错误时才可见。

• focus可以是true或false，指定任务运行时终端面板是否应该获得焦点。

• panel可以是shared、dedicated或new，并指定终端实例是否跨任务共享，或者实例是否必须专用于当前任务，或者是否应该在每次任务运行时创建一个新实例。

• showReuseMessage可以是true或false,指定是否应显示一条消息，告知终端面板将被任务重新使用，因此可以将其关闭。

您在前面的代码片段中看到的值是默认值。在默认值的情况下，可以省略一个键。例如，以下标记演示了如何在每次运行时创建新的终端面板，而不显示重用消息:

"presentation": {
    "panel": "new",
    "showReuseMessage": false
}

其他值可以省略，因为我们可以接受前面文本中看到的默认值。

Note

受支持的属性列表要长得多，但是大多数都不常用。如果您想更深入地了解可用属性的完整列表，可以查看 tasks.json 模式，它提供了关于每个属性的详细注释；该模式在 https://code.visualstudio.com/docs/editor/tasks-appendix 可用。

了解替代变量

VSCode 还提供了几个预定义变量，您可以使用这些变量来代替常规字符串，并且在将这些变量传递给命令时，这些变量对于表示文件和文件夹名称非常有用。表 8-3 总结了支持的变量。

当您运行在项目/文件夹级别工作的任务时，或者针对您无法预测或不想硬编码的文件名运行任务时，使用变量是非常常见的。您可以在 https://code.visualstudio.com/docs/editor/variables-reference 查看变量文档了解更多详情。

操作系统特定的属性

有时，您可能需要根据操作系统提供不同的任务属性值。在 VSCode 中，可以根据目标使用windows、osx和linux属性来指定不同的属性值。

例如，以下 tasks.json 实现显示了如何为 Windows 和 Linux 显式指定外部工具的路径(在您的计算机上，目录名可能不同):

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type": "shell",
            "args": ["${file}"],
            "windows": {
                "command": "C:\\Program Files\\FPC\\fpc.exe"
            },
            "linux": {
                "command": "/usr/bin/fpc"
            }
        }
    ]
}

更具体地说，您需要将感兴趣的属性移动到操作系统属性下，并提供所需的值。在前面的代码中，command属性已经从较高的级别移到了windows和linux属性节点。

重用现有的任务模板

在前面关于编译 Pascal 源代码的例子中，您看到了如何从头开始创建一个定制任务。但是，对于某些特定的场景，您可以利用现有的任务模板，这些模板由已经预先配置为使用特定命令和设置的 tasks.json 文件组成。

任务模板列表可能会因您安装的扩展而异，但假设您只安装了 C#扩展，您的列表应该如图 8-9 所示。第一个模板名为 MSBuild，生成以下 tasks.json 文件:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type": "shell",
            "command": "msbuild",
            "args": [

// Ask msbuild to generate full paths for file names.
                "/property:GenerateFullPaths=true",
                "/t:build",
// Do not generate summary otherwise it leads to duplicate errors in Problems panel
                "/consoleloggerparameters:NoSummary"
            ],
            "group": "build",
            "presentation": {

// Reveal the output only if unrecognized errors occur.
                "reveal": "silent"
            },

// Use the standard MS compiler pattern to detect errors, warnings and infos
            "problemMatcher": "$msCompile"
        }
    ]
}

如果您想在 VS 代码中使用 Microsoft Visual Studio 解决方案，这个模板非常有用，下一小节将提供一个更具体的示例。值得一提的是，考虑到 C#解决方案(如基于.NET Framework)，但 MSBuild 可以构建任何类型的解决方案，因此它可以重用于不同的目的。

第二个模板名为 Maven，被定制为支持 Java 的同名构建自动化工具。这种模板会生成以下 tasks.json 文件:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "verify",
            "type": "shell",
            "command": "mvn -B verify",
            "group": "build"
        },
        {
            "label": "test",
            "type": "shell",
            "command": "mvn -B test",
            "group": "test"
        }
    ]
}

显然，Maven 必须安装在你的机器上(你可以在 https://maven.apache.org 找到它)。第三个模板叫做.NET Core，顾名思义，它生成一个 tasks.json 文件，该文件是为自动构建。净核心项目。配置如下所示:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "command": "dotnet",
            "type": "shell",
            "args": [
                "build",
                // Ask dotnet build to generate full paths for file names.
                "/property:GenerateFullPaths=true",
                // Do not generate summary otherwise it leads to duplicate errors in Problems panel
                "/consoleloggerparameters:NoSummary"
            ],
            "group": "build",
            "presentation": {
                "reveal": "silent"
            },
            "problemMatcher": "$msCompile"
        }
    ]
}

这种情况下，命令不是MSBuild；反而是dotnet。这些模板之所以有用，至少有两个原因:

• 它们为目标类型的项目提供了现成的配置，您可能只需要做一些调整。

• 它们提供了一个完整的任务结构，您只需要替换命令和目标，以及可选的演示和问题匹配器。

现在，您将看到一个基于 MSBuild 任务模板的示例。

第二个示例:生成 MSBuild 解决方案(仅限 Windows)

自第一次发布以来，MSBuild 一直是 Microsoft 的生成引擎.NET 框架早在 2002 年。它是一个非常强大的工具，因为它可以毫不费力地构建 Visual Studio 解决方案。因此，一个非常好的特性是可以在 VSCode 中编译您的解决方案和项目。

Note

从……开始.NET Core 3，有可能用 C#构建桌面应用，VSCode 将能够调试和运行它们，而无需任何额外的配置。然而，桌面应用已经建立了几十年，完全基于 Windows 演示基础和 Windows 窗体.NET 框架。因为 VSCode 不直接支持.NET Framework，您将需要按照本节中的说明自定义任务配置。

您可以配置一个任务来运行 Visual Studio 使用的生成引擎 MSBuild.exe。在下一个示例中，您将看到如何编译由基于 Windows Presentation Foundation(WPF)的 Visual Basic 项目构成的 MSBuild 解决方案，当然所有步骤都适用于任何。sln 文件和任何支持的语言。如果您没有，请在 Visual Studio 2019 中创建一个以 Visual Basic 为语言的空白 WPF 项目。不需要编写代码，因为重点在于项目类型。保存项目，然后在 VS 代码中打开项目文件夹。

在配置任务之前，值得一提的是，默认情况下，MSBuild 路径不在 Windows 环境变量中注册，因此您有两种可能的选择:

• 通过控制面板 ➤ 系统 ➤ 高级系统设置 ➤ 环境变量将 MSBuild 目录添加到PATH环境变量中。

• 在 tasks.json 中指定完整的 MSBuild 路径名。

选择终端 ➤ 配置任务。首先选择Create template from task . JSON选项，然后从模板列表中选择 MSBuild 模板。创建 tasks.json 后，按如下方式更改command属性的值，并将Enterprise(这是我计算机上的内容)替换为您计算机上的 Visual Studio 版本的名称，例如:

"command": "C:\\Program Files (x86)\\Microsoft Visual Studio\\2019\\Enterprise\\MSBuild\\Current\\Bin\\MSBuild"

此外，出于演示目的，将reveal属性的值从silent更改为always，以便您可以在终端面板中看到 MSBuild 的输出。现在选择终端 ➤ 运行任务并选择预配置的构建任务，MSBuild 将被启动，解决方案将被构建，如图 8-16 所示。

图 8-16

使用 MSBuild 任务编译用 Visual Basic 编写的 WPF 项目

预配置的 MSBuild 任务使用$msCompile问题匹配器来检测构建输出中与 C#和 Visual Basic 相关的问题，以便在用户界面中以方便的方式呈现这些问题。让我们更详细地研究一下问题匹配器。

了解问题匹配器

问题匹配器扫描任务输出文本中已知的警告或错误字符串，并在编辑器和问题面板中报告这些内容。VSCode 附带了许多内置的问题匹配器，用于 TypeScript、JSHint、ESLint、Go、C#以及 Visual Basic、Lessc 和 Node Sass(参见 https://code.visualstudio.com/docs/editor/tasks#_processingtaskoutput-with-problem-matchers )。

内置的问题匹配器非常有用，因为对于前面提到的环境，VS 代码可以在 problems 面板中显示编译时发生的问题，但它也可以在代码编辑器中突出显示导致问题的代码行。

您还可以定义自定义问题匹配器来扫描外部程序的输出。例如，用于扫描免费 Pascal 编译器的问题匹配器可能如下所示:

            "problemMatcher": {
                "owner": "external",
                "fileLocation": ["relative", "${workspaceRoot}"],
                "pattern": {

"regexp": "((([A-Za-z]):\\\\(?:[^\\/:*?\\\"
<>|\\r\\n]+\\\\)*)?[^\\/\\s\\(:*?\\\"<>|\\r\\n]*)\\((\\d+)\\):
\\s.*(fatal|error|warning|hint)\\s(.*):\\s(.*)",

// The first match group matches the file name which is relative.
        "file": 1,

// The second match group matches the line on which the problem occurred.
        "line": 2,

// The third match group matches the column at which the problem occurred.
        "column": 3,

// The fourth match group matches the problem's severity. Can be ignored. Then all problems are captured as errors.
        "severity": 4,
        // The fifth match group matches the message.
        "message": 5
                }

owner属性表示语言服务，在这种情况下它的值是external，但是在 C++项目的情况下它可以是cpp。但是最重要的属性是pattern，在这里指定一个正则表达式(regexp)来匹配外部程序发送的错误字符串。还要注意，在注释的帮助下，匹配是如何按目标分组的。构建问题匹配器可能很棘手，这超出了本书的范围，所以我建议您阅读在 https://code.visualstudio.com/docs/editor/tasks#_defining-a-problem-matcher 获得的官方文档。

用默认程序运行文件

如果您在 VS 代码中编辑一个类型与操作系统相关的文件，您不需要创建自定义任务来运行它。例如，您可以运行批处理程序(。bat)或一个 shell 脚本文件(。sh)，只需点击终端 ➤ 运行活动文件。

文件名被传递给系统上的当前终端程序(Windows 上的 PowerShell 或 Linux 和 macOS 上的 bash shell ),以便操作系统尝试使用注册了文件扩展名的程序(如果有)打开该文件。在批处理或 shell 脚本文件的情况下，操作系统执行该文件。输出显示在终端面板上。

Note

只有操作系统或命令行工具的输出会被重定向到终端面板。例如，如果您试图编辑一个. txt 文件，然后选择终端 ➤ 运行活动文件，这样一个文件将在您系统的默认文本编辑器中打开，并且不会有与终端面板的额外交互。

摘要

VSCode 中有许多功能使其不同于简单的代码编辑器。任务是这些功能中的一部分。通过任务，您可以将外部程序附加到应用生命周期中，并运行编译器之类的工具。对于某些环境，VS 代码附带了任务自动检测，但是当您需要将特定的工具与项目或文件夹相关联时，它允许创建定制的任务。

通过处理 tasks.json 文件并借助 IntelliSense，您可以在文件夹中包含任何外部程序的执行。像编译器这样的外部程序的执行当然是有用的，但是如果 VS 代码不能向前迈进一步的话就没那么重要了:调试代码，这将在接下来的两章中讨论，先用 C#再用 Python。

九、构建和调试应用：.NET 5 和其它平台

作为一个端到端的开发环境，VSCode 提供了您在其他代码编辑器中找不到的机会。事实上，在 VSCode 中，您可以使用许多项目类型，并用几种语言调试您的代码。本章首先概述了应用开发，然后解释了如何构建.NET 5 项目，以及如何使用所有内置的强大调试功能。即使您不打算将 C#用于 VSCode，我也建议您阅读本章，因为大多数概念也适用于其他语言，尤其是 TypeScript、JavaScript 和 Python。

创建应用

VSCode 独立于专有的项目系统和平台，因此，它不提供任何用于创建项目的内置选项。这意味着您需要依赖每个平台提供的工具。本节解释如何基于新的？NET 5，但是您也可以使用其他平台提供的命令行界面来创建项目。

我还建议您在磁盘上为以下示例创建一个专用文件夹。借助系统上的文件管理器工具(Windows 上的 Windows Explorer、macOS 上的 Finder 以及 Ubuntu 等 Linux 发行版上的 Nautilus)，在根文件夹下创建一个名为 VSCode 的文件夹，例如 C:\VSCode 或~/Library/VSCode。在这个文件夹中，您将很快创建新的应用。

Note

以下主题是在的上下文中讨论的.NET 5，但是 VSCode 支持所有.NET Core 版本高达 3.1。因此，所有解释和示例都适用于.NET Core 也是。

介绍.NET 5

.NET 5 是微软新的主要版本.NET 技术。释放后。几年前，微软就已经有了在两者之间实现完全统一的愿景.NET 框架和.NET 核心，致力于一个单一的，跨平台的 API，可以带来强大的.NET 提供给任何系统上的任何开发人员。

你可能知道.NET Core 是一个跨平台、开源、模块化的运行时，可以使用 C#、F#和 Visual Basic 构建在 Windows、macOS 和 Linux 发行版上运行的应用。与.NET Core，您可以创建不同种类的应用，如 web 应用、Web API REST 服务、控制台应用和类库。它的哥哥.NET Framework 还包括创建桌面应用的能力，如 Windows 窗体和 Windows Presentation Foundation.NET Framework 最大的限制是只能在 Windows 上运行。

所以.NET 5 可以认为是两者的更新。网芯和.NET 框架；有了它，微软将两种技术结合在一起，提供了一个统一的开发平台，具有.NET 核心，再加上.NET 框架。.NET 5 还包括 C# 9 和 F# 5，但它不支持用 C#和 F#进行移动开发，这是为.NET 6，包括 Xamarin。此外，在撰写本文时.NET 5 你只能在 Windows 上创建桌面应用。

有几种方法可以得到。净 5。作为一个使用 VSCode 的开发人员，最简单的方法就是从官方网站下载最新版本( https://dotnet.microsoft.com )。通过该网站，您可以选择与您的操作系统相匹配的安装包。对于下面的解释和例子，我假设您已经下载并安装了。你机器上的. NET 5。

创造。净 5 个项目

.NET 5 附带了丰富的命令行界面，提供了许多选项来创建不同种类的项目和单个文件。您可以通过使用dotnet工具，更具体地说是通过调用dotnet new命令，从命令行创建项目和文件。例如，如果您想用 C#创建一个控制台应用，您可以输入以下命令:

> dotnet new console

默认情况下，dotnet工具假设您想要使用 C#，除非您明确指定一种不同的语言。例如，以下命令使您能够使用 Visual Basic 创建控制台应用:

> dotnet new console -lang VB

表 9-1 提供了所有可用模板的综合列表和描述。

表 9-1

可用.NET 项目和文件模板

|

模板名称

|

简称

|

语言

|   |
| --- | --- | --- | --- |
| 控制台应用 | 安慰 | C#、F#、VB |   |
| 类库 | jclasslib(消歧义) | C#、F#、VB |   |
| WPF 应用 | 西皮尔巴拉粉 | C#、VB |   |
| WPF 类库 | 瓦普利卜 | C#、VB |   |
| WPF 海关控制图书馆 | wpfcustomcontrollib | C#、VB |   |
| WPF 用户控制库 | wpfusercontrollib | C#、VB |   |
| Windows 窗体(WinForms)应用 | 窗体 | C#、VB |   |
| 工人服务 | 工人 | C# |   |
| 单元测试项目 | mstsch est | C#、F#、VB |   |
| NUnit 3 测试项目 | 努尼特 | C#、F#、VB |   |
| NUnit 3 测试项目 | 努尼特试验 | C#、F#、VB |   |
| xUnit 测试项目 | 朱尼特 | C#、F#、VB |   |
| 剃刀组件 | 剃刀组件 | C# |   |
| 剃刀页 | 页，面，张，版 | C# |   |
| MVC 视图导入 | 视图导入 | C# |   |
| MVC ViewStart | view state-检视状态 | C# |   |
| Blazor 服务器应用 | blazorserver | C# |   |
| Blazor WebAssembly 应用 | blazorwasm | C# |   |
| ASP.NET 核心空了 | 网 | C#、F# |   |
| ASP.NET 核心 Web 应用(模型-视图-控制器) | 手动音量调节 | C#、F# |   |
| ASP.NET 核心网络应用 | webapp，razor | C# |   |
| 带棱角的 ASP.NET 芯 | 有角的 | C# |   |
| ASP.NET 核心与 React.js | 反应 | C# |   |
| 带有 React.js 和 Redux 的 ASP.NET 核心 | reactredux | C# |   |
| Razor 类库 | razorclasslib | C# |   |
| ASP.NET 核心 Web API | webapi | C#、F# |   |
| ASP？ASP？ASP？net core grpc 服务 | 断续器 | C# |   |
| dotnet gitignore 档案 | 吉蒂尔 |   |   |
| global.json 文件 | 全球 json |   |   |
| nuget 配置 | nugetconfig |   |   |
| 点网本地工具清单文件 | 工具清单 |   |   |
| Web 配置 | web config(web config) |   |   |
| 解决方案文件 | 豆状下核 |   |   |
| 协议缓冲文件 | 样机 |   |   |

Note

所有 Windows 窗体和 WPF 模板都只能通过。净 5。对于 C#和 F#来说，它们已经可以使用了。网芯 3.1。然而，表 9-1 中描述的大部分模板在之前的版本中就已经存在。

在这一节中，我将展示一个基于 C#的例子和一个基于模型-视图-控制器(MVC)模式的 ASP.NET 核心 web 应用。根据您的系统，在之前创建的 VSCode 文件夹中打开命令提示符或终端实例。

键入以下命令创建一个名为 HelloWeb 的新空文件夹:

> mkdir HelloWeb

然后，进入新目录。在 Windows 和 Linux 上，您可以键入

> chdir HelloWeb

在 macOS 上，该命令改为cd，这在 Windows 上也常用作chdir的快捷方式。

接下来，键入以下命令来构建一个新的。使用 C#的. NET 5 web 应用:

> dotnet new mvc

mvc命令行开关指定新的 web 应用基于 MVC 模式和.NET SDK 将为一些控制器和视图生成所有的管道代码。您也可以使用web开关创建一个空的 web 应用，但是拥有一些自动生成的页面将有助于描述调试特性。一旦创建了项目.NET 5 将自动恢复解决方案的 NuGet 包。您也可以通过键入以下命令来手动完成此操作:

> dotnet restore

如果您键入dotnet run，开发服务器将开始运行，然后您需要打开浏览器并手动启动应用。但是，目标是理解如何在 VSCode 中运行和调试应用。所以，用 VS 代码打开项目文件夹。您也可以从命令行键入code .来打开 VSCode。多亏了 C#扩展，VS 代码可以识别。csproj 项目文件，组织文件和文件夹，并启用您之前学习的所有强大的代码编辑功能。

下一步是运行应用。通常，在 VSCode 中有两种选择:

• 运行附加了调试器实例的应用，其中调试器可用于当前项目类型。在...的情况下.NET 5，它自带了与 VS 代码集成的调试器。

• 在没有附加调试器实例的情况下运行应用。

让我们从第二个选项开始，然后在下一节中详细描述调试特性。您可以选择运行 ➤ 运行而不调试。VSCode 首先要求您指定一个环境，因此选择.NET Core，然后它开始默认的构建任务。对于 Web 应用，VS 代码启动开发服务器的一个实例，但是为了运行应用，您需要手动打开浏览器并输入您在终端面板中看到的网址。

Note

第一次运行某些代码时，VS 代码可能会显示一条弹出消息，指出需要必需的资产来启用构建和调试。接受提议，VS 代码会完成剩下的工作。

图 9-1 显示了之前构建的 web 应用。

图 9-1

那个.NET web 应用运行

Note

您的浏览器可能会显示警告，指出该网站不安全。因为当前正在使用本地开发环境，所以您可以忽略该警告并继续显示网页。此外，一些浏览器可能会要求为当前站点添加一个安全例外，您可能希望接受它以避免每次都出现警告。

ASP.NET 网络应用使用一个名为 Kestrel ( https://github.com/aspnet/AspNetCore )的开源开发服务器，它允许独立于专有系统。默认情况下，Kestrel 监听端口 5001 上的应用，这意味着您的应用可以在http://localhost:5001到达。您可以在名为 launch.json 的文件中更改默认端口设置，这将在后面的“配置调试器”一节中详细讨论

通过前面的简单步骤，您已经能够用 VS 代码创建并运行一个. NET 5 项目，您当然可以根据需要使用强大的 C#代码编辑功能进行编辑。

在其他平台上创建项目

显然，.NET 5 并不是你使用 VS 代码的唯一平台。根据平台的不同，您将使用特定的命令行工具来构建新项目。在下一章中，你将学习如何使用 Python 项目，但是在这一章中提供一些上下文也是值得的。例如，使用 Node.js 可以快速创建基于 Express.js 框架的 JavaScript 项目( https://expressjs.com )。

Express 是一个最小且灵活的 Node.js web 应用框架，它提供了一组健壮的特性来开发 web 和移动应用。它促进了基于节点的 web 应用的快速开发，并包括一些功能，如设置中间件来响应 HTTP 请求，定义用于根据 HTTP 方法和 URL 执行不同操作的路由表，以及根据向模板传递参数来动态呈现 HTML 页面。使用 Express 创建应用的一个简单方法是使用 Express 应用生成器( https://expressjs.com/en/starter/generator.html )，使用以下命令安装:

> npm install -g express-generator

接下来，您可以使用以下命令生成一个 JavaScript 项目:

> express expressexample

请注意，npm 要求全部使用小写字母。然后，您可以键入code .在 VSCode 中打开新项目。图 9-2 显示了一个在 VSCode 中使用 Express JavaScript 框架创建的 JavaScript 项目。

图 9-2

用 VS 代码中的 Express JavaScript 框架创建的 JavaScript 项目

您可以使用其他命令行工具遵循类似的过程来生成项目，例如仍然可用于 Node.js 的 Yeoman generator ( https://yeoman.io/ )，它还允许生成 ASP.NET 核心项目和 VS 代码扩展。例如，您可以使用 Apache Cordova 框架( https://cordova.apache.org )创建移动应用。Cordova 是一个基于 JavaScript 的框架，它与 Node.js 配合得非常好。使用 Cordova 构建的应用基于 JavaScript、HTML 和级联样式表(CSS)。首先，您可以使用以下命令安装 Cordova:

> npm install -g cordova

然后，您可以使用以下命令轻松构建一个 Cordova 项目:

> cordova create mycordovaproject

其中mycordovaproject是新项目的名称。一旦您有了一个新的或现有的 Cordova 项目，您就可以安装 Cordova Tools extension for VSCode( https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools )。该扩展为 Node.js 的集成调试器添加了对 Cordova 项目的支持，提供了针对 Android 和 iOS 设备以及模拟器的特定配置。

Note

您还需要一些额外的用于 Cordova 的特定工具，这取决于您打算以什么系统为目标。对于 iOS，需要从 Apache Cordova ( https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html )安装 iOS 平台指南中描述的工具。对于 Android，需要安装 Apache Cordova ( https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html )的 Android 平台指南中描述的工具。

调试您的代码

VSCode 的代码调试功能是其最强大的功能之一，也可能是使其比其他代码编辑器略胜一筹的功能。VSCode 附带了一个用于 Node.js 应用的集成调试器，并且可以使用第三方调试器进行扩展。例如，如果你有.NET 5 时，VSCode 的 C#扩展会检测兼容调试器的可用性，并负责将其附加到 VS 代码。

我们将考虑使用 C#和.NET Core 作为调试工作方式的示例，因此重新打开您之前创建的 HelloWeb 文件夹。

Note

本章中讨论的所有特性都适用于所有受支持的调试器(内置的和通过可扩展性的)，因此它们并不特定于 C#和。净 5。

运行视图提供了一种与调试器交互的方式。图 9-3 显示了此时它是如何出现的。

在视图的顶部，您可以看到运行工具栏，它提供以下项目:

• 开始调试按钮，用播放图标(白色和绿色箭头)表示。单击此按钮将启动附加了调试器实例的应用。

• 配置下拉框。在这里，您可以选择用于运行应用的调试器配置。

• 设置按钮，用齿轮图标表示，它的工具提示说打开 launch.json (细节稍后提供)。

• 由 … 按钮代表的子菜单，包含可用和选定视图的列表，以及调试控制台命令，该命令打开调试控制台面板，从中可以看到调试器的输出消息。

在这个快速概述之后，您已经准备好学习调试器配置，然后您将浏览 VS 代码中可用的调试工具。

配置调试器

在调试器可以检查应用之前，必须对其进行配置。对于 Node.js 和.NET 5 中，一个扩展负责所有的事情，提供了默认的配置。图 9-3 显示了两种预定义的配置。网芯推出和。网芯附着。

图 9-3

运行视图

第一种配置用于在适当的主机中运行应用，并附带一个调试器实例。对于当前示例中的 ASP.NET 核心 web 应用，主机是 web 浏览器。在控制台应用的情况下，主机将是 Windows 控制台或 macOS 和 Linux 中的终端。第二种配置可用于将调试器附加到另一个正在运行的.NET 5 应用。

Note

实际上，对于您使用创建的每种应用，都有一个不同的. NET 核心启动配置.NET 核心。例如，控制台应用的配置称为.NET 核心启动(控制台)。要记住的概念是，提供启动配置是为了将调试器的实例附加到当前项目。

调试器配置存储在一个名为 launch.json 的特殊文件中。vscode 子文件夹(以及 tasks.json)。这个特殊的 JSON 文件包含指示 VSCode 必须调试的输出二进制文件和应用宿主的标记。当前的 launch.json 的内容.NET Core 示例如下所示:

 {
    "version": "0.2.0",
    "configurations": [
        {
            // Use IntelliSense to find out which attributes
            // exist for C# debugging
            // Use hover for the description of the
            // existing attributes
            // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            // If you have changed target frameworks, make sure to update the program path.
            "program": "${workspaceFolder}/bin/Debug/net5.0/HelloWeb.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\\\bNow listening on:\\\\s+(https?://\\\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        },
        {
            "name": ".NET Core Attach",
            "type": "coreclr",
            "request": "attach",
            "processId": "${command:pickProcess}"
        }
    ]
}

如您所见，该文件的语法类似于 tasks.json 的语法。对于阵列中的每种配置，最重要的属性是

• name，表示配置友好的名称。

• type，表示调试器运行的运行时类型。

• request ( launch或attach)，决定调试器是附加到当前项目还是外部应用。

• preLaunchTask，包含调试会话开始前要执行的任何任务。通常，此属性是与默认的生成任务一起分配的。

• program，表示将成为调试会话主题的二进制文件。

• env，代表环境。在...的情况下.NET 5 中，Development的值指示 VS 代码运行 Kestrel 开发服务器。

如果您想实现定制配置，launch.json 是添加它们的地方。因为这两种配置，以及更一般的默认配置，对于大多数常见需求来说已经足够了，所以本书不讨论定制配置。文档提供了关于这个主题的更多细节( https://code.visualstudio.com/docs/editor/debugging#_add-a-new-configuration )。

Note

当 launch.json 是活动文件时，如果您单击位于代码编辑器右下角的添加配置按钮，您将能够从您可以添加到 launch.json 的内置配置列表中进行选择。

管理断点

在开始调试会话之前，放置一个或多个断点以发现 VS 代码中的全部调试功能是很有用的。通过在您感兴趣的行上按 F9 键，单击行号旁边的空白来放置断点。例如，在 Startup.cs 文件的第 18 行放置一个断点，如图 9-4 所示。

图 9-4

添加断点

您可以通过再次点击来删除断点，或者您可以在运行视图的断点区域管理断点(参见图 9-5 )。

图 9-5

管理断点

在这里，您可以看到包含任何断点和行号的文件列表。您还可以使调试器在遇到用户未处理的异常(默认)和所有异常时中断。可以点击添加函数断点 (+)按钮。调试器可以通过指定函数名来支持创建断点，而不是直接在源代码中放置断点。这在源代码不可用但函数名已知的情况下很有用。

调试应用

现在是启动调试会话的时候了，这样您就可以看到所有调试工具的运行情况，并在遇到断点时做出决定。在运行视图中，确保.NET Core Launch (web) 配置被选中，然后点击开始按钮或按 F5 。VSCode 启动调试器，它将在调试控制台面板中显示调试器的输出。当遇到异常或断点时，它也会中断，就像当前的例子一样。

图 9-6 显示了 VS 代码命中一个断点以及所有的调试工具。用黄色突出显示的代码行是将作为下一行执行的代码行。

图 9-6

命中断点时可用的调试工具

请注意，调试时状态栏变为橙色，并且调试控制台窗口显示关于调试过程的信息。在左侧，调试视图显示了许多工具:

• VARIABLES ，它显示了当前受调试器控制的变量列表，您可以通过展开每个变量来调查这些变量。该面板包括一个名为“局部变量”的子列表，它显示当前范围内的变量列表。每个都可以进一步展开以查看其详细信息。

• 看，一个可以评价表情的地方。

• 调用栈，这里可以看到方法调用的栈。如果单击方法调用，代码编辑器会将您带到进行该调用的代码。

• 断点，在这里可以管理断点。

在窗口的顶部，还可以看到名为调试操作窗格的调试工具栏(见图 9-6 )，它由以下命令组成(从左到右):

• Continue ，允许在断点或异常中断后继续执行应用。

• 单步执行，它一次执行一条语句，但方法调用除外，方法调用是在不单步执行的情况下调用的。

• 进入，一次执行一条语句。方法体内的语句也是一次执行一条。

• 步出，从当前断点开始执行函数的剩余行。

• 重启，您选择它来重启应用的执行。

• Stop ，您调用它来停止调试。

这些命令及其键盘快捷键也可以在运行菜单中找到。例如，如果点击跨过按钮，高亮显示的行运行，执行前进一行(见图 9-7 )。如果您将光标悬停在代码编辑器中的变量名上，一个方便的弹出框使您能够轻松地调查值和属性值(取决于变量的类型)，如图 9-7 所示，其中显示了一个包括关于configuration变量的信息的弹出框。您可以展开属性并查看它们的值，还可以在运行和调试栏的变量区域中调查属性。

图 9-7

调试时调查属性值

评估表达式

您可以选择使用观察工具来评估表达式。调试时，点击观察框中的添加表达式 (+)按钮，然后输入要计算的表达式。例如，如果您键入configuration != null，观察工具将根据对象是否有实例返回true或false。图 9-8 显示了一个例子。

图 9-8

评估表达式

调用堆栈

调试器还提供了调用栈特性，它允许单步执行方法调用的层次结构。当你点击堆栈中的一个方法调用时，代码编辑器打开包含该方法调用的文件，突出显示该方法调用(参见图 9-9 )。

图 9-9

遍历方法调用

当您遍历方法调用时,“变量”面板的“局部变量”子视图也会更新，以显示当前范围内的变量。只有当方法是源代码的一部分时，代码编辑器才能突出显示方法调用，因此它不允许对调用堆栈中标记为[外部代码]的方法进行进一步的控制(参见图 9-9 )，但是该功能非常有用，尤其是当您遇到错误并且需要回退代码时。

调试控制台面板

调试控制台当然是 VS 代码显示调试器输出的地方，但是，顾名思义，它也是一个交互式面板，您可以在其中评估表达式。您可以在>符号附近键入表达式，然后按 Enter 键。

图 9-10 显示了一个评估configuration变量是否不为空的例子。

图 9-10

在调试控制台面板中计算表达式

摘要

当您使用真正的应用时，VSCode 作为开发环境的强大功能就会显现出来。在特定生成器的帮助下，您可以轻松生成。使用 C#或 Node.js 项目的. NET 5 项目。本章描述了如何利用强大的内置调试器，该调试器提供了编写优秀应用所需的所有必要工具，如断点、变量调查、调用堆栈和表达式求值器。

通过完成本章，您已经了解了使用 VSCode 编写优秀的跨平台应用所需的所有最重要和最强大的功能。

十、使用 Python 构建应用

Python 是一种非常流行和强大的编程语言，可用于开发任何类型的应用，对于构建数据科学和数据分析应用尤其有用。

Python 是一种解释性的、面向对象的编程语言，任何经验的开发人员都可以学习。本章描述 VSCode 如何支持构建和调试 Python 代码，包括特定的代码编辑功能。显然，本章的重点不是 Python 语言，而是 Python 如何与 VS 代码一起使用。

章节先决条件

在这一章中，我提供了运行和调试 Python 代码的例子。遵循这些示例要求您在继续阅读之前安装以下组件:

图 10-1

来自微软的官方 Python 扩展

• Python 解释器及其工具，可以从 Python 官方网站( https://www.python.org/downloads )下载。下载页面会自动检测您的操作系统，并提供适用于 Windows、macOS 和 Linux 发行版的下载包。

• Microsoft 提供的 VSCode 的 Python 扩展，可以通过扩展面板安装。市场上有几个 Python 的扩展，但我建议您下载官方的，如图 10-1 所示，因为它通过调试器和额外的编码工具极大地改善了开发体验。

Note

本章介绍了一个简单的代码示例，但是在现实世界中，您可能想要构建更复杂的应用，在这种情况下，您需要额外的组件。例如，构建数据科学应用需要 Anaconda ( https://www.anaconda.com )，一个包含 Python 和 R 编程语言的发行版，外加一组数据科学专用的库。如果你需要做 web 开发，你可以考虑 Django ( https://www.djangoproject.com )，一个用 Python 构建的 web 框架。

如果您还没有为代码示例在磁盘上创建一个专用文件夹(我的文件夹名为 VSCode)，正如前面章节中所建议的，我建议您在本章中这样做。

现在，您已经安装了所有最低要求的工具，可以开始在 VSCode 中使用 Python 进行编码和调试了。

创建 Python 应用

在本书的前面，您已经了解到 VSCode 独立于专有的项目系统和平台，因此不提供任何用于创建项目的内置选项，对于 Python 编程语言也是如此。

使用 VSCode 可以打开现有的 Python 文件和项目，或者从开发环境中创建新的代码文件。作为一个例子，让我们考虑一个简单的战舰游戏，在pythonfiddle.com/battleships-game-in-python/的一个代码文件中。在 VSCode 中，创建一个新文件，然后从位于右下角的下拉菜单中选择 Python 作为语言。当前状态下的源代码不能与最新版本的 Python 解释器一起工作，因为它缺少了包围print函数参数的括号和一些字符串到整数的转换。为了方便起见，这里列出了修改后的 Python 工作代码:

import random

board = []

for x in range(0,5):
  board.append(["O"] * 5)

def print_board(board):
  for row in board:
    print (" ".join(row))

print ("Let's play Battleship!")
print_board(board)

def random_row(board):
  return random.randint(0,len(board)-1)

def random_col(board):
  return random.randint(0,len(board[0])-1)

ship_row = random_row(board)
ship_col = random_col(board)
print (ship_row)
print (ship_col)

for turn in range(4):
        guess_row =  int(input("Guess Row:"))
        guess_col = int(input("Guess Col:"))

        if guess_row == ship_row and guess_col == ship_col:
          print ("Congratulations! You sunk my battleship!")
          break

        else:
            if turn == 3:
                    board[guess_row][guess_col] = "X"
                    print_board(board)
                    print ("Game Over")
                    print ("My ship was here:
                    [" + str(ship_row) + "][" + str(ship_col)
                    + "]")
            else:
                    if (guess_row < 0 or guess_row > 4) or
                       (guess_col < 0 or guess_col > 4):
                        print ("Oops, that's not even
 in the ocean.")
                    elif(board[guess_row][guess_col] == "X"):
                        print
                              ("You guessed that one already.")
                    else:
                        print ("You missed my battleship!")
                        board[guess_row][guess_col] = "X"
                    print (turn + 1)
                    print_board(board)

将文件另存为 BattleshipsGame.py，这是战列舰游戏的简化实现，主要用于学习目的，但足以理解 VSCode 如何支持 Python 开发。当您键入源代码时，您会立即注意到强大的编辑功能，例如(但不限于)IntelliSense 和参数提示，但是在突出显示特定于 Python 的编辑功能之前，我将带您运行和调试 Python 代码。

运行 Python 代码

当您将这种语言分配给代码文件或打开现有文件时，VSCode 会自动尝试在您的计算机上检索适当的 Python 解释器。有时，即使您之前成功安装了 Python 解释器，VS 代码也可能无法做到这一点，在这种情况下，您会收到类似于图 10-2 所示的警告。

图 10-2

VSCode 找不到 Python 解释器

点击警告卡中的选择 Python 解释器按钮或状态栏左下角的同名项目，可以选择您最喜欢的 Python 解释器版本(见图 10-3 )。

图 10-3

选择 Python 解释器的版本

如果您需要选择一个特定的版本，而不一定是最新的版本，这是一个非常好的选择。一旦选择了 Python 解释器，其名称就会出现在状态栏上，取代“选择 Python 解释器”按钮，并且您可以运行或调试代码。让我们从运行代码开始，你可以通过选择运行 ➤ 运行来完成，不需要调试。Python 运行时构建代码文件，如果没有发现错误，代码的输出将显示在终端面板的实例中。图 10-4 显示了一个基于之前提供的示例游戏的例子。

图 10-4

Python 代码在终端中的输出

终端允许用户输入，所以你可以输入战舰的数值。在幕后，VSCode 调用一个名为 Launcher 的工具，该工具与 Python 解释器一起安装，使从命令行运行 Python 代码成为可能。

Note

在基于 Anaconda 库的更具体的开发场景中，例如 data science，VSCode 能够显示额外的工具窗口，并在开发环境中显示图表和计算结果。更多详情请见官方数据科学教程(code.visualstudio.com/docs/python/data-science-tutorial)。

对于下一个例子，确保在第 30 行添加一个断点(如第九章所述)。这是为了演示 Python 的调试工具是如何工作的。你可以通过按 F5 键，点击运行面板中的运行和调试按钮，或者选择运行 ➤ 开始调试来开始调试 Python 代码。此时，VSCode 会询问您想要调试什么文件或程序，如图 10-5 所示。

图 10-5

选择调试目标

您可以选择任何一种配置，这些配置由 Python 扩展为 VS 代码提供，如表 10-1 中所述。

表 10-1

Python 的调试配置

|

配置名称

|

VS 代码描述

|

描述

|   |
| --- | --- | --- | --- |
| Python 文件 | 调试当前活动的 Python 文件 | 开始调试当前活动的 Python 文件，其中“活动”是指活动编辑器中的文件。 |   |
| 组件 | 通过使用-m调用 Python 模块来调试它 | Python 模块可以被视为代码库，类似于 C#库中的名称空间。用-m开关调试使 VS 代码也能调试一个模块。 |   |
| 远程连接 | 连接到远程调试服务器 | 允许将 VS 代码连接到远程调试服务。 |   |
| 使用进程 ID 附加 | 附加到本地进程 | 允许将调试器连接到已经运行的进程。您需要检索进程 ID(例如，在 Windows 上，您可以通过任务管理器进行检索)。 |   |
| Django | 启动并调试 Django web 应用 | Django 是一个高级 Python web 框架，支持快速开发安全且可维护的网站。使用这个选项，您可以在 VS 代码中调试 Django 项目。 |   |
| FastAPI | 启动并调试 FastAPI web 应用 | FastAPI 是一个用 Python 构建 API 的现代 web 框架(需要 3.6 或更高版本)。通过这种配置，您可以使用 VS 代码来调试 FastAPI 项目。 |   |
| 瓶 | 启动并调试 Flask web 应用 | Flask 是另一个允许用 Python 构建 web 应用的框架。通过这种配置，VS 代码使得调试 Flask 项目成为可能。 |   |
| 金字塔 | 启动和调试金字塔 web 应用 | Pyramid 是 Python 的一个框架，允许基于模型-视图-控制器(MVC)模式创建 web 应用。通过这种配置，您可以在 VS 代码中调试金字塔项目。 |   |

对于当前示例，选择第一个选项 Python 文件，这允许调试当前代码文件。应用在集成终端中启动，VS 代码的状态栏变为橙色，这表明应用处于调试模式。在终端中，您将能够输入战列舰游戏的值，然后，因为您先前设置了一个断点，执行将在第 30 行中断。这将启用运行面板中的所有工具箱以及代码编辑器中的数据提示(参见图 10-6 )。

图 10-6

调试模式下的应用和已启用的调试工具

如果将光标悬停在代码编辑器中的变量名上，您将能够看到它的当前值。例如，如果您将鼠标悬停在guess_col变量上，您将看到它包含您在执行过程中输入的整数值。然而，Python 调试工具提供了更多:如果您将鼠标悬停在复杂类型上，如数组的list变量board，您将看到复杂的数据提示如何显示列表中每个数组的值。您可以扩展特殊变量和函数变量组，以获得关于运行时函数的更多信息。

您通过数据提示看到的值也可以在运行面板的变量工具的局部变量组中看到。Python 的调试工具也能够捕捉运行时异常，并显示适当的信息来解决它们。为了理解这是如何工作的，您可以有意地在当前的示例文件中引入一个运行时异常。考虑第 27 行，如下所示:

guess_row = int(input("Guess Row:"))

按如下方式更改该行:

guess_row = input("Guess Row:")

这一行仍然有效，因为它仍然等待用户从键盘输入一些东西；与原始行的区别只是类型为str的输入没有被转换成int。然而，虽然使用等式操作符的比较将会成功，但是使用第 40 行的<和>操作符进行的比较将会失败，因为这一行试图将用户输入(现在是一个字符串)与一个整数值进行比较，而这样的比较不受支持，因此将会发生运行时异常。图 10-7 展示了 VSCode 在遇到运行时异常时是如何中断应用执行的。

图 10-7

在 Python 中调试运行时异常

更具体地说，异常信息显示在不同颜色的工具提示中，该工具提示显示在导致错误的代码行的正下方。在这个工具提示中，您可以看到异常类型(本例中为TypeError)、代码行的编号和内容，以及完整的错误消息。实际上，工具提示还会以超链接的形式显示导致异常的文件的名称。当异常由执行层次结构中的不同文件引发时，这非常有用，使您能够通过单击文件名快速找到问题。

正如您所看到的，在 VSCode 中调试 Python 代码是一种丰富的体验，但实际上 Python 扩展提供了更多的功能，如专用语言服务和其他特性，这些将在下一节中讨论。

Python 的代码编辑功能

VSCode 的 Python 扩展为 Python 文件带来了第三章中描述的大多数强大的代码编辑特性。这一节将带您浏览进化的代码编辑特性，描述这些特性如何提高您的工作效率。

使用智能感知增强单词补全

对于任何语言来说，最有效的代码编辑特性可能是增强的单词完成引擎，VS 代码为 Python 带来了智能感知。IntelliSense 在您键入时出现，并显示有关当前在 IntelliSense 弹出框中选择的类型或成员的文档工具提示。图 10-8 显示了一个基于bin函数的例子，在这里你也可以看到语法着色是如何在工具提示中提供的，从而更容易理解方法的用法。

图 10-8

Python 中的智能感知

使用参数提示理解函数参数

连接到 IntelliSense 的是参数提示。当你键入一个函数名时，你会得到如何提供参数的建议，如图 10-9 所示，它是基于pow函数的。

图 10-9

参数提示解释了如何提供函数参数

如您所见，您当前提供的参数以粗体和下划线突出显示，而参数本身的描述作为工具提示的文本内容提供。

快速检索类型定义

在代码编辑器的生产力特性中，Go to Definition 和 Peek Definition(参见第三章)当然非常有用和受欢迎，这些也适用于 Python 代码文件。要理解它们在 Python 中是如何工作的，右键单击代码文件最后一行中的print_board语句的board参数。

如果点击转到定义，光标移动到声明board变量的地方。如果您选择 Peek ，然后选择 Peek Definition ，定义将显示在一个交互式弹出框中，您可以在其中直接进行编辑(参见图 10-10 )。

图 10-10

查看类型定义

查找参考

正如在第三章中所解释的，就像其他语言如 C#一样，你可以在 Python 中快速搜索给定类型、成员或变量的所有引用。只需在代码编辑器中右键单击您选择的对象，并选择查找所有引用。例如，您可以在示例代码文件中使用board变量来实现这一点，您将通过已经众所周知的交互式编辑器看到它在代码中的使用位置，该编辑器突出显示出现的位置，并在面板的右侧显示引用列表。图 10-11 展示了这一点。

图 10-11

查找对象引用

Note

“查找所有引用”用户界面基本上是 Peek 定义的扩展版本。后者显示了一个对象的单独引用，表示它被定义的位置。“查找所有引用”显示所有类型或成员引用。

重命名符号

使用 Python 扩展，重命名符号是一项简单的任务。您只需右键单击一个符号，选择重命名符号(或按 F2)，并提供新名称，源代码中出现的所有内容都会相应地被重命名。当键入新名称时，您也可以按 Shift+Enter 并查看将被重命名的所有实例的预览。

图 10-12 显示了一个基于board变量的例子，并启用了预览。

图 10-12

重命名符号

如果您启用了“重构预览”面板，您需要单击勾号图标以接受您的更改。如果您没有查看预览就输入了新名称，只需按 Enter 键，所有出现的符号(包括引用的符号)都将被重命名。

查找链接器的代码问题

Linters 突出了代码中的语法和风格问题。仅举一个例子，linters 突出显示代码块中缺少的括号或圆括号，或者突出显示未定义变量的用法，用曲线给代码加下划线。默认情况下不启用林挺，但是您可以通过命令选项板快速完成此操作。你可以直接输入 Python Select Linter ，或者只输入 Python ，然后选择合适的命令。图 10-13 显示了如何在我输入时使用过滤后的命令列表启用林挺。

图 10-13

启用 Python linters

选择此命令时，命令调板还会显示 Python 可用的 linters 列表。这实际上取决于你的选择，但是我建议使用 pylint ，这是通过 Python 扩展提供的微软官方 linter。启用 linter 后，代码编辑器会在有问题的代码下显示波浪线，这些代码问题也会在问题面板中详细说明，如图 10-14 所示。

图 10-14

Linters 在编辑器和“问题”面板中突出显示代码问题

Note

如果您在 VSCode 中有使用 C#的经验，您可能会期望与您键入时相同的实时代码分析行为，但是，使用 Python，只有在保存代码文件或通过从命令面板显式调用 linter 之后，linter 才能在有问题的代码下显示曲线。Pylance 扩展对此进行了增强，下面将简要介绍。

Note

通过 Settings.json 文件，可以使用 Settings 用户界面进一步定制 Linters 和其他编辑功能。因为这本书的目标是提供快速获得生产力的最有效方法的指导，所以我展示了只需点击几下鼠标即可获得的最快配置选项。如果您想深入了解设置定制，请将相关文档添加到 https://code.visualstudio.com/docs/python/linting 的书签中，在那里您还可以找到关于 pylint linter 的更多详细信息以及关于命令面板中列出的其他 linter 的摘要信息。

使用 planche 进行高级代码编辑

毫无疑问，VSCode 的 Python 扩展极大地提高了开发人员的生产率和编码体验，但是微软做得更多。事实上，微软正在提供一个名为 Pylance 的新扩展，目前正在预览中，它引入了代码重构、IntelliCode(一种由人工智能驱动的进化代码完成引擎)和其他改进。

当你打开(或创建)一个 Python 代码文件时，VSCode 会显示一个弹出框，提示安装 Pylance，如图 10-15 所示。或者，你可以直接从扩展工具下载 Pylance 扩展(见图 10-16 )。

图 10-16

挂架延伸详图

图 10-15

VSCode 提供安装 Pylance 扩展

一旦安装了 Pylance，IntelliSense 将由 IntelliCode 提供支持。该工具从您的代码和模式中学习，并根据您的编码风格提供改进的编辑体验，使 IntelliSense 能够根据编码上下文提供更好的建议。

Pylance 并不局限于提供一个改进的 IntelliSense 引擎，而是通过新的代码重构和实时代码分析，让编写更好的代码变得更加容易。例如，Pylance 可以让 linters 在你输入的时候显示错误的曲线。作为另一个例子，Python 扩展默认情况下只允许排序import指令，而 Pylance 引入了新的重构:提取方法、提取变量以及在通过智能感知或代码片段添加代码时自动添加所需的import指令。为了更好地理解这是如何工作的，选择示例文件第 5 行到第 13 行的代码块，如图 10-17 所示。您将看到一个灯泡图标出现，这意味着有一些重构所选代码块的建议。

图 10-17

启用代码修复建议

如果您将光标悬停在灯泡图标上，您将看到一个工具提示，上面写着 Show fixes 。单击它可查看当前上下文的可用建议；在这种情况下有一个建议，提取方法。单击这个建议，VS 代码将为选中的块提取一个新方法，并添加相关的方法调用。这显示在图 10-18 中。

图 10-18

提取方法

您需要手动重命名新方法，因为 Pylance 提供了一个默认名称，并且不进入重命名模式。类似地，名为 Extract variable 的代码修复使您能够从代码块中提取变量，并且只有在代码的上下文允许提取变量时，才可以通过灯泡图标使用它。灯泡图标不是检索代码块的代码修复的唯一快捷方式；您也可以选择一个代码块，右键单击，然后从上下文菜单中选择 Refactor 。

管理 Pylance 设置

正如我之前提到的，在我写这篇文章的时候，Pylance 还处于预览状态，但是你可以看看微软正在通过内部渠道进行扩展更新。您可以在 VS 代码的设置中(见图 10-19 )通过将 Pylance: Insiders Channel 选项的值更改为 daily 来实现。

图 10-19

更改挂架设置

一旦 Pylance 达到生产里程碑，我们有理由期待对它进行更多的添加和改进。

运行 Python 脚本

Python 也是一种解释型语言，因此它允许运行任意代码，而不需要后台构建过程。VSCode 支持 Python 作为解释器，提供了通过 REPL(读取-评估-打印-循环)交互式控制台编写和运行代码的选项，该控制台位于终端内。

通过选择 Python: Start REPL 命令，可以在命令面板中启用 Python REPL(参见图 10-20 )。

图 10-20

启用 Python REPL 控制台

此时，终端出现并加载 Python REPL，在这里您将能够编写和运行任意代码。图 10-21 显示了一个基于声明变量并在屏幕上打印其内容的例子。

图 10-21

在 Python REPL 控制台中运行任意代码

对于 Python 开发人员来说，这是另一个重要的工具，因为这是使用这种语言的一种非常常见的方式，当然也是利用其最强大的特性之一的一种方式。

摘要

Python 是一种非常流行和强大的编程语言，它完全受 VSCode 的支持。它完全支持进化的代码编辑、调试，甚至支持使用数据科学工具和库进行高级开发。

VSCode 通过官方的 Python 扩展增强了对 Python 的支持，这使得使用 Python 与使用其他语言和平台非常相似，因此，如果您是第一次使用 Python，但已经有了使用 C#或 Node.js 的经验，您可以应用现有的技能和知识。

微软还投资了一个名为 Pylance 的新扩展，它通过智能代码和额外的代码重构提供了改进的智能感知体验。用于解释代码的交互式 REPL 完成了 Python 的集成工具。

VSCode 再次展示了它的多功能性，为 Python 及其最流行的风格提供了一个完美的环境。

十一、将应用部署到 Azure

微软 Azure 是微软的首要云解决方案，它提供了许多服务，从托管 web 应用和 SQL 数据库到远程虚拟机、人工智能服务等等。

有了 VSCode，通过大量支持多种环境的扩展，比如 Node.js 和.NET，它提供了集成的体验，因此您可以直接在您的开发环境中工作。Azure 开发有许多扩展，每一个都针对不同的场景，但这需要一整本书来描述它们，所以在本章中我将介绍两个最流行的扩展:Azure App Services，它支持发布 web 应用，和 Azure Functions，它使你能够直接从 VSCode 使用无服务器应用。

Note

本章需要有效的 Microsoft Azure 订阅才能完成示例。如果您没有，您可以在 https://azure.microsoft.com/en-us/free 获得免费试用。

Azure 扩展简介

VSCode 支持使用最流行和最强大的 Azure 服务进行开发。开发环境中集成了支持，Visual Studio 市场中提供了特定的扩展。表 11-1 列出并描述了 Azure 开发的常见扩展。

表 11-1

Azure 开发的通用扩展

|

延长

|

描述

|
| --- | --- |
| Azure 帐户 | 允许登录一个或多个 Azure 订阅。 |
| Azure 应用服务 | 提供将 web 应用部署到云的集成支持。 |
| Azure CLI 工具 | 安装使用所有 Azure 服务所需的所有命令行工具。 |
| Azure 数据库 | 允许通过集成的浏览器在 VS 代码中直接创建、浏览和管理 SQL Azure、MongoDB、Cosmos DB、PostgreSQL 和 DocumentDb 数据库。 |
| Azure 函数 | 为编写、测试和部署 Azure 函数提供集成支持。 |
| 天蓝色机器学习 | 以前称为 VSCode for AI Tools，允许基于您的 Azure 订阅创建、构建、培训和部署机器学习模型。 |
| Azure 资源管理器 | 允许在 VS 代码中管理 Azure 资源组。 |
| Azure 存储 | 允许连接到 Azure 订阅中的 blobs、表、文件和队列存储。它还允许直接从 VS 代码中上传文件夹。 |
| 部署到 Azure | 允许为 Azure DevOps 代码库设置持续集成和持续部署管道。 |
| 码头工人 | 允许从 VSCode 中发布容器化的应用，并为 Docker 和 YAML 文件提供改进的代码编辑功能。 |
| 忽必烈忽必烈忽必烈忽必烈忽必烈忽必烈忽必烈忽必烈忽必烈忽必烈 | 提供将 Docker 容器部署到 Kubernetes 的集成支持，Kubernetes 是一个开源系统，用于自动化容器化应用的部署、伸缩和管理，由 Azure 支持。 |

我建议您收藏官方文档，可在 https://code.visualstudio.com/docs/azure/extensions 获得更多细节和示例。值得注意的是，VSCode 可以支持容器化应用的 Docker 和 Kubernetes，这对许多开发人员来说是非常重要的。

部署 Web 应用

使用 VSCode 将 web 应用部署到 Azure 非常容易。您可以重拍用 C#和.NET Core，但值得记住的是，发布到 Azure 并不局限于这些技术，对于 Node.js 也是可能的

Note

VSCode、Microsoft Azure 平台和针对 VS 代码的 Azure 扩展不断发展。新版本可能会对本章中描述的内容进行更改。

安装扩展

你需要做的第一件事是从 Marketplace 安装 Azure App 服务扩展。该扩展还需要 Azure 帐户和 Azure 资源扩展，但这些是与应用服务一起安装的，因此您不需要采取任何额外的步骤。

Azure Account extension 实际上是允许开发人员从 VSCode 中登录他们的 Azure 帐户并选择使用哪个订阅所必需的。Azure Resources 扩展用于管理资源组，资源组是组织云服务的地方。图 11-1 显示了扩展面板中的 Azure App 服务扩展。

图 11-1

微软的 Azure 应用服务扩展

登录 Azure 订阅

安装 Azure 应用服务扩展以及 Azure 帐户和 Azure 资源组扩展后，您需要登录才能使用任何服务。

为此，你可以使用命令面板中的 Azure: Sign In 命令，或者 Azure 侧边栏的 App Service 节点中的Sign to Azure快捷方式。这两种操作都会打开指向 Microsoft 帐户登录服务的默认浏览器实例。登录后，只需输入您的凭据，登录并关闭浏览器窗口。现在，在 VSCode 中，您可以打开 Azure 扩展并查看与您的订阅相关的服务列表。图 11-2 显示了一个基于我的订阅的例子。

图 11-2

Azure 服务视图

Note

微软 Azure 的产品非常广泛，跨越了过多的服务，所以我建议你看看官方网站( https://azure.microsoft.com/en-us/free ))了解详细信息。此外，请不要忘记进入管理门户( https://portal.azure.com )，它为您提供了创建和管理服务和资源的完整工具和选项。

分层视图显示资源组及其包含的服务，并且它还支持多个订阅。

您可以通过展开服务组并右键单击其名称来访问可用选项，从而快速与每个服务进行交互。

发布 Web 应用

VSCode 使得将 web 应用发布到 Azure 的过程变得非常容易。本节的目标是演示将 web 应用发布到 Azure 是多么的快速和简单。假设您已经打开了 helloweb 示例项目，在 Azure 视图中，右键单击您的订阅名称并选择 Create New Web App 。

一个三步向导将引导您完成应用的创建。第一步要求您在命令面板中为新的 web 应用提供一个唯一的名称，如图 11-3 所示。

图 11-3

指定 web 应用的名称

因为您指定的名称将与 azurewebsites.net 域相结合，并代表您的应用的网址，所以如果该名称已被使用，则会出现一条验证消息，请您选择其他名称。你可能想要指定一个不同于vscodedistilled的名字，这是我在本章的例子中使用的名字。

下一步是为您的 web 应用指定目标环境；这是必要的，因为 Azure 扩展无法检测你的应用基于哪种技术。图 11-4 显示了可用选项的列表。

图 11-4

指定目标平台

因为示例应用是在.NET 5，选择这个作为目标平台。向导的最后一步要求您指定定价等级。我建议使用自由层，如图 11-5 所示。

图 11-5

指定定价等级

完成这三个简单的步骤后，VSCode 首先在发布模式下构建项目(结果将在终端中可见)，然后开始在 Azure 订阅中创建必要的资源，您将能够在出现在环境右下角的弹出框中看到进度。一切准备就绪后，会弹出一条消息，询问您是否要启用自动部署。点击总是部署以便应用被发布。

部署完成后，浏览器会自动启动新发布的应用(参见图 11-6 )。如果没有发生这种情况，您可以在 Azure 侧栏的应用服务视图中右键单击应用名称，并选择浏览网站，然后在对话框中单击打开按钮，通知您外部程序正在启动。

图 11-6

运行在云中的 web 应用

您不需要额外的步骤。您的应用已在浏览器中启动并运行，托管在您的 Azure 订阅中。您可以在 VSCode 中和 Azure 门户( https://portal.azure.com )中进一步管理您的 Azure 服务和资源。虽然管理 Azure 门户中的资源是一个更大的主题，超出了本章的范围，图 11-7 显示了示例 web 应用的管理页面，在这里您可以在左侧看到可用设置的完整列表，以及主视图中关于部署、数据中心和统计的信息。

图 11-7

在 Azure 门户中管理应用服务

创建和部署 Azure 功能

简而言之，Azure Functions ( https://docs.microsoft.com/en-us/azure/azure-functions )是一种允许在云中按需运行代码的服务，它被认为是无服务器计算增长趋势的一部分。使用 Azure 函数的最大好处是，函数只有在被调用时才会被触发，这不仅减少了云资源的使用，还减少了维护和基础设施需求，从而节省了更多成本。

配置 VSCode

Azure 支持用多种语言编写函数，比如 C#、Python、Java、JavaScript 和 Rust。通常不同的开发环境都有工具可以用来编写 Azure 函数，比如 Visual Studio 2019，VSCode 也不例外。

用 VS 代码开发 Azure 函数首先需要的是 Azure Functions 核心工具。这组命令行工具是运行开发、调试和发布功能所必需的任务所必需的。在 Windows 上，您有两种方法来安装这些工具:从官方网站( https://bit.ly/3f1lHxR )下载 Windows 安装程序，或者使用以下命令，该命令利用 Node.js 上的 npm，并且您可以在 VS 代码中从终端窗口或从开发人员命令提示符运行:

> npm i -g azure-functions-core-tools@3 --unsafe-perm true

我建议使用后一种命令行方法来安装工具，因为 VSCode 可能无法识别这些工具是通过安装程序包安装的。

在 macOS 上，您需要运行以下命令:

> brew tap azure/functions
> brew install azure-functions-core-tools@3

在最新版本的 Ubuntu 上，所需的命令如下:

> wget
-q https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb
> sudo dpkg -i packages-microsoft-prod.deb

安装命令因 Linux 发行版而异，所以您可以在 https://github.com/Azure/azure-functions-core-tools#linux 找到合适的命令。

一旦安装了 Azure Functions 核心工具，就需要安装 VSCode 的 Azure Functions 扩展(见图 11-8 )。

图 11-8

VS 代码的 Azure 函数扩展

Azure Functions 扩展还需要 Azure Account one，您之前已经安装了它。

创建 Azure 函数

安装了 Azure Functions 扩展后，VS 代码简化了创建 Azure Functions 项目的方式。对于当前关于部署 Azure 函数的示例，我将展示如何使用内置模板创建函数存根，但是您当然可以使用现有的 Azure 函数项目，这些项目是用其他环境或示例项目创建的。

如果您从新代码开始，您首先需要在磁盘上有(或创建)一个新文件夹，新项目将在其中创建。对于下一个示例，我在磁盘上创建了一个名为 C:\AzureFunctionsDistilled 的文件夹。

当你准备好文件夹后，在 VSCode 中启用命令面板并搜索名为Azure Functions:Create New Project的命令(参见图 11-9 )。

图 11-9

创建新的 Azure Functions 项目

Note

还有另外两个命令可以用来创建函数:在 Azure 中创建函数 App和在 Azure 中创建函数 App(高级)。这两个命令都允许创建一个在 Azure 订阅中自动提供的项目，以及一个用于开发和调试的本地项目。在本书中，我不使用这些命令是为了更好地突出开发和调试的不同阶段，然后是部署。

单击此命令时，将启动一个八步向导。首先，要求您在磁盘上选择一个目标文件夹，因此选择您之前创建的文件夹。然后要求您选择一种语言。为了与前面的例子保持一致，我选择了 C#，但是您可以随意使用不同的例子。第三步，要求您指定一个运行时平台。如果选择了 C#，向导将显示.NET 版本，您可以选择最新的。

Note

向导会识别.NET 5 as。网络 5(孤立的)。要理解这意味着什么，需要回顾一下之前版本的 Azure Functions。以前，Azure 函数只支持紧密集成的模式.NET 函数，这些函数作为类库在与宿主相同的进程中运行。尽管这种模式提供了宿主进程和函数之间的深度集成，但是这种集成也需要宿主进程和。网络功能。例如，。在进程内运行的. NET 函数需要在同一版本的上运行.NET 作为函数运行时。为了使您能够在这些约束之外运行，您现在可以选择在一个隔离的进程中运行。.NET 5(隔离)意味着现在允许在进程外运行函数。

如果您选择了另一种语言，目标平台列表将根据您选择的语言而变化。

在第四步中，您可以选择一个项目模板(参见图 11-10 )。

图 11-10

选择 Azure Functions 项目模板

您在这里选择的项目模板与当前示例并不相关，当前示例的目标不是深入 Azure Functions 开发的细节，而是展示构建和部署功能是多么快速和容易。我选择了 HttpTrigger 模板，它生成简单的代码来定义一个函数，当一个 HTTP/HTTPS 请求被拦截时，这个函数在 Azure 上被触发，并发回一个响应。

在第五步和第六步中，首先输入新项目的名称(或者保留默认项目名称，如当前示例中的 AzureFunctionsDistilled ),然后输入将在代码中使用的名称空间。名称空间的形式应该是CompanyName.Function；比如我的命名空间是AlessandroDelSole.AzureFunctionsDistilled。

在向导的第七步中，您指定一个安全访问级别:匿名、功能或管理。表 11-2 提供了每个授权级别的简短描述。

表 11-2

Azure 功能授权级别

|

水平

|

描述

|
| --- | --- |
| 匿名的 | 不需要授权；所有 HTTP 请求都通过。 |
| 功能 | 功能授权级别基于 Azure 门户中生成的安全密钥。主机密钥(在应用级别)和功能键(在功能级别)可以作为功能级别的安全密钥。 |
| 管理 | 类似于函数级，但仅适用于主机键(在应用级)。 |

对于当前示例，您可以只选择匿名级别。在向导的最后一步，您决定在哪里打开新项目:当前窗口(VSCode 的当前实例)，新窗口(VSCode 的新实例)，或者添加到工作区(新项目被添加到现有文件夹以创建工作区)。选择当前窗口，几秒钟后，新项目将可用，您可以根据需要编辑代码(参见图 11-11 )。

Note

由FunctionName属性定义的函数名必须总是小写，否则运行时会抛出异常。在当前示例中，确保从FunctionName("AzureFunctionsDistilled")更改为FunctionName("azurefunctionsdistilled")。

图 11-11

用 VS 代码编辑 Azure Functions 项目

您现在完全在本地工作，这是在将代码提升到 Azure 远程环境之前，在开发环境中调试代码的好机会。按 F5 开始调试，就像你对任何 C#项目所做的一样，几秒钟后，终端不仅会显示编译器输出，还会显示一个本地 URL，你可以用它来测试代码(见图 11-12 )。

图 11-12

调试 Azure 函数

终端中显示的 URL 如下:http://localhost:7071/api/azurefunctionsdistilled。7071 是本地开发服务器的端口，而azurefunctionsdistilled是代码中定义的函数的名称(全部小写)，两者都会根据您创建的项目而有所不同。您可以将上述 URL 粘贴到浏览器的地址栏中，然后按 Enter 键。图 11-13 显示了在浏览器中运行并监听HTTP GET和POST呼叫的功能。

图 11-13

在本地运行 Azure 功能

假设您已经完成了所有的本地开发、调试和测试，您可以将 Azure 功能发布到云中，如下所述。

部署 Azure 功能

用 VSCode 将 Azure 函数部署到您的订阅是一件容易的事情。在 Azure 面板的功能区，你可以点击部署到功能应用按钮，如图 11-14 中高亮显示，或者你可以在功能视图中右击订阅名称，然后选择相同的命令。

图 11-14

使用部署到功能应用按钮启动部署流程

单击此按钮后，命令面板会显示一个包含三个步骤的快速向导。第一步，指定你是想用默认设置还是用高级设置创建一个新的 Azure Function app(见图 11-15 )。

图 11-15

选择默认或高级设置来创建新的功能应用

选择第一个(默认)选项，然后按 Enter 键。系统会再次要求您指定一个唯一的名称(在当前示例中为azurefunctionsdistilled)，然后指定目标平台，可用选项取决于您用来构建应用的技术。选择创建项目时选择的同一平台。

Note

您可能会在命令面板中看到接近. NET 版本的(非 LTS)短语。在这篇文章中，是的。净 5(非 LTS)。这个短语的意思是.NET 不支持长期支持(LTS 代表长期支持)。原因是微软计划发布.NET 6，这将为这个新版本提供广泛的支持。

在向导的最后一步，您需要指定一个数据中心位置(参见图 11-16 )。

图 11-16

选择数据中心的位置

如果你有 Azure 开发经验，你会知道这是一个至关重要的选择，因为你选择的位置会影响到你的订阅费用。至少对于这个与开发目的相关的示例，请确保您选择了离您的位置最近的数据中心(在我的例子中是西欧)，这意味着更少的延迟和更少的带宽需求以及相应的成本节约，尤其是在您的订阅没有启用支出限制的情况下。

Note

并非所有的 Azure 区域和数据中心都提供相同的服务。对于真实世界的场景，您可能想要查看关于根据您的位置、需求和请求的服务( https://azure.microsoft.com/en-us/global-infrastructure/geographies )选择合适的 Azure 区域的官方文档。

此时，VSCode 首先在发布模式下构建项目，然后开始将功能发布到 Azure。您可以在终端中跟踪进度，并通过弹出框显示当前运行任务的名称(参见图 11-17 )。

图 11-17

Azure 函数的发布正在进行中

在最后一步之后，该功能将在云中启动并运行，您可以通过在浏览器中打开该功能的 URL 来轻松验证，如图 11-18 所示。请记住，函数的 URL 由您在创建项目时提供的惟一名称组成，后面是 azurewebsites.net 域名和/api/ < functionname >部分。对于 Azure 函数，您可以添加触发函数本身所需的查询字符串。在图 11-18 中，你可以看到本地使用的相同查询字符串是如何被提供给远程 URL 的。

图 11-18

Azure 功能正在云中运行

正如您所看到的，VSCode 不仅使部署 Azure 功能变得非常简单，还使创建项目和直接从环境中与 Azure 订阅进行交互变得非常简单，这提高了整体生产力。

Note

为了避免 Azure 信用的意外费用或消耗，我建议删除所有不再使用的资源，如本章中创建的示例应用。在 VS 代码中，你可以通过在 Azure 侧边栏的应用服务和功能面板(分别)中右键单击它们的名称，然后选择适当的删除命令来快速删除应用和功能。可以在 Azure 门户中删除其他资源。

摘要

再一次，VSCode 展示了它的强大和多功能性，即使是基于 Microsoft Azure 的云开发。有了 Azure extensions，您可以直接从环境中访问您的订阅。

通过专门的扩展，如 Azure App Service 和 Azure Functions，您可以通过有限的努力和几次鼠标点击来创建、配置和部署您的 web 应用和功能，从而将管理 Azure 门户中的资源的需求减少到仅在您需要自定义配置的情况下。此外，还支持多种语言和环境，包括.NET Core、Java、Python 和 Node.js，将云开发的可能性扩展到更多的公司和开发者。