VS Code · Leçon 1

Installer VS Code

Jusqu'ici, tu as codé dans le navigateur. Pour créer de vrais sites sur ton ordinateur, il te faut un éditeur de code. Le plus utilisé au monde est gratuit : Visual Studio Code.

Pourquoi un éditeur de code ?

Un fichier HTML n'est que du texte : le Bloc-notes suffirait. Mais un éditeur de code t'aide à chaque ligne :

🎨 Coloration

Balises, attributs et textes ont chacun leur couleur : le code se lit d'un coup d'œil.

⚡ Autocomplétion

Il propose la suite de ce que tu tapes et ferme les balises pour toi.

🐞 Erreurs signalées

Les erreurs sont soulignées en rouge avant même d'ouvrir la page.

🧩 Extensions

Des milliers de modules gratuits pour ajouter des fonctionnalités.

Attention au nom Visual Studio Code (« VS Code ») n'est pas Visual Studio, un autre logiciel de Microsoft, beaucoup plus lourd. Vérifie bien le logo bleu et l'adresse du site : code.visualstudio.com.

Télécharger et installer

Rends-toi sur code.visualstudio.com : le site détecte ton système et propose le bon bouton de téléchargement.

🪟 Windows

  1. Clique sur Download for Windows.
  2. Lance le fichier téléchargé et accepte la licence.
  3. À l'écran « Tâches supplémentaires », coche les deux options « Ouvrir avec Code » (menu clic droit) et laisse « Ajouter à PATH » coché.
  4. Clique sur Installer, puis Terminer.

🍎 macOS

  1. Clique sur Download for macOS (un fichier .zip).
  2. Ouvre le zip : tu obtiens Visual Studio Code.app.
  3. Glisse-le dans le dossier Applications.
  4. Au premier lancement, confirme l'ouverture si macOS le demande.

🐧 Linux

  1. Ubuntu / Debian : télécharge le .deb puis sudo apt install ./code_*.deb
  2. Fedora : le fichier .rpm.
  3. Ou partout : sudo snap install code --classic
Pourquoi « Ouvrir avec Code » ? Tu pourras faire un clic droit sur n'importe quel dossier puis Ouvrir avec Code : c'est la façon la plus rapide de commencer à travailler.

Passer VS Code en français

VS Code s'ouvre en anglais. Pour le mettre en français :

  1. Clique sur l'icône Extensions dans la barre de gauche (quatre petits carrés), ou Ctrl+Maj+X.
  2. Cherche French Language Pack (éditeur : Microsoft) et clique sur Install.
  3. Clique sur Change Language and Restart dans la notification.

Dans la suite du cours, les menus sont donnés en français : Fichier, Affichage, Terminal…

Sur Mac Ctrl devient presque toujours ⌘ Cmd, et Alt devient ⌥ Option.

Visite guidée de l'interface

Survole la légende pour repérer chaque zone :

  1. Barre d'activité : change le panneau de gauche (fichiers, recherche, extensions…).
  2. Explorateur : les fichiers et dossiers de ton projet.
  3. Onglets : les fichiers ouverts. Un ● = modifications pas encore enregistrées.
  4. Éditeur : là où tu écris le code, avec les numéros de ligne.
  5. Panneau : terminal et liste des problèmes (Affichage › Terminal).
  6. Barre d'état : position du curseur, langage du fichier, erreurs…

Un petit rond ● apparaît à côté du nom de ton fichier dans l'onglet. Qu'est-ce que ça veut dire ?

  1. Le fichier contient une erreur
  2. Le fichier a des modifications non enregistrées
  3. Le fichier est ouvert dans le navigateur

Enregistre avec Ctrl+S : le rond redevient une croix. Tant que tu n'as pas enregistré, le navigateur affiche l'ancienne version !

Choisir son thème

Clair ou sombre, c'est une question de goût. Fichier › Préférences › Thème › Thème de couleur (ou Ctrl+K puis Ctrl+T), puis parcours la liste avec les flèches : l'aperçu est immédiat.

Tu peux aussi agrandir le texte : Ctrl++ et Ctrl+-.

À retenir