淺談Atom實(shí)現(xiàn)HTML實(shí)時(shí)預(yù)覽的方法

本篇文章給大家介紹一下atom 編輯器實(shí)現(xiàn)html實(shí)時(shí)預(yù)覽的方法。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

相關(guān)推薦：《atom》

基礎(chǔ)實(shí)現(xiàn)：

快捷鍵

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

在編輯框中按 Ctrl + Shift + M 可以打開原生預(yù)覽。（不帶css樣式）

插件實(shí)現(xiàn)：atom-html-preview

點(diǎn)擊File->settings–>install-> 搜索 atom-html-preview ->下載
在編輯框中按 Ctrl + Shift + H 可以打開預(yù)覽面板（帶CSS樣式）

已經(jīng)不需要像之前網(wǎng)上說的要修改快捷鍵了

插件實(shí)現(xiàn)：Dev Live Reload

調(diào)用快捷鍵：CTRL+SHIFT+ALT+R

稍微高級(jí)點(diǎn)，瀏覽器內(nèi)打開

插件實(shí)現(xiàn)：brower-plus

在Atom內(nèi)打開瀏覽器

插件實(shí)現(xiàn)：atom-live-server

在Atom外打開瀏覽器

快捷鍵比較多，可能和默認(rèn)的有沖突，下一篇文章寫快捷鍵修改。

加入iis

不懂的可以查看百度百科https://baike.baidu.com/item/iis/99720?fr=aladdin
Atom+IE，實(shí)時(shí)編輯IIS網(wǎng)站目錄下的文件，寫完刷新就行。
如果使用chrome，則可以安裝LivePage 插件 ，實(shí)現(xiàn)頁(yè)面自動(dòng)刷新。

插件實(shí)現(xiàn)：livereload

寫個(gè)gulp 任務(wù)跑 livereload插件，需要架成http。
不會(huì)Gulp可以入門：https://www.gulpjs.com.cn/

方法還有很多

使用browser-sync
browser-sync start –server -files “/.html,/.css”

寫在最后，既然你考慮選擇atom，那么就要一試到底，學(xué)習(xí)某個(gè)ide操作的時(shí)間成本是很高的，千萬(wàn)不要三心二意。

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：atom！！