VSCode 精粹（二）

原文：Visual Studio Code Distilled

协议：CC BY-NC-SA 4.0

八、自动化任务

如前一章所述，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，将云开发的可能性扩展到更多的公司和开发者。