值得学习的Visual Studio Code教程 – techsyncer

每个牛仔都需要一匹马，每个蝙蝠侠都需要一个罗宾，每个编码者都需要一个优秀的代码编辑器。当你每天都与代码打交道时，你必须有一个首选的代码编辑器。对于许多开发人员来说，Visual Studio（VS）Code 是他们首选的编辑器。请继续阅读本 Visual Studio Code 教程。

在本文中，你将学习关于 VS Code 及其强大功能的全部内容。如果你正在寻找对 VS Code 的深入评价，包括对其所有功能的详细解释，请继续阅读。

本博文是来自电子书《从管理员到 DevOps：在 Azure 中实现 DevOps 的 BS 方法》的章节摘录。如果你喜欢本章内容，并想了解在 Azure 中进行 DevOps 的方法，请查阅！

界面

本 Visual Studio Code 教程将使用 VS Code 1.53.2。如果说明和截图看起来有些不同，那么很可能是你使用的是新版本。但我们已经尽最大努力专注于 VS Code 的非特定版本方面。

当你第一次打开 VS Code 时，你将看到一个如下截图所示的用户界面。你会发现 VS Code 有一些你将整天盯着的主要区域。

主要的 VS Code 界面可以分为五个不同的区域：

编辑器窗口（标签/分组） – 编辑器窗口是您将进行大部分工作的地方。该窗格是您查看和编辑正在进行的所有代码的地方。每当您打开新文件或编辑现有文件时，编辑器窗口是代码显示的位置。VS Code在此编辑器窗格中有选项卡，允许您同时打开多个文件，以及编辑器分组，将各种选项卡分组。
工作区 – 工作区将是您经常使用的界面的下一个部分。工作区是选项卡中打开的任何文件将显示的地方。您通常还会打开整个文件夹，以一次在此处查看特定文件夹中的所有文件。
侧边栏 – 侧边栏是您将看到诸如您打开的Git存储库的信息，您正在其中工作的Git分支的名称以及将Git更改推送到远程存储库的能力等信息的地方。
面板 – 面板部分是“输出”部分。您将在此窗格下找到由VS Code及其扩展返回的各种信息的各种“选项卡”。在这里，您还将找到方便的集成终端。集成终端是内置的Bash终端（通过扩展还包括其他外壳），允许您在VS Code中直接运行代码，而无需打开单独的外壳。
状态栏 – 状态栏提供有关打开的编辑器选项卡的信息。状态栏显示光标位置、编码、VS Code识别文件格式的格式等信息。在运行时，VS Code及其扩展还将在状态栏中显示信息。

命令和命令面板

在VS Code中有很多事情要做，尤其是如果你安装了许多扩展（稍后会讨论）。你可以通过顶部的典型文件、编辑和查看菜单来控制大部分功能，但并非所有功能都在那里。

在VS Code中实现功能的最简单方法是通过命令面板中的命令。命令面板是一个菜单，当你点击查看菜单并选择命令面板，或者按下键盘上的Ctrl-Shift-P时，它会出现在屏幕顶部。

在下面的截图中，你可以看到命令面板的一个示例。

命令面板是你将找到VS Code所有功能的地方。命令面板非常好用，因为所有管理任务、设置、代码片段等功能都集中在一个菜单中（稍后会讨论）。

命令面板是你可以找到所有默认VS Code安装以及配置你安装的任何扩展的功能的地方。

设置

你可以使用设置自定义VS Code的几乎每个方面。设置控制默认的VS Code功能和安装的扩展。设置以JSON文件的形式存储，VS Code默认定义了许多设置。

要管理设置，打开命令面板，按Ctrl-Shift-P。输入“settings”并选择首选项：打开设置（JSON），如下所示。不过要注意，设置有很多！

然后，VS Code将打开一个显示当前定义的所有设置的JSON文件。

有一个更简单的方法来管理设置，通过 VS Code UI。VS Code 提供了一个 UI 来浏览设置，正如你在下面的截图中所看到的。你可以通过再次打开命令面板并选择 `Preferences: Open Settings (UI)` 来找到这个 UI。

VS Code 设置的 UI 允许你搜索设置并按类别分解显示在屏幕左侧。

这个 Visual Studio Code 教程绝对无法涵盖所有可用的设置。花点时间四处浏览，看看你可以对 VS Code 进行什么调整。

扩展

VS Code 最重要的功能之一就是它的扩展。VS Code 默认支持常见的代码编辑器功能，比如语法高亮、智能感知等。它能够理解你正在编写的代码类型，并以多种不同的方式进行适应。但它并不了解所有的语言。

