Een Beginner’s Gids voor Visual Studio Code en Git

Degenen die nieuw zijn bij Visual Studio (VS) Code zien misschien gewoon een code-editor. De ware kracht van VS Code ligt echter in de extensies, geïntegreerde terminal en andere functies. In deze praktische handleiding leer je hoe je Visual Studio Code kunt gebruiken door met een Git-repository te werken.

Gerelateerd:Wat je moet weten over Visual Studio Code: Een Tutorial

Met de ingebouwde VS Code-tools en enkele extensies ga je code schrijven en committeren naar versiebeheer met één interface.

Deze blogpost is een fragment uit een hoofdstuk van het eBook Van Admin naar DevOps: De BS-manier om DevOps in Azure te doen. Als je dit hoofdstuk leuk vindt en meer wilt leren over DevOps in Azure, bekijk het dan!

Overzicht van de handleiding

In deze handleiding leer je hoe je verschillende functies van VS Code op Windows kunt gebruiken door een project te bouwen met Visual Studio Code en Git. Je hebt de opdracht gekregen om uit te zoeken hoe je een Azure VM kunt bouwen met Terraform als een klein proof of concept (POC) project. Je hebt VS Code en hebt gehoord van zijn mogelijkheden als een volledige IDE en wilt het testen.

Je gaat het volgende doen:

• Een VS Code-werkruimte maken om te delen met je team
• De Terraform-extensie installeren
• De Terraform-configuratiebestand aanpassen aan je naamconventie en Azure-abonnement
• Maak een fragment voor een veelvoorkomende taak die je steeds opnieuw hebt moeten typen.
• Commit het Terraform-configuratiebestand naar een Git-repo

Deze tutorial is niet bedoeld om te laten zien hoe je Terraform gebruikt om Azure VM’s te implementeren. We hebben al een artikel over Terraform en Azure VM’s daarvoor. Deze tutorial richt zich op het leren van Visual Studio Code.

Klinkt dit als een interessant project? Zo ja, lees verder om aan de slag te gaan!

Vereisten

Om deze Visual Studio Code Git-tutorial te volgen, moet je ervoor zorgen dat je het volgende hebt:

• VS Code – Alle voorbeelden zullen VS Code 1.44 gebruiken, hoewel eerdere versies waarschijnlijk ook zullen werken.
• Terraform – Alle voorbeelden zullen Terraform voor Windows v0.12.24 gebruiken.
• Git voor Windows geïnstalleerd – Alle voorbeelden zullen v2.26 gebruiken. Als je wilt dat VS Code de standaardeditor van Git is, zorg er dan voor dat je deze selecteert bij de installatie.

Kloon de Git-repo

Aangezien deze tutorial zich zal richten op het werken met code in een GitHub-repo, is je eerste taak het klonen van die GitHub-repo naar je lokale computer.

Voor dit project ga je werken vanuit een GitHub-repo genaamd VSCodeDemo. Omdat VS Code native Git-integratie heeft, kun je een Git-repo klonen zonder extra configuratie. Doe het als volgt:

1. Open het commandopalet met Ctrl-Shift-P, typ git waar je verschillende opties zult zien, zoals hieronder getoond.

2. Kies Git: Clone waarna VS Code je zal vragen om de URL van de repo in te voeren. Voer hier de URL in: https://github.com/NoBSDevOps/VSCodeDemo.git en druk op Enter.

3. Kies een map om de gekloonde projectbestanden te plaatsen. Deze handleiding plaatst de repo-map in de hoofdmap van C:\. Nadat je de locatie hebt geselecteerd, zal VS Code git.exe op de achtergrond aanroepen en de repo naar je computer klonen.

4. Wanneer het klaar is, zal VS Code vragen of je de gekloonde repository onmiddellijk wilt openen, zoals hieronder weergegeven. Klik op Open om dit te doen.

Je hebt nu een geopende map in VS Code voor de Git-repo. Nu moet je deze geopende map en alle instellingen die je zult uitvoeren, “opslaan” in een werkruimte.

Werkruimte maken

Nu je een geopende map hebt met een Git-repo, sla je een werkruimte op door naar het Bestand-menu te gaan en te klikken op Werkruimte opslaan als….

Bewaar de werkruimte als project in de projectmap. VS Code zal dan een bestand genaamd project.code-workspace aanmaken in de Git-repomap. Deze werkruimte weet nu in welke map je het had geopend. Nu, wanneer de werkruimte in de toekomst wordt geopend, zal het automatisch de map C:\VSCodeDemo openen.

Nu, in plaats van een mapnaam, zie je de naam van de werkruimte.

Extensies instellen

Extensies zijn een van de meest nuttige functies van VS Code. Extensies stellen je in staat functionaliteit toe te voegen om je te helpen bij het beheren van veel verschillende projecten. In deze tutorial ga je werken met Terraform.

