Guide du débutant pour Visual Studio Code et Git

Ceux qui découvrent Visual Studio (VS) Code pourraient simplement voir un éditeur de code. La véritable puissance de VS Code réside dans ses extensions, son terminal intégré et d’autres fonctionnalités. Dans ce tutoriel pratique, vous allez apprendre à utiliser Visual Studio Code en travaillant avec un référentiel Git.

Connexe :Ce que vous devez savoir sur Visual Studio Code : un tutoriel

En utilisant les outils intégrés de VS Code et quelques extensions, vous allez écrire du code et le valider dans le contrôle de source en utilisant une seule interface.

Cet article de blog est un extrait d’un chapitre de l’eBook De l’administration à DevOps : La manière BS de faire du DevOps dans Azure. Si vous aimez ce chapitre et souhaitez en savoir plus sur la mise en œuvre du DevOps dans Azure, consultez-le !

Vue d’ensemble du tutoriel

Dans ce tutoriel, vous allez apprendre à utiliser diverses fonctionnalités de VS Code sur Windows en construisant un projet à l’aide de Visual Studio Code et Git. On vous a confié la tâche de comprendre comment créer une machine virtuelle Azure avec Terraform en tant que petit projet de preuve de concept (POC). Vous avez VS Code et avez entendu parler de sa capacité en tant qu’EDI complet, et vous voulez le mettre à l’épreuve.

Vous allez :

• Créer un espace de travail VS Code à partager avec votre équipe
• Installer l’extension Terraform
• Modifier le fichier de configuration Terraform pour qu’il corresponde à votre convention de nommage et à votre abonnement Azure
• Créez un extrait de code pour une tâche courante que vous avez trouvé que vous tapez encore et encore
• Committez le fichier de configuration Terraform dans un dépôt Git

Ce tutoriel n’a pas pour but de montrer comment utiliser Terraform pour déployer des machines virtuelles Azure. Nous avons déjà un article sur Terraform et les machines virtuelles Azure pour cela. Ce tutoriel se concentre sur l’apprentissage de Visual Studio Code.

Cela vous semble-t-il être un projet intéressant ? Si oui, continuez à lire pour commencer !

Prérequis

Pour suivre ce tutoriel sur Visual Studio Code et Git, assurez-vous d’avoir ce qui suit:

• VS Code – Tous les exemples utiliseront VS Code 1.44, bien que les versions antérieures fonctionneront probablement également.
• Terraform – Tous les exemples utiliseront Terraform pour Windows v0.12.24.
• Git pour Windows installé – Tous les exemples utiliseront la version 2.26. Si vous souhaitez que VS Code soit l’éditeur par défaut de Git, assurez-vous de le sélectionner lors de l’installation.

Clonez le dépôt Git

Puisque ce tutoriel va se concentrer sur le travail avec du code dans un dépôt GitHub, votre première tâche consiste à cloner ce dépôt GitHub sur votre ordinateur local.

Pour ce projet, vous travaillerez à partir d’un référentiel GitHub appelé VSCodeDemo. Étant donné que VS Code intègre nativement Git, vous pouvez cloner un référentiel Git sans configuration supplémentaire. Pour ce faire :

1. Ouvrez la palette de commandes avec Ctrl-Shift-P, tapez git où vous verrez différentes options, comme indiqué ci-dessous.

2. Choisissez Git: Clone, ce à quoi VS Code vous demandera l’URL du référentiel. Ici, fournissez l’URL https://github.com/NoBSDevOps/VSCodeDemo.git et appuyez sur Entrée.

3. Choisissez un dossier pour placer les fichiers du projet cloné. Ce projet placera le dossier du référentiel à la racine de C:\. Une fois que vous avez sélectionné l’emplacement du référentiel, VS Code invoquera git.exe en arrière-plan et clonera le référentiel sur votre ordinateur.

4. Lorsque c’est terminé, VS Code vous demandera si vous souhaitez ouvrir immédiatement le référentiel cloné, comme indiqué ci-dessous, cliquez sur Open pour le faire.

Vous avez maintenant un dossier ouvert dans VS Code pour le référentiel Git. Vous devez maintenant « enregistrer » ce dossier ouvert et toutes les configurations que vous allez effectuer dans un espace de travail.

Création d’un espace de travail

Maintenant que vous avez un dossier ouvert contenant un référentiel Git, enregistrez un espace de travail en allant dans le menu File et en cliquant sur Save Workspace As….

Enregistrez l’espace de travail comme projet dans le dossier du projet. VS Code créera ensuite un fichier appelé project.code-workspace dans le dossier du dépôt Git. Cet espace de travail sait maintenant quel dossier vous aviez ouvert. Maintenant, lorsque l’espace de travail sera ouvert à l’avenir, il ouvrira automatiquement le dossier C:\VSCodeDemo.

Maintenant, au lieu d’un nom de dossier, vous verrez le nom de l’espace de travail.

Configuration des Extensions

