Visual Studio Code 和 Git 初学者指南 – techsyncer

对于那些对 Visual Studio (VS) Code 新手来说，可能只会看到一个代码编辑器。VS Code 的真正强大之处在于其扩展、集成终端和其他功能。在这个动手教程中，您将学习如何通过使用 Visual Studio Code 来操作一个 Git 存储库。

利用内置的 VS Code 工具和一些扩展，您将编写代码并将该代码提交到源代码控制中，使用单一界面。

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

教程概述

在本教程中，您将通过使用 Visual Studio Code 和 Git 构建项目来学习如何在 Windows 上使用各种 VS Code 功能。您的任务是弄清楚如何使用 Terraform 构建一个 Azure VM 作为一个小型概念验证 (POC) 项目。您已经安装了 VS Code，并听说过它作为一个完整 IDE 的能力，想要进行测试。

您将：

创建一个与您的团队共享的 VS Code 工作区
安装 Terraform 扩展
修改 Terraform 配置文件以适应您的命名约定和 Azure 订阅
创建一个你发现自己一遍又一遍地输入的常见任务代码片段
将Terraform配置文件提交到Git存储库

本教程不旨在展示如何使用Terraform部署Azure VM。我们已经有一篇关于Terraform和Azure VM的文章。本教程将专注于学习Visual Studio Code。

听起来像是一个有趣的项目吗？如果是，请继续阅读以开始吧！

先决条件

要跟着进行本Visual Studio Code Git教程，请确保你具备以下条件：

VS Code – 所有示例将使用VS Code 1.44，尽管较早的版本也可能有效。
Terraform – 所有示例将使用Windows版本的Terraform v0.12.24。
安装Git for Windows – 所有示例将使用v2.26。如果你想让VS Code成为Git的默认编辑器，请在安装时选择它。

克隆Git存储库

由于本教程将重点介绍在GitHub存储库中处理代码，因此你的第一个任务是将该GitHub存储库克隆到本地计算机。

对于这个项目，你将从一个名为VSCodeDemo的GitHub仓库中进行工作。由于VS Code具有原生的Git集成，您可以在不需要额外配置的情况下克隆一个Git仓库。操作步骤如下：

打开命令面板，使用Ctrl-Shift-P快捷键，输入git，您将看到各种选项，如下所示。

2. 选择Git: Clone，然后VS Code将提示您输入仓库的URL。在这里，提供URL：https://github.com/NoBSDevOps/VSCodeDemo.git并按Enter键。

3. 选择一个文件夹来存放克隆的项目文件。此项目将把仓库文件夹放在C:\的根目录下。一旦选择了存储库位置，VS Code将在后台调用git.exe并将仓库克隆到您的计算机上。

4. 当完成时，VS Code将询问您是否要立即打开克隆的存储库，如下所示，点击打开以打开它。

现在您在VS Code中有一个打开的文件夹，用于该Git仓库。现在，您需要“保存”这个打开的文件夹以及您将要在工作区中执行的所有设置。

创建工作区

现在您已经打开了包含Git仓库的文件夹，请通过转到文件菜单并点击另存工作区为…来保存一个工作区。

将工作区保存为项目在项目文件夹中。然后，VS Code将在Git仓库文件夹中创建一个名为project.code-workspace的文件。这个工作区现在知道你打开了哪个文件夹。现在，将来打开工作区时，它将自动打开C:\VSCodeDemo文件夹。

现在，你将看到工作区的名称，而不是文件夹名称。

设置扩展

扩展是VS Code最有用的功能之一。扩展允许你添加功能，帮助你管理许多不同的项目。在本教程中，你将使用Terraform。

在左侧边栏中打开一个Terraform配置文件。注意到编辑器选项卡会打开并显示文本，但仅此而已。没有通常的语法高亮显示或任何其他功能。VS Code认为这是一个纯文本文件，并相应地显示它。让我们解决这个问题。

No syntax highlighting for a Terraform configuration file

为了让VS Code“理解”Terraform配置文件，你需要一个扩展。扩展是VS Code的一个重要组成部分，它开启了全新功能的世界。在这种情况下，你需要Terraform扩展来帮助构建Terraform配置文件并使用Terraform部署基础设施。

要安装Terraform扩展，请点击活动栏上的扩展按钮，然后搜索terraform。你会看到多个扩展显示出来，但是对于这个项目，点击由Mikael Olenfalk创建的顶部结果的安装。然后，VS Code将安装该扩展。

一旦安装完成，请导航回工作区并单击工作区中的 TF 文件之一。使用扩展时，你将立即看到一个最明显的区别，即语法着色。

现在你可以在下面的截图中看到，VS Code“知道”注释是什么（通过使其变绿），字符串是什么（通过使其变红）等等。现在阅读 Terraform 配置文件变得更加容易。

Terraform syntax-highlighting performed by the VS Code Terraform extension

使用 Mikael 的 Terrafom 扩展还包含了更多功能。如果使用 Terraform，请务必调查所有潜在的好处，你可以从这个扩展中获得。

代码编辑

当你在互联网上找到脚本或配置文件时，它们很可能不会完全符合你的需求。你需要以某种方式对其进行修改。

在本教程的示例中，你可能想要修改 infrastructure-before.tf 中的 main 块标签。 Terraform 配置文件，也许改为 project。为此，你需要查找并替换一些文本。在 VS Code 中，有多种方法可以做到这一点。

查找字符串并用另一个字符串替换它是最常见的一种方法。