Open een van de Terraform-configuratiebestanden in de werkruimte langs de linkerkant. Merk op hoe er een bewerkingstabblad wordt geopend en de tekst wordt weergegeven, maar dat is het dan ook. Er is geen gebruikelijke syntaxismarkering of andere functies. VS Code denkt dat dit een gewoon tekstbestand is en geeft het dienovereenkomstig weer. Laten we dat verhelpen.

Om ervoor te zorgen dat VS Code een Terraform-configuratiebestand “begrijpt”, heb je een extensie nodig. Extensies zijn een groot onderdeel van VS Code dat een wereld van nieuwe functionaliteit opent. In dit geval heb je de Terraform-extensie nodig om te helpen bij het bouwen van Terraform-configuratiebestanden en het implementeren van infrastructuur met Terraform.

Om de Terraform-extensie te installeren, klik je op de extensieknop op de Activiteitenbalk en zoek je naar terraform. Je zult meerdere extensies zien verschijnen, maar voor dit project klik je op Installeren voor het bovenste resultaat gemaakt door Mikael Olenfalk. VS Code zal dan de extensie installeren.

Eenmaal geïnstalleerd, navigeer terug naar de werkruimte en klik op een van de TF-bestanden in de werkruimte. U ziet meteen een van de meest voor de hand liggende verschillen bij het gebruik van een extensie, syntaxkleuring.

Nu kunt u zien in de volgende schermafbeelding dat VS Code “weet” wat een opmerking is (door deze groen te maken), wat een string is (door deze rood te maken) enzovoort. Het is nu veel gemakkelijker om een Terraform-configuratiebestand te lezen.

Er is veel meer functionaliteit inbegrepen bij de Terrafom-extensie van Mikael. Zorg ervoor dat u alle mogelijke voordelen onderzoekt die u kunt krijgen van deze extensie als u Terraform gebruikt.

Codebewerking

De kans is groot dat wanneer u een script of configuratiebestand op internet vindt, het niet precies is zoals u het nodig heeft. U moet het op de een of andere manier aanpassen.

In het voorbeeld van deze tutorial wilt u bijvoorbeeld het label van het “main” blok in het bestand “infrastructure-before.tf” wijzigen naar mogelijk “project”. Om dat te doen, moet u wat tekst zoeken en vervangen. In VS Code zijn er meerdere manieren om dat te doen.

Een van de meest voorkomende manieren om een tekenreeks te vinden en te vervangen door een andere is de ouderwetse functionaliteit voor zoeken en vervangen.

Druk op Ctrl-F en je zult een dialoogvenster zien dat lijkt op de volgende screenshot. Hier kun je de te vinden tekenreeks typen en als je op de pijl naar beneden klikt, wordt het uitgebreid en biedt het een plek om een tekenreeks in te voeren om deze te vervangen. In de onderstaande screenshot zie je opties zoals Aa en Ab| voor hoofdlettergevoelig zoeken en ook reguliere expressies.

Je kunt ook een “zoeken en vervangen” uitvoeren met Ctrl-D. Selecteer eenvoudig de tekst die je wilt vinden en begin op Ctrl-D te drukken. Je zult merken dat VS Code elk exemplaar van die tekenreeks begint te markeren met een knipperende cursor.

Als je alle items hebt geselecteerd, begin dan te typen en VS Code wijzigt alle exemplaren tegelijk alsof je ze allemaal afzonderlijk had geselecteerd.

Tijd besparen met Snippets

Stel dat je echt enthousiast wordt over Terraform en Azure en moe bent van het uittypen van het Terraform-configuratiebestandsblok om een nieuwe Azure-resourcegroep te maken in de volgende codefragment.

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

Om tijd te besparen bij het maken van deze blokken, maak je een VS Code-snippet.

Gerelateerd:VS Code Snippets: Versnelling van codering met sneltoetsen

Om een VS Code-snippet te maken:

1. Kopieer het azurerm_resource_group blok uit het Infrastructure-before.tf Terraform configuratiebestand.

2. Open de opdrachtpallet met Ctrl-Shift-P.

3. Typ “snippets” om de lijst met opties te filteren.

4. Selecteer Voorkeuren: Configureer Gebruikersfragmenten. Dit opent een lijst met alle fragmentbestanden die meestal gescheiden zijn per taal.

5. Typ “terraform” om te filteren op de Terraform-fragmenten.

6. Selecteer terraform (Terraform) om het Terraform-fragmentbestand (terraform.json) te openen.

Met het Terraform-fragmentbestand open, verwijder alle opmerkingen en kopieer/plak het volgende JSON-element binnenin.

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

Let op het gebruik van \t en de backslashes. Je kunt geen tab-karakters direct in een fragment plaatsen. Om een tab-karakter voor te stellen, moet je \t gebruiken. Ook moet je karakters zoals dubbele aanhalingstekens, dollartekens, accolades en backslashes escapen met een backslash.

