Préparer son environnement : VS Code, extensions et Live Server

1. Objectifs

   • Installer et configurer Visual Studio Code pour écrire du JavaScript.
   • Choisir les extensions utiles (Live Server, ESLint, Prettier, Error Lens).
   • Lancer une page avec un serveur local qui se recharge automatiquement.
   • Organiser un projet et le versionner avec Git et GitHub dès le départ.

2. Les outils du développeur JavaScript

   • Pour écrire du JavaScript côté navigateur, il suffit de trois outils gratuits :
     1. un éditeur de code: nous utilisons Visual Studio Code (VS Code), l'éditeur le plus utilisé par les développeurs web ;
     2. un navigateur récent avec ses outils de développement (DevTools) : Chrome, Edge ou Firefox ;
     3. un serveur local pour ouvrir la page comme sur un vrai site : l'extension Live Server.
   • On y ajoute Git pour garder l'historique du travail et GitHub pour le sauvegarder en ligne et le partager avec le formateur.

   

3. Installer Visual Studio Code

   • Téléchargez VS Code sur code.visualstudio.com (Windows, macOS ou Linux) et installez-le.
   • Sous Windows, cochez pendant l'installation les options « Ajouter l'action Ouvrir avec Code » au menu contextuel des fichiers et des dossiers : un clic droit sur un dossier permettra de l'ouvrir directement.
   • Pour passer l'interface en français : Ctrl + Maj + P → tapez Configure Display Language → choisissez Français (le pack de langue s'installe) → redémarrez.
   • Toujours ouvrir un dossier (Fichier → Ouvrir le dossier) plutôt qu'un fichier isolé : VS Code et ses extensions travaillent mieux avec un projet complet.

4. Les extensions indispensables

   • Les extensions s'installent depuis l'onglet Extensions (icône des quatre carrés ou Ctrl + Maj + X).

   Extension	Rôle
   Live Server (Ritwick Dey)	Lance un petit serveur local et recharge la page à chaque enregistrement.
   ESLint	Analyse le code et signale les erreurs probables et les mauvaises pratiques (variable inutilisée, faute de frappe…).
   Prettier – Code formatter	Met en forme le code automatiquement (indentation, guillemets, points-virgules).
   Error Lens	Affiche les erreurs directement sur la ligne concernée.
   Live Preview (Microsoft) — optionnel	Alternative à Live Server avec un aperçu intégré dans VS Code.

   Emmet est déjà intégré : dans un fichier index.html vide, tapez ! puis Tab: VS Code génère la structure HTML complète.

5. Réglages conseillés

   • Ouvrez les paramètres (Ctrl + ,) et activez :
     • Format On Save (formater à l'enregistrement) avec Prettier comme formateur par défaut ;
     • Auto Save sur onFocusChange si vous oubliez souvent d'enregistrer ;
     • Tab Size: 2 espaces (convention la plus répandue en JavaScript).
   • On peut aussi écrire ces réglages dans le fichier settings.json (Ctrl + Maj + P → Open User Settings (JSON)) :

   {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.tabSize": 2,
     "files.autoSave": "onFocusChange"
   }

6. Raccourcis utiles dans VS Code

Raccourci (Windows / Linux)	Action
Ctrl + Maj + P	Palette de commandes (toutes les commandes de VS Code)
Ctrl + P	Ouvrir rapidement un fichier du projet
Ctrl + ù (clavier AZERTY)	Ouvrir / fermer le terminal intégré
Ctrl + / (ou Ctrl + : en AZERTY)	Commenter / décommenter la ligne
Alt + ↑ / ↓	Déplacer la ligne vers le haut ou le bas
Maj + Alt + ↓	Dupliquer la ligne
Ctrl + D	Sélectionner l'occurrence suivante du mot (édition multiple)
Maj + Alt + F	Formater le document

Sur macOS, remplacez Ctrl par Cmd et Alt par Option.

7. Live Server : ouvrir la page avec un serveur local

   • Ouvrir un fichier HTML par double-clic affiche une adresse en file:///C:/.... Certaines fonctionnalités de JavaScript ne fonctionnent pas dans ce mode : les modules (type="module"), fetch vers un fichier JSON local…
   • Avec Live Server, la page est servie à une adresse du type http://127.0.0.1:5500/index.html, comme sur un vrai site.
   • Pour le lancer : clic droit sur index.html → Open with Live Server, ou bouton Go Live en bas à droite de VS Code.
   • À chaque Ctrl + S, la page se recharge automatiquement dans le navigateur.

8. Organiser le projet

   • Une organisation simple et constante facilite le travail et la correction :

   mon-projet-js/
   ├── index.html
   ├── README.md
   ├── css/
   │   └── style.css
   ├── js/
   │   └── app.js
   └── images/

   • Noms de fichiers en minuscules, sans espaces ni accents, avec des tirets : gestion-notes.js.

9. Versionner avec Git et GitHub dès le départ

   • Installez Git (git-scm.com) et créez un compte sur github.com.
   • Première configuration (une seule fois, dans le terminal) :

   git config --global user.name "Prénom Nom"
   git config --global user.email "votre.email@exemple.com"

   • Dans le dossier du projet, ouvrez le terminal intégré et tapez :

   git init
   git add .
   git commit -m "Structure de départ du projet"
   git branch -M main
   git remote add origin https://github.com/votre-compte/mon-projet-js.git
   git push -u origin main

   • VS Code intègre Git : l'onglet Contrôle de code source (Ctrl + Maj + G) permet de faire les commits et les push sans taper de commandes.
   • Bonne habitude : un commit à chaque étape terminée, avec un message clair (« Ajout du formulaire », « Correction du calcul de la moyenne »).

10. Exemple : tester son environnement

    • Créez index.html:

    <!DOCTYPE html>
    <html lang="fr">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Mon environnement JavaScript</title>
      <script src="js/app.js" defer></script>
    </head>
    <body>
      <h1 id="titre">Environnement prêt ?</h1>
    </body>
    </html>

    • Puis js/app.js:

    const titre = document.querySelector("#titre");
    titre.textContent = "Mon environnement JavaScript fonctionne !";
    console.log("Script chargé à", new Date().toLocaleTimeString("fr-FR"));

    • Lancez la page avec Live Server, ouvrez la console (F12) : le titre a changé et un message s'affiche. Modifiez le texte dans app.js, enregistrez : la page se met à jour toute seule.

11. Activités

Activité 1 : installation

• Installez VS Code en français, puis les extensions Live Server, ESLint, Prettier et Error Lens.
• Activez Format On Save et réglez la tabulation à 2 espaces. Faites une capture d'écran de vos réglages.

Activité 2 : premier projet versionné

• Créez le dossier js-environnement avec la structure présentée plus haut et l'exemple ci-dessus.
• Créez un dépôt GitHub du même nom, faites votre premier commit et votre premier push.
• Ajoutez dans README.md votre nom, votre groupe et la date.

Activité 3 : file:// ou http:// ?

• Ouvrez votre page par double-clic, puis avec Live Server. Comparez l'adresse affichée dans la barre du navigateur.
• Modifiez app.js dans chaque cas : dans quel cas la page se met-elle à jour automatiquement ?

Activité 4 : les raccourcis

• Dans app.js, utilisez Alt + ↓ pour déplacer une ligne, Maj + Alt + ↓ pour la dupliquer, puis Ctrl + D pour renommer d'un coup trois occurrences d'une variable.