Une brève discussion sur la méthode d'implémentation d'Atom pour l'aperçu HTML en temps réel

Cet article vous présentera comment implémenter l'aperçu HTML en temps réel dans l'éditeur Atom. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "Tutoriel atom"

Mise en œuvre de base :

Touches de raccourci

Appuyez sur Ctrl + Shift + M dans la zone d'édition pour ouvrir l'aperçu natif. (Sans style CSS)

Implémentation du plug-in : atom-html-preview

Cliquez sur Fichier->paramètres–>installer- > ; Rechercher atom-html-preview -> Télécharger
Appuyez sur Ctrl + Shift + H dans la zone d'édition pour ouvrir le panneau d'aperçu (avec le style CSS)

n'a plus besoin d'être modifié comme mentionné Touches de raccourci en ligne

Implémentation du plug-in : Dev Live Reload

Touches de raccourci d'appel : CTRL+SHIFT+ALT+R

Un peu plus avancé, ouvrez-le dans le navigateur

Implémentation du plug-in : navigateur-plus

Ouvrez le navigateur dans Atom

Implémentation du plug-in : atom-live-server

Ouvrez le navigateur en dehors d'Atom

Il existe de nombreuses touches de raccourci, qui peuvent entrer en conflit avec celles par défaut sur lesquelles je vais écrire. les modifications des touches de raccourci dans le prochain article.

Rejoignez IIS

Si vous ne comprenez pas, vous pouvez consulter l'encyclopédie Baidu https://baike.baidu.com/item/ iis/99720?fr =aladdin
Atom+IE, éditez les fichiers dans le répertoire du site IIS en temps réel, et actualisez simplement après l'écriture.
Si vous utilisez Chrome, vous pouvez installer le plug-in LivePage pour actualiser automatiquement la page.

Implémentation du plug-in : livereload

Écrivez une tâche gulp pour exécuter le plug-in livereload, qui doit être configuré en tant que http .
Si vous ne connaissez pas Gulp, vous pouvez commencer : https://www.gulpjs.com.cn/

Il existe de nombreuses façons d'utiliser

synchronisation du navigateur
synchronisation du navigateur start --server -files « <code> browser-sync start --server -files “<strong>/<em>.html,</em></strong>/.css”/.html,

/.css » code>

Écrit à la fin, puisque vous envisagez de choisir atom, vous devriez l'essayer jusqu'au bout. Le temps nécessaire à l'apprentissage d'une certaine opération de l'IDE est très élevé, alors ne soyez pas timide.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!