一個初學者的指南：Visual Studio Code 和 Git – techsyncer

那些對於 Visual Studio (VS) Code 新手可能只會看到一個程式碼編輯器。VS Code 的真正威力在於它的擴充功能、整合終端機和其他功能。在這個實踐教程中，您將學習如何通過使用 Git 存儲庫來使用 Visual Studio Code。

使用內置的 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 – 所有示例將使用 Terraform for Windows 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：克隆，VS Code將提示您輸入存儲庫的URL。在這裡，提供URLhttps://github.com/NoBSDevOps/VSCodeDemo.git 並按Enter。

3. 選擇一個文件夾來放置克隆的項目文件。此項目將在C:\的根目錄中放置存儲庫文件夾。一旦您選擇了存儲庫位置，VS Code將在後台調用git.exe並將存儲庫克隆到您的計算機上。

4. 完成後，VS Code將提示您是否要立即打開克隆的存儲庫，如下所示，點擊打開以這樣做。

您現在在VS Code中有一個打開的文件夾，其中包含Git存儲庫。您現在需要“保存”這個打開的文件夾以及您將在工作區中執行的所有設置。

創建工作區

現在，您有一個包含Git存儲庫的打開文件夾，通過上到文件菜單並點擊另存工作區為…保存工作區。

將工作區保存為project，並存放在專案文件夾中。然後，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

迈克尔的Terrafom擴展還包含了更多功能。如果使用Terraform，請務必研究一下這個擴展可能帶來的所有好處。

代碼編輯

當你在互聯網上找到一個腳本或配置文件時，它通常不會完全符合你的需要。你需要以某種方式對其進行修改。

在本教程的示例中，你希望在infrastructure-before.tf的main塊標籤中將其更改為project。為此，你需要查找並替換一些文本。在VS Code中，有多種方法可以做到這一點。

最常見的方法之一是使用查找和替換功能進行字符串查找和替換。

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

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

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

Synchronizing changes with multiple cursors

使用代码片段节省时间

假设您正在深入研究Terraform和Azure，并厌倦了在以下代码片段中键入Terraform配置文件块以创建新的Azure资源组。

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的部分功能，但這個IDE還能做更多。如果您想了解有關VS Code的更多信息，請查看關於Visual Studio Code需要知道的事情：教程。