按下Ctrl-F，你会看到类似以下截图的对话框。在这里，你可以输入想要查找的字符串，如果点击下箭头，它会展开并提供一个输入框，用于输入想要替换的字符串。在下面的截图中，你可以看到像Aa和Ab|这样的选项，用于区分大小写的搜索，还有正则表达式。

你也可以使用Ctrl-D执行“查找和替换”。只需选择想要查找的文本，然后开始按Ctrl-D。你会发现VS Code会开始高亮显示该字符串的每个实例，并出现一个闪烁的光标。

当你选择了所有项后，开始键入，VS Code会一次性更改所有实例，就像你单独选择了每个实例一样。

Synchronizing changes with multiple cursors

利用片段节省时间

假设你真的开始使用Terraform和Azure，并且厌倦了在以下代码片段中输入创建新Azure资源组的Terraform配置文件块。

resource "azurerm_resource_group" "<element name>" {
    name     = "<resource group name>"
    location = "<region>"
}

为了节省创建这些块的时间，创建一个VS Code片段。

创建VS Code片段：

从Infrastructure-before.tf Terraform配置文件中复制azurerm_resource_group块。

2. 使用Ctrl-Shift-P打开命令面板。

3. 输入“snippets”以过滤选项列表。

4. 选择 首选项: 配置用户片段。这将显示所有片段文件的列表，通常按语言分开。

5. 输入“terraform”以按 Terraform 片段进行筛选。

6. 选择 terraform (Terraform) 以打开 Terraform 片段文件 (terraform.json)。

打开 Terraform 片段文件后，删除所有注释并复制/粘贴以下 JSON 元素。

{
     "Create Azure Resource Group Block": {
         "prefix": "rg",
         "body": [
             "resource \"azurerm_resource_group\" \"${1:block label}\" {",
             "\tname     = \"${2:name}\"",
             "\tlocation = \"${3:region}\"",
             "}"
          ],
          "description": "Creates a Terraform Azure Resource Group block"
      }
 }

注意使用 \t 和反斜杠。你不能直接放置制表符在片段内。要表示制表符，必须使用 \t。此外，必须使用反斜杠转义字符，如双引号、美元符号、大括号和反斜杠。

8. 保存 terraform.json 文件。

9. 返回到 Terraform 配置文件，输入“rg”。现在你会看到一个展开片段的选项。

10. 选择 rg 片段，如上所示。注意，它现在会展开为你刚刚创建的片段，其中有三个高亮显示的项目。

由于 terraform.json 片段文件中定义的变量（${1:block label}），VS Code 高亮显示每个单词以充当占位符。

此时，你可以按 Tab 键，并简单地输入你需要的值，而不必担心如何创建块本身。

有关片段语法的详细介绍，请查阅 Visual Studio Code 文档中的片段。

将代码提交到Git

到目前为止，您已经克隆了一个包含几个Terraform配置文件的公共GitHub存储库。您已经编辑了一些文件，现在您准备好将这些更改上传到GitHub存储库。

要将更改上传到GitHub存储库，您必须首先使用Visual Studio Code和Git将更改提交到本地克隆的Git存储库。当您之前克隆GitHub存储库时，您不仅下载了配置文件，还下载了一个Git存储库。

如果您一直在跟着做，现在您应该已经打开了克隆的Git存储库，并且有几个待处理的更改，确切地说是两个。您如何知道这一点？通过注意活动栏中的数字，如下所示。

当您在Visual Studio Code中打开一个Git存储库时，您将可以在活动栏中看到您可以将其暂存并提交到本地Git存储库的文件数量。

点击左侧的源代码控制项目，您将看到两个项目；infrastructure-before.tf Terraform配置文件和您之前保存的工作区（project.code-workspace）。配置文件右侧将显示红色的M，表示它已被修改。工作区文件右侧将显示绿色的U，因为它是未跟踪，这意味着它当前不在源代码控制之下。

确保这两个文件都返回到GitHub存储库中，首先创建一个有帮助的提交消息，说明为什么要提交这些文件。消息可以是任何描述性摘要。编写提交消息后，将更改提交。在Visual Studio Code中的Git中暂存更改将文件内容添加到暂存区，准备提交到存储库。

在源代码控制窗格上，单击每个文件旁边的+图标将它们暂存，如下所示。

一旦暂存，点击检查标记以提交所有已暂存的更改，如下所示。

您可能会收到错误消息，指示您需要在Git中配置user.name和user.email。

Your Git user is not defined in the Git configuration

没问题。您只需为Git提供所需的信息。为此，请进入您的VS Code集成终端并运行以下两个命令，将我的电子邮件地址和姓名更改为您的。

git config --global user.email "[email protected]"
git config --global user.name "Adam Bertram"

现在尝试提交文件。您现在应该看到文件已提交到存储库。

您可以通过一次性提交所有更改的文件而无需手动单击每个文件旁边的+来暂存所有更改的文件。VS Code将自动为您暂存所有文件。

如果你正在与一个共享仓库的团队合作，下一步将是将这些更改 推送回 GitHub 仓库，或者 发起一个拉取请求。

结论

VS Code 是一个功能丰富的集成开发环境。它不仅可以帮助你更好地编写和理解代码，还可以构建和修改基础架构，调用实用工具等等。VS Code 为你提供了一个统一的地方来管理所有的开发工作。

尽管这个教程只涵盖了 VS Code 的一小部分功能，但这个集成开发环境能够做的远不止这些。如果你想了解 VS Code 的更多功能，请查看 关于 Visual Studio Code 需要了解的内容：教程。