Ein Anfängerleitfaden für Visual Studio Code und Git

Tutorials
Terraform

Diejenigen, die neu bei Visual Studio (VS) Code sind, sehen vielleicht nur einen Code-Editor. Die wahre Stärke von VS Code liegt jedoch in seinen Erweiterungen, dem integrierten Terminal und anderen Funktionen. In diesem praxisnahen Tutorial lernst du, wie du Visual Studio Code verwendest, indem du mit einem Git-Repository arbeitest.

Verwandt:Was Sie über Visual Studio Code wissen müssen: Ein Tutorial

Mit den integrierten VS Code-Tools und einigen Erweiterungen wirst du Code schreiben und committen diesen Code über eine einzige Benutzeroberfläche in die Versionskontrolle übernehmen.

Dieser Blog-Beitrag ist ein Ausschnitt aus einem Kapitel des eBooks Von Admin zu DevOps: Der BS-Weg zu DevOps in Azure. Wenn dir dieses Kapitel gefällt und du mehr über die Durchführung von DevOps in Azure erfahren möchtest, schau es dir an!

Überblick über das Tutorial

In diesem Tutorial lernst du, wie du verschiedene Funktionen von VS Code unter Windows verwendest, indem du ein Projekt mit Visual Studio Code und Git erstellst. Du hast die Aufgabe, herauszufinden, wie man ein Azure VM mit Terraform als kleines Proof-of-Concept (POC)-Projekt erstellt. Du hast VS Code und hast von seiner Fähigkeit als vollständige IDE gehört und möchtest es auf die Probe stellen.

Du wirst:

  • Einen VS Code-Arbeitsbereich erstellen, den du mit deinem Team teilen kannst
  • Die Terraform-Erweiterung installieren
  • Die Terraform-Konfigurationsdatei anpassen, um deiner Namenskonvention und Azure-Abonnement zu entsprechen.
  • Erstellen Sie einen Codeausschnitt für eine häufige Aufgabe, die Sie immer wieder eingeben mussten
  • Commiten Sie die Terraform-Konfigurationsdatei in ein Git-Repository

In diesem Tutorial geht es nicht darum, wie man Terraform verwendet, um Azure-VMs bereitzustellen. Dafür haben wir bereits einen Artikel über Terraform und Azure-VMs. In diesem Tutorial geht es darum, Visual Studio Code zu erlernen.

Klingt das nach einem interessanten Projekt? Wenn ja, lesen Sie weiter, um loszulegen!

Voraussetzungen

Um diesem Visual Studio Code Git-Tutorial folgen zu können, stellen Sie bitte sicher, dass Sie Folgendes haben:

  • VS Code – Alle Beispiele werden mit VS Code 1.44 durchgeführt, frühere Versionen sollten jedoch auch funktionieren.
  • Terraform – Alle Beispiele werden mit Terraform für Windows v0.12.24 durchgeführt.
  • Git für Windows installiert – Alle Beispiele werden mit v2.26 durchgeführt. Wenn Sie möchten, dass VS Code der Standardeditor für Git ist, wählen Sie dies bitte bei der Installation aus.
Default editor for Git

Klonen Sie das Git-Repo

Da sich dieses Tutorial darauf konzentriert, mit Code in einem GitHub-Repository zu arbeiten, ist Ihre erste Aufgabe, dieses GitHub-Repository auf Ihren lokalen Computer zu klonen.

Für dieses Projekt arbeiten Sie von einem GitHub-Repository namens VSCodeDemo. Da VS Code eine native Git-Integration hat, können Sie ein Git-Repository ohne zusätzliche Konfiguration klonen. So geht’s:

  1. Öffnen Sie die Befehlspalette mit Strg-Umschalt-P, geben Sie git ein, wo Sie verschiedene Optionen bemerken werden, wie unten gezeigt.
Cloning a Git repo with VS Code

2. Wählen Sie Git: Klonen, woraufhin VS Code Sie nach der URL des Repositories auffordert. Geben Sie hier die URL https://github.com/NoBSDevOps/VSCodeDemo.git ein und drücken Sie Enter.

3. Wählen Sie einen Ordner aus, um die geklonten Projektdateien abzulegen. Dieses Projekt platziert den Repo-Ordner im Stammverzeichnis von C:\. Sobald Sie den Speicherort des Repositories ausgewählt haben, wird VS Code im Hintergrund git.exe aufrufen und das Repository auf Ihren Computer klonen.

