Guida per principianti a Visual Studio Code e Git

Coloro che sono nuovi a Visual Studio (VS) Code potrebbero vederlo solo come un editor di codice. La vera potenza di VS Code risiede nelle sue estensioni, nella terminale integrata e in altre funzionalità. In questo tutorial pratico, imparerai come utilizzare Visual Studio Code lavorando con un repository Git.

Correlato:Cosa devi sapere su Visual Studio Code: un tutorial

Utilizzando gli strumenti integrati di VS Code e alcune estensioni, scriverai del codice e commetterai tale codice nel controllo del codice sorgente utilizzando un’interfaccia unica.

Questo post è un estratto di un capitolo dell’eBook Da Admin a DevOps: il modo BS per DevOps in Azure. Se ti piace questo capitolo e vuoi imparare a fare il DevOps in Azure, dai un’occhiata!

Panoramica del tutorial

In questo tutorial, imparerai come utilizzare diverse funzionalità di VS Code su Windows creando un progetto utilizzando Visual Studio Code e Git. Ti è stato assegnato il compito di capire come creare una VM Azure con Terraform come piccolo progetto di proof of concept (POC). Hai VS Code e hai sentito parlare delle sue capacità come IDE completo e vuoi metterlo alla prova.

Farai quanto segue:

• Creare un workspace di VS Code da condividere con il tuo team
• Installare l’estensione di Terraform
• Modificare il file di configurazione di Terraform per adattarlo alla tua convenzione di denominazione e all’abbonamento Azure
• Crea un frammento per un’attività comune che hai trovato di digitare più e più volte
• Commit del file di configurazione di Terraform in un repository Git

Questo tutorial non ha lo scopo di mostrare come utilizzare Terraform per distribuire VM di Azure. Abbiamo già un articolo su Terraform e VM di Azure per quello. Questo tutorial si concentrerà sull’apprendimento di Visual Studio Code.

Ti sembra un progetto interessante? In tal caso, continua a leggere per iniziare!

Prerequisiti

Per seguire questo tutorial su Visual Studio Code e Git, assicurati di avere quanto segue:

• VS Code: tutti gli esempi utilizzeranno VS Code 1.44, anche se versioni precedenti potrebbero funzionare bene.
• Terraform: tutti gli esempi utilizzeranno Terraform per Windows v0.12.24.
• Git per Windows installato: tutti gli esempi utilizzeranno la versione 2.26. Se desideri che VS Code sia l’editor predefinito di Git, assicurati di selezionarlo durante l’installazione.

Clona il repository Git

Poiché questo tutorial si concentrerà sul lavoro con il codice in un repository GitHub, il tuo primo compito è clonare quel repository GitHub sul tuo computer locale.

Per questo progetto, lavorerai da un repository GitHub chiamato VSCodeDemo. Dal momento che VS Code ha un’integrazione nativa di Git, puoi clonare un repository Git senza alcuna configurazione aggiuntiva. Per farlo:

1. Apri la palette dei comandi con Ctrl-Shift-P, digita git dove noterai varie opzioni, come mostrato di seguito.

2. Scegli Git: Clone che VS Code ti chiederà l’URL del repository. Qui, fornisci l’URL https://github.com/NoBSDevOps/VSCodeDemo.git e premi Invio.

3. Scegli una cartella in cui posizionare i file del progetto clonato. Questo progetto posizionerà la cartella del repository nella root di C:\. Una volta selezionata la posizione del repository, VS Code invocherà git.exe in background e clonerà il repository sul tuo computer.

4. Quando è finito, VS Code chiederà se desideri aprire immediatamente il repository clonato, come mostrato di seguito, clicca su Apri per farlo.

Ora hai una cartella aperta in VS Code per il repository Git. Ora devi “salvare” questa cartella aperta e tutte le impostazioni che eseguirai in uno spazio di lavoro.

Creazione di uno Spazio di Lavoro

Ora che hai una cartella aperta contenente un repository Git, salva uno spazio di lavoro andando sul menu File e cliccando su Salva Spazio di Lavoro Come….

Salva lo spazio di lavoro come progetto nella cartella del progetto. VS Code creerà quindi un file chiamato project.code-workspace nella cartella del repository Git. Questo spazio di lavoro ora sa quale cartella avevi aperto. Ora, quando lo spazio di lavoro viene aperto in futuro, aprirà automaticamente la cartella C:\VSCodeDemo.

Ora, invece di un nome di cartella, vedrai il nome dello spazio di lavoro.

