Share
Lorsque vous travaillez sur un site statique, votre vie peut être rendue beaucoup plus facile si vous disposez d'un moyen simple d'activer un aperçu local de votre conception..
Ce qui est encore mieux, c’est que si cet aperçu local dispose d’une fonction de rechargement automatique afin que vos modifications prennent automatiquement effet à mesure que vous travaillez. Et encore mieux, si cela vous permet de visualiser votre site via un http: // protocole, étant donné que parfois les choses ne fonctionnent pas tout à fait comme prévu quand on les regarde sur un fichier:// protocole.
Il existe plusieurs façons de configurer les aperçus locaux, mais l’une des plus simples consiste à utiliser directement l’éditeur de code Atom, en tirant parti de son excellent écosystème de packages d’extension. Tout ce que vous avez à faire est d'installer votre paquet préféré, de l'activer et vous êtes prêt à commencer..
Dans cette astuce, je vais vous montrer trois des meilleurs packages Atom pour configurer rapidement et facilement des aperçus locaux en cours de rechargement. Commençons!
Remarque: Si vous n'avez pas encore Atom, vous pouvez le récupérer sur https://atom.io/
le Atom Live Server Ce package est mon "point de départ" personnel lorsque j’ai besoin d’un moyen rapide et facile de prévisualiser du code statique. Il crée un aperçu local avec un http: // protocole et actualise automatiquement lorsque les modifications apportées à l'un des fichiers utilisés dans votre projet sont enregistrées.
Pour l'installer allez à Packages> Affichage des paramètres> Installer des packages / thèmes. Ensuite, recherchez «atom-live-server» et cliquez sur le bouton Installer du paquet. bouton quand vous le trouvez.
Pour utiliser le package, un dossier de projet doit être ajouté à la Projet barre latérale. D'ici aller à Paquets> atom-live-server> Démarrer le serveur et un aperçu de votre site s'ouvrira dans votre navigateur par défaut. Si vous devez arrêter le serveur à nouveau, allez à Paquets> atom-live-server> Arrêter le serveur.
Si vous avez plusieurs projets ouverts dans la barre latérale, celui en haut de la liste sera prévisualisé. Si vous devez passer d'un aperçu d'un projet à un autre, arrêtez d'abord le serveur, puis faites glisser le projet que vous souhaitez prévisualiser en haut de la barre latérale, puis redémarrez le serveur..
Plutôt que d’ouvrir un aperçu dans votre navigateur par défaut, le atom-html-preview Ce package vous donne un aperçu intégré de n’importe quelle page HTML dans l’éditeur Atom. Pour installer ce paquet, suivez les mêmes instructions que pour le paquet ci-dessus, mais recherchez plutôt «atom-html-preview»..
Une fois installé, ouvrez le fichier HTML que vous voulez prévisualiser, puis allez à Packages> Aperçu HTML> Activer l'aperçu. Vous verrez ensuite votre espace de travail divisé, avec votre code affiché dans le volet gauche et votre aperçu en direct dans le volet droit..
Lors de l'utilisation atom-html-preview, les fichiers n'ont pas besoin d'être enregistrés pour que l'aperçu puisse être mis à jour. Au fur et à mesure que vous tapez, votre aperçu sera mis à jour de manière continue.
le navigateur atomique Ce package vous permet de prévisualiser facilement votre code HTML dans une fenêtre de navigateur intégrée à Atom, de la même manière que atom-html-preview. Malheureusement, les aperçus se font via un fichier:// protocole, mais il inclut le rechargement en direct.
Le véritable avantage remarquable de ce paquet, cependant, est que vous pouvez utiliser la fenêtre de prévisualisation intégrée comme navigateur classique. Il est donc très pratique de consulter la documentation en cours de travail ou de suivre un didacticiel de codage, par exemple..
Installez le package en suivant les étapes décrites précédemment et en recherchant navigateur atomique.
Après l’installation, ouvrez le navigateur pour une navigation régulière en allant à Forfaits> Navigateur Atom> Basculer.
Pour prévisualiser un document HTML, cliquez dessus avec le bouton droit de la souris. Projet sidebar et choisissez Atome Aperçu. Pour activer le rechargement en direct pendant le code, cliquez sur la petite icône représentant un éclair en regard du champ URL du navigateur..
Cela couvre trois forfaits de prévisualisation en direct très pratiques pour Atom. Avec ceux-ci dans votre trousse à outils, garder les onglets sur vos conceptions au fur et à mesure devrait être beaucoup plus simple et fluide!
Avez-vous d'autres suggestions sur les moyens simples et rapides de gérer les aperçus locaux? Si oui, n'hésitez pas et partagez-les avec les autres lecteurs de Tuts + dans les commentaires ci-dessous.
Accentsconagua