Les extensions sont l’une des fonctionnalités les plus utiles de VS Code. Les extensions vous permettent d’ajouter des fonctionnalités pour vous aider à gérer de nombreux projets différents. Dans ce tutoriel, vous allez travailler avec Terraform.

Ouvrez l’un des fichiers de configuration Terraform dans l’espace de travail le long de la barre latérale gauche. Remarquez comment un onglet d’éditeur s’ouvre et affiche le texte mais c’est à peu près tout. Il n’y a pas de mise en évidence de syntaxe habituelle ou d’autres fonctionnalités. VS Code pense qu’il s’agit d’un fichier texte brut et l’affiche en conséquence. Remédions à cela.

Pour que VS Code « comprenne » un fichier de configuration Terraform, vous avez besoin d’une extension. Les extensions sont une partie importante de VS Code qui ouvre un monde de nouvelles fonctionnalités. Dans ce cas, vous avez besoin de l’extension Terraform pour aider à créer des fichiers de configuration Terraform et à déployer une infrastructure avec Terraform.

Pour installer l’extension Terraform, cliquez sur le bouton des extensions sur la barre d’activités et recherchez terraform. Vous verrez plusieurs extensions apparaître mais pour ce projet, cliquez sur Installer pour le meilleur résultat créé par Mikael Olenfalk. VS Code installera ensuite l’extension.

Une fois installé, retournez à l’espace de travail et cliquez sur l’un des fichiers TF dans l’espace de travail. Vous verrez immédiatement l’une des différences les plus évidentes lors de l’utilisation d’une extension, la coloration syntaxique.

Maintenant, vous pouvez voir dans la capture d’écran suivante que VS Code « sait » ce qu’est un commentaire (en le rendant vert), ce qu’est une chaîne de caractères (en la rendant rouge), et ainsi de suite. Il est maintenant beaucoup plus facile de lire un fichier de configuration Terraform.

Il y a beaucoup plus de fonctionnalités incluses dans l’extension Terrafom de Mikael. Assurez-vous de explorer tous les avantages potentiels que vous pouvez obtenir avec cette extension si vous utilisez Terraform.

Édition de code

Il est probable que lorsque vous trouvez un script ou un fichier de configuration sur Internet, il ne sera pas exactement comme vous en avez besoin. Vous devrez probablement le modifier d’une manière ou d’une autre.

Dans l’exemple de ce tutoriel, vous souhaitez peut-être changer l’étiquette du bloc main dans le fichier de configuration Terraform infrastructure-before.tf. pour peut-être projet. Pour ce faire, vous devrez rechercher et remplacer du texte. Dans VS Code, il existe plusieurs façons de le faire.

l’une des façons les plus courantes de rechercher une chaîne et de la remplacer par une autre est la bonne vieille fonctionnalité de recherche et de remplacement.

Appuyez sur Ctrl-F et vous verrez une boîte de dialogue similaire à la capture d’écran suivante. Ici, vous pouvez taper la chaîne que vous souhaitez trouver et si vous cliquez sur la flèche vers le bas, elle se développera et fournira un endroit pour entrer une chaîne à remplacer. Dans la capture d’écran ci-dessous, vous pouvez voir des options comme Aa et Ab| pour la recherche sensible à la casse et aussi les expressions régulières.

Vous pouvez également effectuer une « recherche et remplacement » en utilisant Ctrl-D. Sélectionnez simplement le texte que vous souhaitez trouver et commencez à appuyer sur Ctrl-D. Vous verrez que VS Code commencera à mettre en surbrillance chaque instance de cette chaîne avec un curseur clignotant.

Lorsque vous avez sélectionné tous les éléments, commencez à taper et VS Code change toutes les instances à la fois comme si vous les aviez sélectionnées individuellement.

Économiser du temps avec des extraits de code

Disons que vous vous intéressez vraiment à Terraform et à Azure et que vous en avez marre de taper le bloc de fichier de configuration Terraform pour créer un nouveau groupe de ressources Azure dans le snippet de code suivant.

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

Pour gagner du temps dans la création de ces blocs, créez un extrait de code VS Code.

Connexe :Extraits de code VS Code : Accélérez la programmation avec des raccourcis

Pour créer un extrait de code VS Code :

1. Copiez le bloc azurerm_resource_group du fichier de configuration Terraform Infrastructure-before.tf .

2. Ouvrez la palette de commandes avec Ctrl-Shift-P.

3. Tapez « extraits » pour filtrer la liste des options.

4. Sélectionnez Préférences : Configurer les extraits de code utilisateur. Cela affiche une liste de tous les fichiers d’extrait de code généralement séparés par langue.

5. Tapez « terraform » pour filtrer les extraits de code Terraform.

6. Sélectionnez terraform (Terraform) pour ouvrir le fichier d’extraits de code Terraform (terraform.json).

Avec le fichier d’extraits de code Terraform ouvert, supprimez tous les commentaires et copiez/collez l’élément JSON suivant à l’intérieur.

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