Configurazione delle estensioni

Le estensioni sono una delle caratteristiche più utili di VS Code. Le estensioni ti consentono di aggiungere funzionalità per gestire molti progetti diversi. In questo tutorial, lavorerai con Terraform.

Apri uno dei file di configurazione di Terraform nella barra laterale sinistra. Nota come si apre una scheda dell’editor e mostra il testo, ma non c’è alcun evidenziazione della sintassi o altre funzionalità. VS Code pensa che si tratti di un file di testo semplice e lo visualizza di conseguenza. Rimediamo a questo.

Per far sì che VS Code “comprenda” un file di configurazione di Terraform, è necessaria un’estensione. Le estensioni sono una parte fondamentale di VS Code che offre una vasta gamma di nuove funzionalità. In questo caso, hai bisogno dell’estensione di Terraform per aiutarti a creare file di configurazione di Terraform e distribuire infrastrutture con Terraform.

Per installare l’estensione di Terraform, fai clic sul pulsante delle estensioni sulla barra delle attività e cerca terraform. Vedrai comparire diverse estensioni, ma per questo progetto, fai clic su Installa per il risultato principale creato da Mikael Olenfalk. VS Code installerà quindi l’estensione.

Una volta installato, torna alla workspace e fai clic su uno dei file TF nella workspace. Vedrai immediatamente una delle differenze più evidenti nell’utilizzo di un’estensione: la colorazione della sintassi.

Ora puoi vedere nella schermata seguente che VS Code “sa” cosa è un commento (lo colora di verde), cosa è una stringa (la colora di rosso) e così via. Ora è molto più facile leggere un file di configurazione di Terraform.

Ci sono molte altre funzionalità incluse nell’estensione Terrafom di Mikael. Assicurati di esplorare tutti i potenziali vantaggi che puoi ottenere da questa estensione se usi Terraform.

Modifica del codice

Probabilmente quando trovi uno script o un file di configurazione su Internet, non sarà esattamente come ti serve. Dovrai modificarlo in qualche modo.

Nell’esempio di questo tutorial, vorresti cambiare l’etichetta del blocco main nel file di configurazione di Terraform infrastructure-before.tf in “project”, ad esempio. Per fare ciò, dovrai trovare e sostituire del testo. In VS Code, ci sono diversi modi per farlo.

Uno dei modi più comuni per trovare una stringa e sostituirla con un’altra è la funzionalità di ricerca e sostituzione.

Premi Ctrl-F e vedrai una finestra di dialogo simile alla seguente schermata. Qui puoi digitare la stringa che desideri trovare e se fai clic sulla freccia verso il basso, si espanderà e fornirà uno spazio per inserire una stringa da sostituire. Nella schermata sottostante, puoi vedere opzioni come Aa e Ab| per la ricerca sensibile alle maiuscole e anche espressioni regolari.

Puoi anche eseguire una “trova e sostituisci” utilizzando Ctrl-D. Seleziona semplicemente il testo che desideri trovare e inizia a premere Ctrl-D. Noterai che VS Code inizierà a evidenziare ogni istanza di quella stringa con un cursore lampeggiante.

Quando hai selezionato tutti gli elementi, inizia a digitare e VS Code cambierà tutte le istanze contemporaneamente, proprio come se le avessi selezionate singolarmente.

Risparmio di tempo con gli snippet

Supponiamo che tu ti stia dedicando a Terraform e Azure e che sia stanco di digitare il blocco di configurazione di Terraform per creare un nuovo gruppo di risorse di Azure nel seguente frammento di codice.

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

Per risparmiare tempo nella creazione di questi blocchi, crea uno snippet di VS Code.

Correlato:Snippet di VS Code: velocizza la codifica con scorciatoie

Per creare uno snippet di VS Code:

1. Copia il blocco azurerm_resource_group dal file di configurazione di Terraform Infrastructure-before.tf .

2. Apri la palette dei comandi con Ctrl-Shift-P.

3. Digita “snippet” per filtrare l’elenco delle opzioni.

4. Seleziona Preferenze: Configura frammenti utente. Questo mostra un elenco di tutti i file di frammenti di solito separati per linguaggio.

5. Digita “terraform” per filtrare i frammenti di Terraform.

6. Seleziona terraform (Terraform) per aprire il file dei frammenti di Terraform (terraform.json).

Con il file dei frammenti di Terraform aperto, rimuovi tutti i commenti e copia/incolla l’elemento JSON seguente all’interno.

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

