Article original : VS Code Live Server – How to Auto-Refresh Your Browser with this Simple Extension
Par Cem Eygi
Visual Studio Code est l'un des éditeurs de code les plus populaires. Il est gratuit, possède une interface propre et compte d'innombrables extensions qui rendent la programmation plus facile et plus amusante.
Je suis développeur web frontend et j'utilise VS Code pour travailler et sur ma chaîne YouTube. Beaucoup de gens m'ont demandé comment le navigateur se rafraîchit automatiquement pendant que je code, sans cliquer sur le bouton de rechargement.
Eh bien, cela est possible si vous configurez une extension utile dans VS Code appelée live-server. Dans cet article, je vais expliquer en détail comment cela fonctionne et comment installer et configurer un serveur live dans votre éditeur VS Code.
Pourquoi devrais-je utiliser l'extension live-server ?
Normalement, lorsque vous apportez une modification à votre code ou écrivez quelque chose de nouveau, vous devez rafraîchir manuellement la page pour voir les changements.
En d'autres termes, si vous apportez 100 modifications à votre code chaque jour, vous devez rafraîchir le navigateur 100 fois.
L'extension live-server, cependant, automatise cela pour vous. Après l'avoir installée, un localhost automatisé pourra s'exécuter dans votre navigateur, que vous pourrez démarrer avec un seul bouton.
Une fois que vous aurez apporté des modifications à votre code ou écrit quelque chose de nouveau, après l'avoir enregistré, le navigateur se rafraîchira automatiquement. Vous pourrez alors voir les changements rapidement et automatiquement.
Si vous préférez, vous pouvez également regarder la vidéo tutorielle ci-dessous :
D'abord, installez VS Code
Vous pouvez sauter cette partie si vous avez déjà installé VS Code sur votre ordinateur. Sinon, vous pouvez le télécharger depuis son site officiel.
Site officiel de Visual Studio Code
Après avoir téléchargé et installé VS Code, vous verrez l'écran de bienvenue :
Sur le côté gauche, vous devriez voir quelques icônes. L'une d'entre elles (sous l'icône sans bugs) est le bouton des extensions :
Une fois que vous cliquez dessus, une barre de recherche apparaîtra. Tapez simplement « live server ».
Vous verrez plusieurs options, vous pouvez donc choisir celle qui fonctionne pour votre système. J'utilise Live Server par Ritwick Dey, alors continuons avec celui-ci dans cet exemple :
Cliquez sur le bouton d'installation et l'extension sera installée.
Créez une nouvelle page HTML
Pour démarrer le serveur live, assurez-vous d'avoir au moins une page HTML créée. Pour cela, cliquez sur le bouton de fichier tout en haut, puis choisissez le bouton de nouveau fichier et tapez index.html :
Icône de nouveau fichier avec signe plus (2ème à partir de la gauche)
Problèmes de configuration
Maintenant, après avoir créé une page HTML et installé l'extension, vous devriez voir une icône « Go Live » juste en dessous dans le champ bleu :
Si vous ne la voyez pas, redémarrez simplement VS Code. Ensuite, tout devrait être en ordre.
Cliquez sur le bouton « Go Live » et le localhost (attribué à un numéro de port) devrait démarrer sur votre navigateur par défaut. Vous pouvez démarrer et arrêter votre serveur live à tout moment en cliquant sur le même bouton.
Si vous avez atteint cette étape, félicitations ! :) Maintenant, vous pouvez travailler avec le live-server. Sinon, si vous rencontrez toujours des problèmes, consultez cet article pour plus d'informations.
Conclusion
J'espère que cet article vous aide à installer et configurer l'extension live server dans VS Code. Si vous souhaitez en apprendre davantage sur le développement web, n'hésitez pas à visiter ma chaîne YouTube.
Merci d'avoir lu !