Introduction à Visual Studio Code¶
Visual Studio Code est un outil (éditeur) de programmation qui est gratuit, open source et léger. Il peut être installé sur les systèmes d'exploitation Windows, Linux et Mac et peut être personnalisé de multiples façons.
C'est un outil très polyvalent!
Dans le cadre du cours d'Interfaces web, nous utiliserons VS Code pour créer nos documents HTML, CSS et Javascript.
L'outil Visual Studio Code offre des fonctionnalités très utiles qui nous permettent de sauver du temps lorsqu'on programme.
1- Suggestions et automatismes¶
IntelliSense est une fonctionnalité qui nous aide à compléter notre code en proposant des suggestions, c'est-à-dire les éléments du langage utilisé qui correspondent à ce que nous écrivons. En HTML, ceci propose les balises existantes correspondantes à ce que nous tapons :
Si, pour une raison quelconque, les suggestions n'apparaissent pas, il est possible de les afficher avec le raccourci Ctrl + espace.
VS Code est aussi configuré pour nous aider à éviter des erreurs d'écriture de balises en fermant automatiquement nos balises de deux façons.
1- En tapant l'ouverture d'une balise, la fermeture correspondante sera automatiquement ajoutée.
2- Si une balise fermante est manquante, en tapant "</", VS Code ajoutera automatiquement la balise fermante appropriée.
2- Les raccourcis-clavier¶
Il existe plusieurs dizaines de raccourcis-clavier dans VS Code. Un raccourci-clavier nous permet de sauver du temps en utilisant une combinaison de touches au clavier pour effectuer des tâches, plutôt que d'utiliser la souris et les menus.
Selon le système d'exploitation que vous utilisez, les raccourcis-clavier s'adaptent :
Exercice
Dans certains cas, on doit déplacer une ligne de code pour la monter ou la descendre.
Dans la page créée plus tôt, placer le curseur sur la ligne de texte La page la plus simple possible.
Utiliser le raccourci-clavier Alt + ↑ ou le raccourci Alt + ↓ pour déplacer la ligne dans la page.
Replacer la ligne de texte entre les balises <body>.
Parfois on a besoin d'avoir deux fenêtres VS Code ouvertes pour ouvrir deux projets en même temps.
Utiliser le raccourci Ctrl + Shift + N pour ouvrir une nouvelle fenêtre.
Il est possible d'afficher les raccourcis clavier dans VS Code :
Dans la nouvelle fenêtre, utiliser le raccourci Ctrl + K suivi tout de suite du raccourci Ctrl + S (pour keyboard shortcuts)
3- Erreurs et avertissements¶
Puisque VS Code est un éditeur de code, il va de soi qu'il y ait des outils pour nous aider à corriger nos erreurs facilement et rapidement.
Il est possible d'afficher un dans la barre d'état une fenêtre indiquant les erreurs et avertissements détectés par VS Code.
Pour ce faire, on utilise le raccourci Ctrl + Shift + M.
Ce panneau sera particulièrement utile pour le CSS et le JavaScript.
4- Aide à la lecture¶
VS Code utilise des codes de couleurs et des éléments visuels pour aider à la lecture du code.
Voici quelques exemples:
Une balise HTML bien écrite et reconnue sera affichée en bleu.
Une balise non reconnue sera affichée en rouge.
Un attribut de balise sera affiché en bleu ciel.
Une valeur d'attribut sera affiché en orange.
Les commentaires dans le code seront affichés en vert.
Une ligne verticale est affichée pour relier l'ouverture et la fermeture d'une balise HTML.
Il est donc très important de suivre les règles d'écriture du HTML que nous verrons au prochain cours, afin de conserver cet élément visuel qui aide énormément à lire le code et à détecter les erreurs et les balises manquantes.
5- Rechercher et remplacer¶
Souvent, on a à rechercher dans notre projet pour un terme afin de le retrouver rapidement ou pour le remplacer rapidement. Lorsque le projet contient plusieurs documents, l'outil de recherche intérgé à VS Code devient particulièrement utile.
Pour rechercher à l'intérieur du projet dans sa totalité, on utilise le bouton de recherche situé à gauche de l'écran.
On aura qu'à cliquer sur l'un des résultats de recherche pour se rendre automatiquement à l'occurence choisie dans le projet.
On peut aussi utiliser le champs de remplacement pour remplacer une seule occurence ou toutes les occurences d'un seul click.
6- Quelques extensions utiles¶
VS Code est un outil modulaire dans lequel on peut ajouter des fonctionnalités et configurer selon nos besoins. On peut rapidement télécharger et installer des extensions à cet effet.
Pour voir les extensions installées ou en ajouter des nouvelles, on utilise le bouton Extensions situé à gauche de l'écran.
La section Enabled indique les extensions installées.
On peut lancer une recherche pour en ajouter.
Dans le laboratoire, l'extension Live Server est installée. Cette extension nous permet de lancer notre page web dans une fenêtre de navigateur qui se mettra automatiquement à jour au fil des modifications que nous sauvegarderons dans notre page.