• 4 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 01/03/2022

Explorez les fonctionnalités de Visual Studio Code

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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 shellPowerShellinvite 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 :

Create Terminal
Commande : Create Terminal
Terminal intégré
Terminal intégré

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 :

Liste déroulante des terminaux créés après avoir cliqué sur
"New Terminal" + menu
Le bouton split terminal
Bouton "Split Terminal"

Voici à quoi ressemblera votre Split Terminal :

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) :

Clone a repo
Cloner un dépôt

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 :

https://github.com/OpenClassrooms-Student-Center/5543061-ecrivez-du-javascript-pour-le-web-activity.git

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 :

Les outils Git
Les outils Git

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 :

La branche active
La branche active

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 :

Git Diff
Git Diff

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 :

Une page de VSCode Marketplace qui affiche l'extension Live Server
Choisissez une extension

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 !

Exemple de certificat de réussite
Exemple de certificat de réussite