4. Wenn es fertig ist, fordert VS Code Sie auf, das geklonte Repository sofort zu öffnen, wie unten gezeigt, klicken Sie auf Öffnen, um dies zu tun.

Opening the cloned Git repo

Sie haben nun einen geöffneten Ordner in VS Code für das Git-Repository. Sie müssen diesen geöffneten Ordner und alle Einstellungen, die Sie durchführen werden, nun in einem Arbeitsbereich „speichern“.

Erstellen eines Arbeitsbereichs

Jetzt, da Sie einen Ordner geöffnet haben, der ein Git-Repository enthält, speichern Sie einen Arbeitsbereich, indem Sie zum Datei-Menü gehen und auf Arbeitsbereich speichern unter… klicken.

Saving a VS Code workspace

Speichern Sie den Arbeitsbereich als Projekt im Projektordner. VS Code erstellt dann eine Datei namens project.code-workspace im Git-Repo-Ordner. Dieser Arbeitsbereich weiß nun, welchen Ordner Sie geöffnet hatten. Wenn der Arbeitsbereich in Zukunft geöffnet wird, öffnet er automatisch den Ordner C:\VSCodeDemo.

Statt eines Ordner namens sehen Sie nun den Namen des Arbeitsbereichs.

Inspecting a VS Code workspace

Einrichten von Erweiterungen

Erweiterungen sind eine der nützlichsten Funktionen von VS Code. Erweiterungen ermöglichen es Ihnen, Funktionalitäten hinzuzufügen, um viele verschiedene Projekte zu verwalten. In diesem Tutorial werden Sie mit Terraform arbeiten.

Öffnen Sie eine der Terraform-Konfigurationsdateien im Arbeitsbereich entlang der linken Seitenleiste. Beachten Sie, wie sich ein Editor-Tab öffnet und den Text anzeigt, aber das war es auch schon. Es gibt keine übliche Syntaxhervorhebung oder andere Funktionen. VS Code denkt, dass es sich um eine einfache Textdatei handelt, und zeigt sie entsprechend an. Lassen Sie uns das beheben.

No syntax highlighting for a Terraform configuration file

Um VS Code eine Terraform-Konfigurationsdatei „verstehen“ zu lassen, benötigen Sie eine Erweiterung. Erweiterungen sind ein großer Teil von VS Code, der eine Welt neuer Funktionen eröffnet. In diesem Fall benötigen Sie die Terraform-Erweiterung, um beim Erstellen von Terraform-Konfigurationsdateien und beim Bereitstellen von Infrastruktur mit Terraform zu helfen.

Um die Terraform-Erweiterung zu installieren, klicken Sie auf die Erweiterungsschaltfläche in der Aktivitätsleiste und suchen Sie nach terraform. Es werden mehrere Erweiterungen angezeigt, aber für dieses Projekt klicken Sie auf Installieren für das oberste Ergebnis von Mikael Olenfalk. VS Code wird dann die Erweiterung installieren.

Installing a Terraform extension

Nach der Installation navigieren Sie zurück zum Arbeitsbereich und klicken Sie auf eine der TF-Dateien im Arbeitsbereich. Sie werden sofort einen der offensichtlichsten Unterschiede beim Verwenden einer Erweiterung feststellen, die Syntaxhervorhebung.

Jetzt können Sie in der folgenden Bildschirmkopie sehen, dass VS Code „weiß“, was ein Kommentar ist (indem er ihn grün macht), was ein String ist (indem er ihn rot macht) und so weiter. Es ist jetzt viel einfacher, eine Terraform-Konfigurationsdatei zu lesen.

Terraform syntax-highlighting performed by the VS Code Terraform extension

Es gibt noch viele weitere Funktionen in Mikael’s Terrafom-Erweiterung enthalten. Stellen Sie sicher, dass Sie alle möglichen Vorteile dieser Erweiterung untersuchen, wenn Sie Terraform verwenden.

Codebearbeitung

Es ist wahrscheinlich, dass Sie, wenn Sie ein Skript oder eine Konfigurationsdatei im Internet finden, diese nicht genau so vorfinden werden, wie Sie sie benötigen. Sie müssen sie in irgendeiner Weise ändern.

In diesem Beispiel des Tutorials möchten Sie das Hauptblocklabel in der infrastructure-before.tf Terraform-Konfigurationsdatei möglicherweise in „Projekt“ ändern. Dazu müssen Sie einige Textstellen finden und ersetzen. In VS Code gibt es mehrere Möglichkeiten, dies zu tun.

