Installer et découvrir Visual Studio Code

La microressource précédente a présenté l'atelier ; on y entre maintenant. À la fin de celle-ci, VS Code sera installé sur votre poste et vous saurez nommer chaque zone de son interface — condition pour suivre le reste de la formation sans vous perdre.

1. Télécharger et installer VS Code

Visual Studio Code est gratuit, publié par Microsoft, et fonctionne sur Windows, macOS et Linux. L'installation ne demande aucun compte.

1. Aller sur le site officiel

   Rendez-vous sur code.visualstudio.com. Méfiez-vous des liens sponsorisés d'un moteur de recherche : téléchargez toujours depuis le site officiel.

2. Télécharger la bonne version

   Le site détecte votre système et propose le bon fichier. Sur Windows, prenez l'installeur « User Installer » 64 bits : il n'exige pas de droits administrateur.

3. Lancer l'installation

   Acceptez la licence et gardez le dossier proposé par défaut. L'installation se déroule ensuite toute seule.

4. Premier lancement

   VS Code s'ouvre sur un écran d'accueil. Rien n'est encore configuré : c'est normal, et c'est l'objet de la section suivante.

2. Le premier lancement : trois réglages utiles

VS Code est utilisable tel quel, mais trois réglages faits maintenant vous épargneront des frictions pendant toute la formation.

• L'interface en français

  VS Code s'installe en anglais. Il vous propose généralement le pack de langue française dès le premier lancement ; sinon, palette de commandes (Ctrl+Maj+P), tapez display language. Rien n'oblige à basculer en français — mais choisissez une fois pour toutes, car les menus ne portent pas les mêmes noms.

• L'enregistrement automatique

  Menu Fichier → Enregistrement automatique. Sans lui, vous passerez la formation à vous demander pourquoi votre page ne change pas dans le navigateur — alors que le fichier n'était simplement pas enregistré. C'est la source d'erreur numéro un des débutants.

• La taille du texte

  Ctrl++ et Ctrl+-. Vous allez lire du code plusieurs heures : réglez cela sans état d'âme.

3. Se repérer : les cinq zones de l'interface

L'interface paraît chargée au premier abord, mais elle se résume à cinq zones. Les nommer correctement suffit à suivre n'importe quelle consigne du reste de la formation.

• 1
  La barre d'activité tout à gauche, la colonne d'icônes

  Elle change ce qu'affiche la barre latérale. Les deux icônes qui nous serviront : l'explorateur (deux feuilles, tout en haut) et les extensions (les quatre carrés, plus bas).

• 2
  La barre latérale le panneau juste à droite des icônes

  Le plus souvent, elle affiche l'explorateur de fichiers : l'arborescence de votre projet. C'est là que vous créerez vos dossiers css, pages, assets et que vous cliquerez pour ouvrir un fichier.

• 3
  L'éditeur la grande zone centrale

  Là où vous écrivez. Chaque fichier ouvert occupe un onglet. On peut afficher deux fichiers côte à côte — pratique pour garder le HTML à gauche et le CSS à droite.

• 4
  Le panneau en bas, souvent replié

  Il regroupe les messages techniques : la liste des problèmes détectés dans votre code, et les sorties des outils que vous lancez. Replié la plupart du temps, il s'ouvre dès que quelque chose doit vous être signalé.

• 5
  La barre d'état la bande colorée tout en bas

  Elle affiche le langage du fichier courant, la position du curseur et les erreurs. Discrète, mais c'est elle qui vous dira que VS Code a bien reconnu votre fichier comme du HTML.

4. La règle d'or : on ouvre un dossier, pas un fichier

C'est le point le plus important de cette microressource, et le plus souvent manqué.

On peut ouvrir un fichier isolé dans VS Code, et cela fonctionne. Mais l'outil est conçu pour travailler sur un dossier de projet : vous lui indiquez le dossier de votre site, et il considère tout ce qu'il contient comme votre espace de travail. La différence est loin d'être cosmétique.

Concrètement : Fichier → Ouvrir le dossier…, puis désignez le dossier de votre site. Ou, si vous avez coché l'option à l'installation, un clic droit sur le dossier dans l'explorateur Windows → Ouvrir avec Code.