Apprenez dans les deux chapitres qui suivent à utiliser l'outil Visual Studio Code. Vous apprendrez à :
Configurer Visual Studio Code ;
Utiliser l'éditeur ;
Gérez vos dossiers de travail ;
Prendre en main la palette de commandes ;
Manipuler le terminal ;
Utiliser Git ;
Exploiter les extensions.
Vous êtes prêt ?
Configurez VS Code
Avant de plonger dans les fonctionnalités de VS Code, commençons par une configuration de base.
Découvrez dans ce premier screencast l'outil Visual Studio Code et comment réaliser les premières configuration de base. Et ci-dessous, retrouvez en images, pas à pas, les configurations.
Commençons par choisir un thème. Cliquez sur "Get Started with VS Code":
Ensuite, choisissez "Browse Color Themes":
Vous pouvez choisir, avec les flèches de votre clavier, entre des thèmes Dark (fond foncé, texte clair) et Light (fond clair, texte foncé). Appuyez sur Entrée pour sélectionner le thème que vous préférez.
Pour toutes les autres options de configuration de VS Code, vous avez le bouton Manage en bas à gauche, à partir duquel vous pouvez ouvrir les Settings.
Vous pouvez, par exemple, y modifier le réglage Editor: Font Size, ce qui change la taille de police de l'éditeur. Personnellement, je préfère l'augmenter légèrement, car je la trouve un peu petite.
Vous pouvez maintenant fermer l'onglet Settings. Comme vous pouvez le constater, on ne revient pas par défaut sur l'onglet d'accueil de VS Code. Pour revenir à l'accueil, allez dans le menu Help, puis cliquez sur Get Started.
Découvrez l'éditeur
Dans ce screencast, observez les fonctionnalités de VS Code à partir d'un fichier de code.
Pour travailler avec l'éditeur de code, il nous faut d'abord du code ! Je vous propose de cloner un projet simple à partir d'un dépôt Git OpenClassrooms :
Une fois le repo cloné, on va ouvrir le dossier qui contient le code, depuis l'onglet d'accueil :
À gauche de la fenêtre VS Code, le contenu du dossier de code apparaît. On peut maintenant fermer l'onglet d'accueil, et ouvrir le fichier blog.js en cliquant dessus :
Là vous voyez un fichier écrit en JavaScript, l'un des nombreux langages gérés par défaut par VS Code. Ne vous inquiétez pas si vous ne comprenez pas le code, ceci n'est pas un cours de JavaScript ! Je voudrais simplement attirer votre attention sur l'onglet Editor qui s'est ouvert.
La première chose que l'on peut constater, c'est que le texte est coloré. Les différentes couleurs correspondent à différents éléments du langage utilisé, rendant votre code plus facile à lire et à comprendre.
Vous constaterez ensuite que les lignes du fichier sont numérotées. C'est une aide qui, vous le verrez, est indispensable, car elle nous permet de retrouver rapidement les erreurs, ainsi que de collaborer bien plus facilement avec d'autres développeurs.
Passez maintenant votre souris entre les numéros de ligne et le code : vous y verrez apparaître des flèches qui permettent de réduire le code. Cliquez sur les flèches des lignes 4, 20, 31, et 35 :
Le code est toujours là (les numéros de ligne reflètent la vérité cachée !), mais le fait de cacher certaines sections du code rend l'écran moins encombré et peut nous aider à nous concentrer sur l'essentiel.
Vous découvrirez beaucoup d'autres fonctionnalités de l'éditeur de code au cours de vos études et de votre carrière de développeur.
Gérez vos dossiers de travail
Gérez ici les extensions de fichiers et organisez vos dossiers. Cela vous sera bien utile pour gérer vos projets !
En travaillant avec l'éditeur de code, on a vu qu'on pouvait ouvrir un fichier en cliquant dessus dans l'explorateur de fichiers à gauche de l'écran. Cet explorateur vous permet également de gérer vos fichiers et dossiers de travail. Si vous y passez votre souris, vous verrez apparaître quelques icônes dans l'en-tête :
Le premier vous permet de créer un nouveau fichier. Quand on crée un fichier, on doit spécifier son extension.
VS Code interprète l'extension du fichier pour colorer correctement le code et pour mettre en place la bonne autocorrection, par exemple. Cliquez sur l'icône New File , et essayez ces trois exemples : new.html ,new.js , new.css . Vous voyez que VS Code reconnaît l'extension, grâce à l'icône qu'il y attribue.
La deuxième icône de l'en-tête vous permet de créer des dossiers et sous-dossiers. On différencie les dossiers dans l'explorateur par l'icône chevron. Quand vous cliquez sur un dossier, il s'ouvre pour montrer son contenu. Créez un sous-dossier icons au dossier images en le sélectionnant, puis en cliquant sur New Folder :
La prochaine icône, la flèche en cercle, permet de rafraîchir l'explorateur. Cette fonctionnalité vous sera utile notamment quand des fichiers auront été créés par un autre outil, et que VS Code devra en prendre compte.
La dernière icône est un raccourci pour replier tous les dossiers qui sont ouverts dans l'explorateur. Ça vous sera utile quand vous aurez des projets plus complexes avec beaucoup de dossiers, comme ce projet front-end avancé :
Prenez en main la palette de commandes
La palette de commande est une fonctionnalité dont vous ne pourrez plus vous passer ! Elle vous sera d'une grande aide pour travailler plus efficacement sur VS Code. Découvrez là dans ce sceencast :
Dans VS Code, il existe un raccourci qui vous permet de trouver toutes les commandes possibles et imaginables en tapant leur nom. Ça veut dire que vous n'avez pas besoin d'apprendre par cœur dans quel menu se trouve une commande, ni son raccourci clavier (même si vous finirez par en apprendre certains !). Tout ça grâce à la palette de commandes, que vous ouvrez avec Ctrl+Maj+P sur PC, ou Cmd+Maj+P sur Mac :
Par exemple, imaginons que vous ayez plusieurs éditeurs ouverts, et que vous vouliez tous les fermer pour travailler sur une autre fonctionnalité de votre projet. Ouvrez la palette de commandes et tapez simplement le mot "Close" :
Vous y voyez la commande "Close All Editors", ou "Fermer tous les éditeurs". Vous pouvez y accéder avec les flèches de votre clavier, et appuyer sur "Entrée" pour exécuter la commande.
Un autre exemple de commande rapide : la création d'un nouveau fichier. Ouvrez la palette de commandes et tapez "New File" :
Cela accomplit la même chose que lorsque vous cliquez sur le bouton dans l'explorateur de fichiers, mais sans utiliser votre souris. Tout geste qui requiert la souris nous ralentit : essayez de garder le plus possible les mains sur le clavier !
En résumé
Dans ce chapitre, vous avez exploré les bases de Visual Studio Code :
vous avez configuré votre installation en choisissant un thème ;
vous avez découvert l'éditeur de code ;
vous avez manipulé l'explorateur de fichiers ;
vous avez utilisé la palette de commandes pour accéder aux différentes commandes de VS Code ;
Découvrez dans le chapitre suivant d'autres fonctionnalités qui vous seront utiles sur VS Code.