Notez l’utilisation de \t et des barres obliques inverses. Vous ne pouvez pas placer directement de caractères de tabulation à l’intérieur d’un extrait de code. Pour représenter un caractère de tabulation, vous devez utiliser \t. De plus, vous devez échapper les caractères tels que les guillemets doubles, les signes de dollar, les accolades et les barres obliques inverses avec une barre oblique inverse.

8. Enregistrez le fichier terraform.json.

9. Revenez au fichier de configuration Terraform et tapez « rg ». Remarquez maintenant que vous voyez une option pour développer un extrait de code.

10. Sélectionnez l’extrait de code rg comme indiqué ci-dessus. Remarquez qu’il se développe maintenant pour afficher l’extrait de code que vous venez de créer avec trois éléments mis en évidence.

VS Code a mis en évidence chacun des mots pour servir de paramètres en raison des variables définies dans le fichier d’extraits de code terraform.json (${1:étiquette de bloc}).

À ce stade, vous pouvez appuyer sur Tab et simplement taper les valeurs dont vous avez besoin sans vous soucier de la création du bloc lui-même.

Pour une description complète de la syntaxe des extraits de code, assurez-vous de consulter la documentation sur les extraits de code dans Visual Studio Code.

Committez du code à Git

À ce stade, vous avez cloné un dépôt GitHub public contenant quelques fichiers de configuration Terraform. Vous avez modifié certains fichiers et maintenant vous êtes prêt à remonter ces changements vers le dépôt GitHub.

Pour remonter les changements vers le dépôt GitHub, vous devez d’abord utiliser Visual Studio Code et Git pour commettre les modifications dans votre dépôt Git local cloné. Lorsque vous avez cloné le dépôt GitHub précédemment, vous avez téléchargé non seulement les fichiers de configuration mais aussi un dépôt Git.

Si vous avez suivi jusqu’ici, vous devriez maintenant avoir le dépôt Git cloné ouvert avec quelques modifications en attente, deux pour être exact. Comment le savez-vous ? En remarquant le nombre dans la barre d’activités, comme indiqué ci-dessous.

Lorsque vous avez un dépôt Git ouvert dans Visual Studio Code, vous obtenez un aperçu du nombre de fichiers que vous pouvez mettre en scène et commettre dans un dépôt Git local dans la barre d’activités.

Cliquez sur l’élément Contrôle de Source à gauche et vous verrez deux éléments ; le fichier de configuration Terraform infrastructure-before.tf et l’espace de travail que vous avez enregistré précédemment (project.code-workspace). Le fichier de configuration aura un M rouge à sa droite indiquant qu’il a été modifié. Le fichier d’espace de travail aura un U vert à sa droite car il est non suivi, ce qui signifie qu’il n’est actuellement pas sous contrôle de source.

Pour vous assurer que ces deux fichiers reviennent dans le référentiel GitHub, commencez par créer un message de commit utile indiquant pourquoi vous commitez ces fichiers. Le message peut être n’importe quel résumé descriptif. Une fois que vous avez écrit un message de commit, mettez en scène les modifications. Mettre en scène des modifications dans Visual Studio Code avec Git ajoute le contenu du fichier à la zone de mise en scène, en préparation pour un commit dans le référentiel.

Pendant que vous êtes sur le volet Contrôle de source, cliquez sur l’icône + à côté de chaque fichier pour les mettre en scène comme indiqué ci-dessous.

Une fois mis en scène, cliquez sur la coche pour commiter toutes les modifications mises en scène, comme indiqué ci-dessous.

Vous recevrez probablement un message d’erreur indiquant que vous devez configurer un user.name et user.email dans Git.

Aucun problème. Vous devez simplement fournir à Git les informations dont il a besoin. Pour ce faire, allez dans votre terminal intégré de VS Code et exécutez les deux commandes suivantes en remplaçant mon adresse e-mail et mon nom par les vôtres.

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

Essayez maintenant de commiter les fichiers. Vous devriez maintenant voir que les fichiers sont commités dans le référentiel.

Vous pouvez mettre en scène tous les fichiers modifiés sans cliquer manuellement sur le + à côté de chaque fichier en les committant tous à la fois. VS Code mettra automatiquement en scène tous les fichiers pour vous.

Si vous travailliez au sein d’une équipe avec un référentiel partagé, la prochaine étape serait de pousser ces modifications vers le référentiel GitHub ou ouvrir une demande d’extraction (pull request).

Conclusion

VS Code est un IDE riche en fonctionnalités. Il peut non seulement vous aider à écrire et comprendre le code de manière plus efficace, mais il peut également construire et apporter des modifications à l’infrastructure, invoquer des utilitaires, et bien plus encore. VS Code vous offre un endroit centralisé pour gérer tous vos efforts de développement.

Bien que ce tutoriel n’ait couvert qu’une partie des capacités de VS Code, cet IDE est capable de bien plus. Si vous souhaitez en savoir plus sur ce que VS Code peut faire, consultez Ce que vous devez savoir sur Visual Studio Code : un tutoriel.