Eine der häufigsten Methoden, um eine Zeichenkette zu suchen und durch eine andere zu ersetzen, ist die gute alte Suchen- und Ersetzen-Funktion.

Drücken Sie Strg + F, und Sie werden einen Dialog ähnlich dem folgenden Screenshot sehen. Hier können Sie den String eingeben, den Sie suchen möchten, und wenn Sie auf den nach unten zeigenden Pfeil klicken, wird er erweitert und bietet einen Platz zum Eingeben eines Strings, durch den er ersetzt werden soll. Im folgenden Screenshot sehen Sie Optionen wie Aa und Ab| für die Groß-/Kleinschreibung und auch reguläre Ausdrücke.

Finding and replacing text

Sie können auch eine „Suchen und Ersetzen“-Funktion mit Strg + D durchführen. Wählen Sie einfach den Text aus, den Sie suchen möchten, und beginnen Sie, Strg + D zu drücken. Sie werden feststellen, dass VS Code beginnt, jede Instanz dieses Strings mit einem blinkenden Cursor zu markieren.

Wenn Sie alle Elemente ausgewählt haben, beginnen Sie mit der Eingabe, und VS Code ändert alle Instanzen auf einmal, genauso als ob Sie jede einzeln ausgewählt hätten.

Synchronizing changes with multiple cursors

Zeitsparende mit Schnipseln

Angenommen, Sie beschäftigen sich wirklich mit Terraform und Azure und sind es leid, den Terraform-Konfigurationsdateiblock zum Erstellen einer neuen Azure-Ressourcengruppe im folgenden Code-Schnipsel auszutippen. 

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

Um Zeit beim Erstellen dieser Blöcke zu sparen, erstellen Sie einen VS-Code-Schnipsel.

Verwandt:VS-Code-Schnipsel: Beschleunigen Sie die Codierung mit Verknüpfungen

Um einen VS-Code-Schnipsel zu erstellen:

  1. Kopieren Sie den Block azurerm_resource_group aus der Infrastruktur-before.tf-Terraform-Konfigurationsdatei.

2. Öffnen Sie die Befehlspalette mit Strg-Umschalt-P.

3. Geben Sie „Schnipsel“ ein, um die Liste der Optionen zu filtern.

4. Wählen Sie Einstellungen: Benutzer-Snippets konfigurieren. Dadurch wird eine Liste aller Snippet-Dateien angezeigt, die normalerweise nach Sprache getrennt sind.

5. Geben Sie „terraform“ ein, um nach den Terraform-Snippets zu filtern.

6. Wählen Sie terraform (Terraform) aus, um die Terraform-Snippet-Datei (terraform.json) zu öffnen.

Mit der geöffneten Terraform-Snippet-Datei entfernen Sie alle Kommentare und kopieren/einfügen das folgende JSON-Element. 

{
     "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"
      }
 }

Beachten Sie die Verwendung von \t und der Backslashes. Sie können keine Tabulatoren direkt in ein Snippet einfügen. Um einen Tabulator darzustellen, müssen Sie \t verwenden. Außerdem müssen Sie Zeichen wie doppelte Anführungszeichen, Dollarzeichen, geschweifte Klammern und Backslashes mit einem Backslash escapen.

8. Speichern Sie die Datei terraform.json.

9. Gehen Sie zurück zur Terraform-Konfigurationsdatei und geben Sie „rg“ ein. Beachten Sie, dass Sie jetzt eine Option zum Erweitern eines Snippets sehen.

Expanding a snippet

10. Wählen Sie das rg Snippet wie oben gezeigt aus. Beachten Sie, dass es sich jetzt auf das Snippet ausdehnt, das Sie gerade mit drei hervorgehobenen Elementen erstellt haben.

VS Code hat jedes der Wörter hervorgehoben, um als Platzhalter zu fungieren, aufgrund der in der terraform.json Snippet-Datei definierten Variablen (${1:Blocklabel}).

Filling in snippet placeholders

Zu diesem Zeitpunkt können Sie Tab drücken und einfach die Werte eingeben, die Sie benötigen, ohne sich darum kümmern zu müssen, wie der Block selbst erstellt wird.

Weitere Informationen zur Snippet-Syntax finden Sie in der Snippets in der Visual Studio Code-Dokumentation.

Code in Git committen

Zu diesem Zeitpunkt haben Sie ein öffentliches GitHub-Repo geklont, das einige Terraform-Konfigurationsdateien enthält. Sie haben einige Dateien bearbeitet und sind nun bereit, diese Änderungen zurück zum GitHub-Repo hochzuladen.

