Si vous travaillez sur de l’intégration avec SASS, vous aurez sans doute le besoin de visualiser en quasi-simultané votre travail sur un navigateur en parallèle. Si le plugin Live Server de Visual Studio Code fonctionne très bien pour des projets en HTML simples, il y a une petite habitude à avoir pour les projets utilisant une adresse localhost.
Je travaille pour l’heure avec MAMP pro avec une adresse pour chaque projet : localhost:8888/monsite
Comment installer et faire fonctionner live server ?
1) installer le plugin Live Server sur Visual Studio Code.
2) Ouvrez votre projet (pour un Wordpress seulement le dossier de votre thème, pour un SPIP seulement le dossier squelette)
3) Cliquez sur le bouton en bas à droite "Go live"
Vous allez alors avoir accès à une page qui va s’ouvrir automatiquement avec une adresse de serveur propre de type : http://127.0.0.1:8889
J’ai installé sur mon navigateur Firefox Développer Edition l’extension Live Server browser
1) Remplissez les champs avec l’URL de votre site sous MAMP et l’URL du serveur de Live Server.
2) Actionnez le bouton "Live reload"
A partir de là tous vos fichiers HTML sont modifiés à chaque enregistrement sur votre navigateur.
Pour les CSS, il faut se rendre sur la page des extensions puis sur celle de Live Server. Cliquez sur la petite roue "Extension Settings".
Sur cette page descendez jusqu’à la ligne
Cocher la case live Server settings : fullReload. Par défaut elle se trouve sur False.
Bon codage :)
Plus d’informations :
Visual Studio Code
Live server