Comment prévisualiser des fichiers HTML de manière transparente dans Visual Studio Code

Lorsque vous travaillez sur du HTML avec VS Code, voir votre page web changer instantanément sans avoir à actualiser constamment est une véritable révolution. Voici donc comment configurer un aperçu en direct avec l’ extension Live Server. C’est très utile, surtout pour modifier des éléments à la volée. Attention : parfois, cela ne fonctionne pas parfaitement du premier coup, mais redémarrer ou modifier quelques paramètres peut aider.

Étape 1 : ouvrez votre fichier HTML

Lancez VS Code et ouvrez ce index.htmlfichier HTML, ou tout autre fichier HTML que vous utilisez. Il peut s’agir de HTML brut, ou de fichiers CSS ou JS. L’important est qu’il soit prêt à être utilisé dans l’éditeur, car tout dépend de ce que vous ferez ensuite.

Étape 2 : installer l’extension Live Server

C’est ici que la magie commence. Pour obtenir l’aperçu en direct, installez l’extension :

Cliquez sur l’ icône Extensions dans la barre latérale gauche ou appuyez sur Ctrl+ Shift+ Xpour ouvrir la place de marché.
Tapez Live Server dans la zone de recherche.
Trouvez celui appelé Live Server par Ritwick Dey. C’est sûrement le plus populaire, avec de nombreuses installations et une icône reconnaissable.
Cliquez sur « Installer ». L’extension est ajoutée. Sur certaines configurations, l’installation peut échouer la première fois et vous devrez peut-être redémarrer VS Code ou réactiver/désactiver l’extension. Rien de grave : installez-la simplement.

Étape 3 : Lancer le serveur en direct

Une fois installé, le démarrage de l’aperçu est simple :

Assurez-vous que votre fichier HTML est actif dans VS Code.
Ouvrez la palette de commandes en appuyant sur Ctrl+ Shift+ P.
Saisissez « Live Server » : ouvrez-le et sélectionnez-le. Si vous ne le voyez pas immédiatement, assurez-vous d’avoir enregistré le fichier récemment ou redémarrez VS Code.
Cela ouvrira votre page web dans votre navigateur par défaut, la diffusant depuis une adresse locale, généralement de type http://127.0.0.1:5500/index.html. Une petite icône de serveur en direct apparaîtra en bas à droite, confirmant son exécution.

Étape 4 : Modifier et regarder les modifications en direct

C’est la partie la plus amusante. Lorsque vous modifiez votre code HTML (ou CSS/JS lié), appuyez simplement sur Ctrl+ Spour enregistrer. Le navigateur devrait s’actualiser automatiquement et afficher vos dernières modifications. L’actualisation peut parfois être un peu instable si vous avez un gros projet ou beaucoup d’erreurs, mais en général, elle fonctionne parfaitement. Si l’actualisation ne se fait pas, essayez d’actualiser manuellement ou redémarrez Live Server depuis la palette de commandes ; car, bien sûr, Windows rend parfois la tâche plus complexe qu’elle ne devrait l’être.

Conseils supplémentaires et problèmes courants

Pour que tout se passe bien :

Vérifiez les paramètres de votre pare-feu : si un blocage réseau étrange empêche le serveur de communiquer, la page ne sera pas mise à jour.
Si la page ne se met pas à jour, arrêtez le serveur, puis redémarrez-le. Parfois, la touche F5 suffit, ou faites un clic droit sur le bouton « Mettre en ligne » s’il est disponible.
Vérifiez votre code pour détecter les balises cassées ou les erreurs de syntaxe. Cela peut perturber le rendu et donner l’impression que Live Server ne fonctionne pas.
Si vous travaillez sur un projet complexe, pensez à exporter vos paramètres ou à ajuster le port dans settings.json. Vous le trouverez sous Fichier > Préférences > Paramètres et recherchez liveServer.settings.port.

Résumé

Installer l’extension Live Server
Démarrez-le via la palette de commandes — Live Server : Ouvrir avec Live Server
Modifiez et enregistrez, regardez les mises à jour en direct se produire automatiquement

J’espère que cela permettra à quelqu’un de gagner quelques heures. Rien de tel que de pouvoir visualiser son travail au fur et à mesure, sans avoir à répéter Ctrl+R. Gardez simplement à l’esprit que c’est parfois un peu capricieux, mais un redémarrage rapide résout la plupart des problèmes. Bonne chance et bon codage !