例如，也许你正在处理一个 ARM 模板。ARM 模板是 JSON 格式的。幸运的是，VS Code 默认就能理解 JSON。如果你打开一个扩展名为 JSON 的文件，VS Code 会认为它是一个 JSON 文件，并相应地应用所有特性。在下面的截图中，你可以看到其中的一些特性。

JSON 只是普通的文本。为了让 VS Code 知道何时应该将一个部分折叠起来，以及什么样的文本要更改颜色，它必须理解 JSON 的结构。VS Code 根据打开的文件类型来应用这些特性的不同方式。

尽管 ARM 模板是用 JSON 创建的，而 VS Code 理解 JSON 并不意味着 VS Code 理解 ARM 模板。

ARM 模板不仅仅是 JSON。ARM 模板具有函数、特定的结构和模式。VS Code 不知道特定的 JSON 文件需要将 $schema 定义为第一个元素。这就是 VS Code 扩展生态系统派上用场的地方。

尽管 VS Code 本身不会原生理解 ARM 模板，但这并不意味着它不能。开发人员可以为 VS Code 添加功能。在这种情况下，开发人员可以通过扩展来添加围绕 ARM 模板的功能。

扩展是可以加载到 VS Code 中的小型包，使得使用各种资源更加容易。

您可以通过活动栏中的扩展图标管理扩展，如下所示。一旦您点击左侧的图标，您应该立即看到扩展市场中最受欢迎的扩展列表。

扩展市场是开发人员存储扩展的地方，您可以随意下载和安装。

您可以在以下截图中看到，扩展不仅仅是特定于语言的。扩展跨越了 VS Code 功能的广泛范围。如果您正在围绕特定产品开发代码，请始终搜索扩展市场，看看是否有可用的扩展。

对于 ARM 模板示例，请搜索下面显示的“arm”，然后查看结果。请注意，有许多不同的 ARM 模板扩展，一些是由 Microsoft 和第三方开发人员开发的。单击每个扩展旁边的绿色安装按钮将立即下载并安装该扩展。

扩展是使 VS Code 真正出色的功能。扩展允许您在 VS Code 中执行许多操作，并消除了离开应用程序执行其他相关任务的需要。

代码片段

您是否曾经一遍又一遍地键入相同的代码片段？与软件开发一样，您应该始终努力遵循不重复自己（DRY）原则。

当然，您可以通过第50次键入该函数声明片段来实现相同的功能，但这有何意义呢？而且谁又能说您每次都会以相同的方式编写它呢？如果您需要一种自动化生成文本摘要的方法，您需要使用代码片段。

VS Code 代码片段是一个方便的功能，每个人都应该使用，无论您在做什么样的开发。代码片段允许您在代码编辑器选项卡中键入几个字符，然后快速扩展为您需要的内容。

存在按语言或扩展名存储在 JSON 文件中的片段。例如，您可以同时安装一组 PowerShell、ARM 模板、Python、C# 和 JavaScript 片段。

您可以通过按 Ctrl-Shift-P 打开命令面板，输入“snippets” 并按 Enter 键来查找片段。

Configure User Snippets command palette entry

片段菜单将出现在这里，您可以编辑所有默认语言片段。如果您安装了带有一组片段的扩展，它们也会显示在这里。

如果您使用箭头键导航到特定片段，然后按 Enter 键或单击其中一个，VS Code 将在编辑器选项卡中打开 JSON 片段文件。在下面的截图中，您可以看到许多片段都有一个单个的 JSON 元素被注释掉，并附有有关创建自己片段的说明。

每个片段都是一个单独的 JSON 元素，与特定语法匹配。您可以在 Microsoft 的 VS Code 片段页面了解更多关于片段语法的信息。

在以下代码片段中，您可以看到创建 PowerShell 函数的典型片段。此片段使用了 PowerShell 扩展，它创建了一个 powershell.json 片段文件。当您在编辑器窗口中键入片段“func”时，VS Code 将自动删除该文本片段，并用 body 中的代码替换它。

通知下面的${1|functionName}和$2字符串。VS Code代码片段允许您不仅通过几个字符替换代码片段，而且在展开后还可以编辑该代码。在这个例子中，这个片段有制表位。

制表位允许您按Tab键，编辑占位文本（第一个1|中的functionName）制表位，再次按Tab，然后在body的第八行开始输入。

"New function": {
    "prefix": "func",
    "body": [
        "function ${1:functionName} {",
        "\t[CmdletBinding()]",
        "\tparam",
        "\t()",
        "",
        "\t$$ErrorActionPreference = 'Stop'",
        "",
        "\t$2",
        "}"
    ],
    "description": "New helper function"
}

