Manipulez le terminal
Découvrez dans ce screencast le terminal intégré à l'outil VS Code. De quoi vous simplifier la vie en gérant qu'un seul outil !
Au cours de vos études et de votre carrière de développeur, vous aurez souvent besoin d'exécuter des commandes de terminal (aussi connu sous les noms de shell, PowerShell, invite de commandes…). C'est pour cela que VS Code permet d'utiliser un terminal intégré. Ouvrez la palette de commandes, tapez "create terminal" et choisissez Terminal: Create New Integrated Terminal :
On peut être amené à avoir besoin de plusieurs fenêtres de terminal en même temps – par exemple, un serveur de développement occupera un terminal, du coup on aura besoin d'un autre pour exécuter d'autres commandes.
VS Code nous offre donc plusieurs possibilités : le bouton "New Terminal" qui ajoute un terminal à la liste déroulante, ou le bouton "Split Terminal" qui permet d'ouvrir plusieurs onglets côte à côte :
Voici à quoi ressemblera votre Split Terminal :
Utilisez Git
Dans ce screencast, vous allez découvrir comment VS Code intègre les fonctionnalités de Git.
Comme vous le savez, le système de contrôle de version Git est extrêmement important dans le monde du développement, que ce soit au niveau individuel, au niveau d'une équipe, ou même au niveau d'une entreprise. VS Code intègre donc tous les outils nécessaires à son utilisation.
Clonez un dépôt
Tout d'abord, vous pouvez cloner un dépôt Git directement depuis VS Code. Pour faire cela, fermez tout projet actuellement ouvert, et ouvrez l'explorateur de fichiers (en haut à gauche) :
Vous pouvez ensuite cliquer sur "Clone Repository", puis coller l'URL du dépôt à cloner ; par exemple celui que nous avons utilisé jusqu'ici :
Quand vous validez l'URL, VS Code vous propose de choisir l'emplacement où vous souhaitez cloner le code, et vous propose d'ouvrir le dépôt cloné. En cliquant sur "Open", vous vous retrouvez dans le bon projet.
Créez une branche
Il est temps de travailler sur votre code, et vous souhaitez créer une branche de travail. Les outils Git se trouvent à gauche :
Vous pouvez ouvrir le menu … ; allez sur Branch -> Create Branch.
Choisissez un nom pour votre branche et appuyez sur Entrée. Vous verrez alors la branche sur laquelle vous vous trouvez, en bas à gauche de la fenêtre principale :
En cliquant sur cette branche, vous pouvez choisir de changer de branche ou d'en créer une nouvelle.
Commit
Effectuons quelques modifications. Ouvrez l'explorateur de fichiers, puis ouvrez blog.html, et changez la langue en en ligne 2 à fr . Dans functions.js , à la ligne 17, changez "Veuillez saisir quelque chose !" en "Il faut saisir quelque chose !".
Rouvrez les outils Git, et vous verrez le résumé de vos modifications. Cliquez sur un fichier pour voir le détail :
Plusieurs options s'ouvrent donc à nous, mais disons que nous souhaitons commit nos modifications. Il faut d'abord stage nos modifications en cliquant sur les boutons + sur chaque fichier. Puis, entrez simplement votre message de commit ("Changed language", par exemple), et faites Ctrl+Entrée sur PC, ou Cmd+Entrée sur Mac pour effectuer votre commit.
Toutes les commandes liées au contrôle de version se trouvent dans cette partie de VS Code (et sont trouvables par la palette de commandes), donc n'hésitez pas à les essayer avec vos propres dépôts.
Exploitez les extensions
Pour personnaliser encore plus votre configuration de VS Code, vous pouvez installer des plugins, ou extensions. Ces plugins viennent rajouter des fonctionnalités ou des outils supplémentaires à votre VS Code.
Vous pouvez parcourir toutes les extensions disponibles sur https://marketplace.visualstudio.com, mais voici deux extensions que je peux vous conseiller :
Live Server – cette extension fait partie des plus populaires sur VS Code. Elle vous permet de lancer un serveur de développement qui rafraichira le rendu de votre page dans le navigateur chaque fois que vous allez enregistrer les modifications dans vos fichiers ;
Git Lens – également un extension très populaire qui rajoute un accès facile à de nombreuses fonctionnalités de Git et Github.
Pour installer une extension, ouvrez Extensions à gauche de la fenêtre, et tapez le nom de l'extension souhaitée :
En cliquant sur les différentes extensions, vous pouvez lire leur descriptif, et pour en installer une, il suffit de cliquer sur le bouton Install correspondant !
Découvrez des extensions VS Code supplémentaires
Voici quelques suggestions d'extensions VS Code que vous trouverez peut-être intéressantes :
Live Share – collaborez avec d'autres développeurs en temps réel, travaillez sur les mêmes fichiers en simultané pour du pair programming facile.
French Language Pack for Visual Studio Code – L’extension officielle de Microsoft pour traduire l’interface de VSCode en français.
Stories – comme les stories Instagram, mais en code !
Search Hero – tous les développeurs font des recherches sur Internet pour trouver des réponses, donc Search Hero intègre directement la recherche et la traduction multimoteur.
Vous pouvez bien sûr trouver toutes les extensions disponibles au Visual Studio Marketplace
En résumé
Dans ce chapitre vous avez exploré les fonctionnalités supplémentaires de VS Code :
vous avez vu les différentes possibilités du terminal intégré ;
vous avez interagi avec des dépôts Git ;
vous avez installé vos premières extensions.
Bien évidemment, vous apprendrez de mieux en mieux cet outil au cours de vos études et de votre carrière, et vous en découvrirez des fonctionnalités plus avancées, mais c'est déjà un excellent début !
Dans le chapitre suivant, vous apprendrez à tester votre code avec les outils de développeur (devtools) Chrome et Firefox !