8. Sla het bestand terraform.json op.

9. Ga terug naar het Terraform-configuratiebestand en typ “rg”. Let op dat je nu een optie ziet om een fragment uit te vouwen.

10. Selecteer het rg fragment zoals hierboven getoond. Merk op dat het nu uitvouwt naar het fragment dat je zojuist hebt aangemaakt, met drie items gemarkeerd.

VS Code markeerde elk van de woorden om te fungeren als tijdelijke aanduidingen vanwege de variabelen gedefinieerd in het terraform.json fragmentbestand (${1:block label}).

Op dit punt kun je op Tab drukken en eenvoudig de waarden typen die je nodig hebt zonder je zorgen te maken over hoe je het blok zelf moet maken.

Voor een volledige uitleg over fragment syntax, bekijk de Fragmenten in Visual Studio Code documentatie.

Code committen naar Git

Op dit punt heb je een openbare GitHub-repo gekloond die een paar Terraform-configuratiebestanden bevat. Je hebt wat bestanden bewerkt en nu ben je klaar om die wijzigingen terug te zetten naar de GitHub-repo.

Om wijzigingen terug te zetten naar de GitHub-repo, moet je eerst Visual Studio Code en Git gebruiken om wijzigingen te committen naar je lokaal gekloonde Git-repo. Toen je eerder de GitHub-repo kloonde, heb je niet alleen de configuratiebestanden gedownload, maar ook een Git-repo.

Als je hebt gevolgd, zou je nu het gekloonde Git-repo moeten hebben geopend met een paar wijzigingen in behandeling, om precies te zijn twee. Hoe weet je dat? Door het nummer in de Activiteitenbalk op te merken, zoals hieronder wordt getoond.

Als je een Git-repo hebt geopend in Visual Studio Code, krijg je een glimp van het aantal bestanden dat je kunt toevoegen en committen aan een lokaal Git-repo in de Activiteitenbalk.

Klik op het item Bronbesturing aan de linkerkant en je ziet twee items; het Terraform-configuratiebestand infrastructure-before.tf en de werkruimte die je eerder hebt opgeslagen (project.code-workspace). Het configuratiebestand zal een rode M aan de rechterkant hebben, wat aangeeft dat het is gewijzigd. Het werkruimtebestand zal een groene U aan de rechterkant hebben, omdat het ongecontroleerd is, wat betekent dat het momenteel niet onder versiebeheer staat.

Om ervoor te zorgen dat beide van deze bestanden terugkeren naar de GitHub repo, maak eerst een behulpzame commitbericht aan waarin je aangeeft waarom je deze bestanden commit. Het bericht kan een willekeurige beschrijvende samenvatting zijn. Nadat je een commitbericht hebt geschreven, stage de wijzigingen. Het stageneren van wijzigingen in Visual Studio Code in Git voegt de bestandsinhoud toe aan het staging-gebied ter voorbereiding op een commit naar de repo.

Terwijl je op het Source Control-paneel bent, klik je op het +-pictogram naast elk bestand om ze te stageneren zoals hieronder wordt weergegeven.

Zodra ze zijn gestaged, klik je op het vinkje om alle gestagede wijzigingen te commiten, zoals hieronder wordt weergegeven.

Je ontvangt waarschijnlijk een foutmelding waarin staat dat je een user.name en user.email moet configureren in Git.

Geen probleem. Je hoeft Git alleen de benodigde informatie te verstrekken. Ga naar je geïntegreerde terminal van VS Code en voer de volgende twee commando’s uit, waarbij je mijn e-mailadres en naam vervangt door die van jou.

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

Probeer nu de bestanden te commiten. Je zou nu moeten zien dat de bestanden worden gecommit naar de repo.

Je kunt alle gewijzigde bestanden stageneren zonder handmatig op het +-pictogram naast elk bestand te klikken door ze allemaal in één keer te committen. VS Code zal automatisch alle bestanden voor je stageneren.

Als je aan een team werkt met een gedeelde repository, zou de volgende stap zijn om deze wijzigingen naar de GitHub-repo te pushen of een pull-aanvraag openen.

Conclusie

VS Code is een functierijke IDE. Het kan je niet alleen helpen om beter code te schrijven en te begrijpen, maar het kan ook infrastructuur bouwen, hulpprogramma’s oproepen en meer. VS Code biedt je één plek om al je ontwikkelingsinspanningen te beheren.

Hoewel deze tutorial slechts een deel van de mogelijkheden van VS Code heeft behandeld, is deze IDE tot veel meer in staat. Als je meer wilt weten over wat VS Code kan doen, bekijk dan Wat je moet weten over Visual Studio Code: Een Tutorial.