Nota l’uso di \t e delle barre inverse. Non puoi inserire direttamente caratteri di tabulazione all’interno di un frammento. Per rappresentare un carattere di tabulazione, devi usare \t. Inoltre, devi eseguire l’escape dei caratteri come virgolette doppie, dollaro, parentesi graffe e barre inverse con una barra inversa.

8. Salva il file terraform.json.

9. Torna al file di configurazione di Terraform e digita “rg”. Ora noterai che compare un’opzione per espandere un frammento.

10. Seleziona il frammento rg come mostrato sopra. Nota che ora si espande nel frammento appena creato con tre elementi evidenziati.

VS Code evidenzia ciascuna delle parole per fungere da segnaposto a causa delle variabili definite nel file dei frammenti terraform.json (${1:etichetta del blocco}).

A questo punto, puoi premere Tab e semplicemente digitare i valori di cui hai bisogno senza preoccuparti di come creare il blocco stesso.

Per una panoramica completa sulla sintassi dei frammenti, assicurati di consultare la documentazione Frammenti in Visual Studio Code.

Commit Code to Git

A questo punto, hai clonato un repository pubblico di GitHub che contiene alcuni file di configurazione di Terraform. Hai modificato alcuni file e ora sei pronto per caricare quelle modifiche nel repository di GitHub.

Per caricare le modifiche nel repository di GitHub, devi prima utilizzare Visual Studio Code e Git per fare il commit delle modifiche nel tuo repository Git locale. Quando hai clonato il repository di GitHub in precedenza, hai scaricato non solo i file di configurazione ma anche un repository Git.

Se hai seguito fino a questo punto, dovresti ora avere aperto il repository Git clonato con un paio di modifiche in sospeso, esattamente due. Come lo sai? Notando il numero nella barra attività, come mostrato di seguito.

Quando hai un repository Git aperto in Visual Studio Code, otterrai una panoramica sul numero di file che puoi preparare e fare il commit in un repository Git locale nella barra attività.

Fai clic sull’elemento Controllo di origine sulla sinistra e vedrai due elementi; il file di configurazione di Terraform infrastructure-before.tf e il workspace che hai salvato in precedenza (project.code-workspace). Il file di configurazione avrà un M rosso a destra che indica che è stato modificato. Il file di workspace avrà un U verde a destra perché è non tracciato, il che significa che attualmente non è sotto controllo di origine.

Per assicurarti che entrambi questi file tornino nel repository GitHub, crea prima un messaggio di commit utile che indichi perché stai committando questi file. Il messaggio può essere un riassunto descrittivo. Una volta scritto il messaggio di commit, aggiungi le modifiche. L’aggiunta delle modifiche in Visual Studio Code in Git aggiunge i contenuti del file all’area di staging preparandoli per un commit nel repository.

Mentre sei sulla scheda Controllo di origine, fai clic sull’icona + accanto a ciascun file per aggiungerli all’area di staging come mostrato di seguito.

Una volta aggiunti all’area di staging, fai clic sul segno di spunta per effettuare il commit di tutte le modifiche in staging, come mostrato di seguito.

Potresti ricevere un messaggio di errore che indica che è necessario configurare un user.name e un user.email in Git.

Nessun problema. Devi solo fornire a Git le informazioni di cui ha bisogno. Per farlo, vai nel terminale integrato di VS Code e esegui i seguenti due comandi, sostituendo il mio indirizzo email e nome con i tuoi.

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

Ora prova a committare i file. Ora dovresti vedere che i file vengono committati nel repository.

Puoi aggiungere all’area di staging tutti i file modificati senza fare clic manualmente sul segno + accanto a ciascun file, committendoli tutti in una volta sola. VS Code aggiornerà automaticamente tutti i file per te.

Se stai lavorando in un team con un repository condiviso, il prossimo passo sarebbe effettuare il push di queste modifiche nel repository GitHub o aprire una richiesta di pull.

Conclusione

VS Code è un IDE ricco di funzionalità. Non solo ti aiuta a scrivere e comprendere meglio il codice, ma ti consente anche di creare e apportare modifiche all’infrastruttura, invocare utility e altro ancora. VS Code ti fornisce un unico luogo per gestire tutti i tuoi sforzi di sviluppo.

Sebbene questo tutorial abbia coperto solo una parte di ciò che VS Code può fare, questo IDE è in grado di fare molto di più. Se desideri scoprire cosa può fare VS Code, dai un’occhiata a Cosa devi sapere su Visual Studio Code: un tutorial.