创建片段后，您可以在编辑器中调用片段。在下面的截图中，现在如果您在PowerShell脚本中键入“func”，VS Code将为您提供可用选项的列表。

默认情况下，VS Code带有一些内置的代码片段，一些扩展还会安装一些代码片段。下面您会注意到片段function，function-advanced和function-Inline。这些片段是随PowerShell扩展一起提供的。

VS Code extensions can add “Intellisense” features

一旦您在编辑器窗口中选择func并按Enter，func将变成下面图像中左侧的代码片段。您可以看到VS Code突出显示functionName，并在第八行上有一个光标。这些制表位允许您编辑展开片段的这些部分。

如果您花时间构建您每天都在做的所有常见例行程序，代码片段会节省大量时间。在这个Visual Studio Code教程中展示的片段只是您可以做的一小部分。

集成终端

当你开发脚本或软件时，你不会一次性写一堆代码，然后它就能完美运行。要是那样就好了。相反，你会写一点代码，测试一下看看是否有效，不断调整和重复，直到完成任务。

在开发中运行代码时，通常需要切换到另一个窗口，比如控制台或其他外部工具。如果该外部工具可以通过命令行访问，或者你正在编写 PowerShell 代码，你就无需离开 VS Code，而是可以使用集成终端。

集成终端直接嵌入到 VS Code 中。它不是一个外部控制台或窗口。它始终位于编辑器标签下方（除非你关闭它）。默认情况下，终端是 Windows 上的传统命令提示符（cmd.exe），或者在 Linux 和 macOS 上是 Bash。然而，如下所示，一旦安装了 PowerShell 扩展，VS Code 将默认使用 PowerShell 控制台。

你可以像使用普通控制台一样使用集成终端，输入命令，获取输出等。但集成终端提供了一些额外的好处。首先，其中一个最有用的好处是在开发过程中运行代码片段。

例如，假设你正在编写 PowerShell 脚本，并且想测试一行代码。不需要复制代码并粘贴到另一个 PowerShell 窗口中，只需点击该行的任何位置，然后按下 F8 键。VS Code 将读取整行代码并在集成终端中执行它（如果已安装 PowerShell 扩展）。

在这个Visual Studio Code教程中，您将只学到集成终端的基础知识。要了解有关集成终端的更多信息，请确保查看Microsoft的文档。

与工作区一起团队合作

到目前为止，本教程假定您一直在独立使用VS Code。假设只有您在键盘上快速输入。但这并不反映现实世界。在现实世界中，您很可能正在与团队合作。

当您在设置中查找，安装扩展并创建一些代码片段时，您正在为您更改VS Code的配置。如果您在一个团队中，该团队还可以使用您对VS Code进行的调整，该怎么办？在这种情况下，您需要共享这些设置。其中一种方法是使用工作区。

在VS Code中，工作区是一组控制行为的文件夹和设置，通常用于单个项目。

想象一下您的团队正在开发一个包含许多文件夹、一个Git仓库和可能是整个团队都需要遵循的某种编码标准的应用程序。一个单一的“项目”是工作区的一个很好的用例。

为了创建一个工作空间，请打开一个或多个文件夹，转到文件菜单，点击另存工作区为，然后保存文件。VS Code将工作空间保存到一个以code-workspace文件扩展名结尾的文件中。该文件包含保存在工作空间中的所有内容。

工作空间和设置

工作空间在设置方面发挥作用，特别是在定义VS Code设置时。当在一个团队项目中每个人都使用VS Code时，您可能希望创建一个共享的工作空间。要做到这一点，请打开相关的文件夹并保存工作空间。

一旦您在工作空间中工作，请打开命令面板，输入“settings”，您现在将看到另一个名为“Workspace Settings”的选项，如下面的截图所示。

选择打开工作区设置选项将带您回到一个熟悉的设置屏幕。不过这一次，您将有两组设置；用户和工作区。选择工作区并在这里进行更改将把该设置更改保存到工作空间文件而不是您自己的VS Code安装中。

工作空间是将代码片段、设置和其他项目分组以在团队中共享，以确保一致体验的好方法。

结论

这个Visual Studio Code教程旨在为初学者提供对这个IDE的快速入门。虽然在3000字内无法涵盖VS Code的全部内容，但本教程已经涵盖了主要功能。

如果您想了解更多关于Visual Studio Code并深入了解本文介绍的任何功能，请务必查阅微软文档。