1.2 Mise en place du développement
Bienvenue dans ce nouveau chapitre où nous allons mettre en place l'environnement de développement. Pour écrire du code JavaScript, il faut un éditeur de code : il en existe plusieurs comme Sublime Text, VS Code ou Atom. Dans cette formation, nous utiliserons VS Code, un éditeur léger, puissant et multiplateforme. Pour le télécharger, rendez-vous sur code.visualstudio.com.
Nous allons aussi installer Node.js depuis nodejs.org. Node n'est pas indispensable pour exécuter du JavaScript (le navigateur suffit), mais il est très utile pour installer des bibliothèques tierces. Mettez la vidéo en pause si les installations ne sont pas encore faites, puis retrouvez-moi pour la démonstration.
Créer un projet et utiliser Live Server
Créons un nouveau dossier que l'on nommera js_basic, puis ouvrons-le dans VS Code via Fichier > Ouvrir le dossier. Dans ce dossier, créons un fichier index.html. En tapant ! suivi de Tab (raccourci Emmet), VS Code génère automatiquement la structure HTML complète avec l'en-tête et le corps de la page.
Nous allons ensuite installer l'extension Live Server. Live Server est un serveur web très léger qui sert notre application web et la recharge automatiquement. Une fois l'extension installée, retournez dans l'explorateur, faites un clic droit sur index.html et choisissez Open with Live Server. Le navigateur par défaut s'ouvre. Si ce n'est pas le bon navigateur, allez dans Fichier > Préférences, tapez « Live Server » et modifiez l'option correspondante. L'adresse affichée se compose du numéro d'hôte et du port pointant vers l'application.
La page est vide pour l'instant, ce qui est normal. Pour tester le rechargement automatique, ajoutons un <h1>Hello World</h1>, puis modifions-le en « Salut les gens ». La modification s'affiche en temps réel sans même qu'on ait à enregistrer. Voilà pour cette mise en place, dans la prochaine vidéo nous écrirons notre tout premier code JavaScript.
En résumé
Cette leçon guide les apprenants à travers les étapes essentielles de configuration d'un environnement de développement JavaScript. Elle couvre l'installation de VS Code comme éditeur principal, le téléchargement de Node.js, et la création d'une structure de projet de base avec un fichier HTML. L'extension Live Server est présentée pour permettre un rechargement automatique lors des modifications du code, facilitant ainsi le développement en temps réel sans actions manuelles.
Points clés
- VS Code (code.visualstudio.com) est recommandé comme éditeur de code, léger, puissant et multiplateforme pour développer en JavaScript
- Node.js (nodejs.org) doit être installé pour gérer les dépendances et bibliothèques tierces, bien que JavaScript puisse s'exécuter dans le navigateur
- Créer une structure de projet simple : dossier dédié contenant un fichier index.html généré via le raccourci VS Code (! + Tab) pour produire l'en-tête HTML5 standard
- L'extension Live Server offre un serveur léger pour servir l'application web et permet la modification du code en temps réel sans enregistrement manuel
- La synchronisation automatique entre l'éditeur et le navigateur accélère le cycle de développement et améliore la productivité de l'apprenant
Questions fréquentes
Quels éditeurs de code sont disponibles pour développer en JavaScript ?
Il existe plusieurs options (Sublime Text, Atom, VS Code et autres), mais cette formation utilise VS Code pour ses qualités : légèreté, accessibilité, puissance et compatibilité multiplateforme. Il peut être téléchargé gratuitement sur code.visualstudio.com.
L'installation de Node.js est-elle obligatoire pour exécuter du code JavaScript ?
Non, le code JavaScript peut s'exécuter directement dans un navigateur web. Cependant, Node.js est essentiel pour installer et gérer les bibliothèques tierces qui étendent les fonctionnalités du projet.
Quel est l'intérêt d'utiliser l'extension Live Server en développement ?
Live Server crée un serveur web léger et offre un rechargement automatique de la page à chaque modification du code. Cela permet de voir les changements en temps réel dans le navigateur sans enregistrement manuel ni rechargement manuel de la page.