Atom 編輯器實現HTML實時預覽
阿新 • • 發佈:2019-01-28
基礎實現:
快捷鍵
在編輯框中按 Ctrl + Shift + M
可以開啟原生預覽。(不帶CSS樣式)
外掛實現:atom-html-preview
點選File->settings–>install-> 搜尋 atom-html-preview ->下載
在編輯框中按 Ctrl + Shift + H
可以開啟預覽面板(帶CSS樣式)
已經不需要像之前網上說的要修改快捷鍵了
外掛實現:Dev Live Reload
呼叫快捷鍵:CTRL+SHIFT+ALT+R
稍微高階點,瀏覽器內開啟
外掛實現:brower-plus
在Atom內開啟瀏覽器
外掛實現:atom-live-server
在Atom外開啟瀏覽器
快捷鍵比較多,可能和預設的有衝突,下一篇文章寫快捷鍵修改。
加入IIS
不懂的可以檢視百度百科https://baike.baidu.com/item/iis/99720?fr=aladdin
Atom+IE,實時編輯IIS網站目錄下的檔案,寫完重新整理就行。
如果使用Chrome,則可以安裝LivePage 外掛 ,實現頁面自動重新整理。
外掛實現:livereload
寫個gulp 任務跑 livereload外掛,需要架成http。
不會Gulp可以入門:https://www.gulpjs.com.cn/
方法還有很多
使用browser-sync
browser-sync start --server -files “/.html,/.css”
寫在最後,既然你考慮選擇atom,那麼就要一試到底,學習某個IDE操作的時間成本是很高的,千萬不要三心二意。