Um Änderungen zurück zum GitHub-Repo hochzuladen, müssen Sie zunächst Visual Studio Code und Git verwenden, um Änderungen in Ihrem lokal geklonten Git-Repo zu commiten. Als Sie das GitHub-Repo zuvor geklont haben, haben Sie nicht nur die Konfigurationsdateien heruntergeladen, sondern auch ein Git-Repo.

Wenn Sie bisher mitgekommen sind, sollten Sie nun das geklonte Git-Repo geöffnet haben, mit einigen ausstehenden Änderungen, genau zwei. Wie wissen Sie das? Indem Sie auf die Zahl in der Aktivitätsleiste achten, wie unten gezeigt.

Wenn Sie ein Git-Repo in Visual Studio Code geöffnet haben, erhalten Sie einen Einblick in die Anzahl der Dateien, die Sie in ein lokales Git-Repo stagen und commiten können, in der Aktivitätsleiste.

Unstaged Git commits

Klicken Sie auf den Eintrag „Source Control“ auf der linken Seite und Sie sehen zwei Elemente: die Terraform-Konfigurationsdatei „infrastructure-before.tf“ und den zuvor gespeicherten Arbeitsbereich („project.code-workspace“). Die Konfigurationsdatei hat ein rotes „M“ rechts davon, was bedeutet, dass sie geändert wurde. Die Arbeitsbereichsdatei hat ein grünes „U“ rechts daneben, weil sie „untracked“ ist, was bedeutet, dass sie derzeit nicht unter Versionskontrolle steht.

VS Code Git change labels

Um sicherzustellen, dass beide Dateien in das GitHub-Repo zurückgelangen, erstellen Sie zunächst eine hilfreiche Commit-Nachricht, in der Sie angeben, warum Sie diese Dateien committen. Die Nachricht kann eine beliebige beschreibende Zusammenfassung sein. Sobald Sie eine Commit-Nachricht geschrieben haben, stagen Sie die Änderungen. Das Stagen von Änderungen in Visual Studio Code in Git fügt den Dateiinhalt dem Staging-Bereich hinzu, um sie für einen Commit im Repo vorzubereiten.

Während Sie sich im Source Control-Bereich befinden, klicken Sie neben jeder Datei auf das +-Symbol, um sie wie unten gezeigt zu stagen.

Staging Git changes

Sobald gestaged, klicken Sie auf das Häkchen, um alle gestageten Änderungen zu commiten, wie unten gezeigt.

Committing Git changes

Sie erhalten wahrscheinlich eine Fehlermeldung, die darauf hinweist, dass Sie in Git eine user.name und user.email konfigurieren müssen.

Your Git user is not defined in the Git configuration

Kein Problem. Sie müssen Git einfach die benötigten Informationen zur Verfügung stellen. Gehen Sie dazu in Ihr integriertes Terminal von VS Code und führen Sie die folgenden beiden Befehle aus, wobei Sie meine E-Mail-Adresse und meinen Namen durch Ihre eigenen ersetzen.

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

Versuchen Sie nun, die Dateien zu committen. Sie sollten nun sehen, dass die Dateien dem Repo committet werden.

Sie können alle geänderten Dateien stagen, ohne manuell auf das +-Symbol neben jeder Datei zu klicken, indem Sie sie alle auf einmal committen. VS Code wird automatisch alle Dateien für Sie stagen.

Wenn Sie in einem Team mit einem gemeinsamen Repository arbeiten, wäre der nächste Schritt, diese Änderungen zurück in das GitHub-Repository zu pushen oder einen Pull Request zu erstellen.

Zusammenfassung

VS Code ist eine funktionsreiche IDE. Sie kann Ihnen nicht nur dabei helfen, Code besser zu schreiben und zu verstehen, sondern auch Infrastruktur einzurichten und Änderungen vorzunehmen, Dienstprogramme aufzurufen und vieles mehr. VS Code bietet Ihnen einen Ort, an dem Sie all Ihre Entwicklungsanstrengungen verwalten können.

Obwohl dieses Tutorial nur einen Teil dessen abdeckt, was VS Code kann, ist diese IDE zu so viel mehr fähig. Wenn Sie mehr über die Möglichkeiten von VS Code erfahren möchten, schauen Sie sich Was Sie über Visual Studio Code wissen müssen: Ein Tutorial an.

Source:
https://adamtheautomator.com/visual-studio-code-git/