編輯器實時預覽 HTML 頁面

為何尋找

每次預覽 HTML 頁面，都需要打開各種瀏覽器；哪怕不是調試，只是為了查看下效果；切換來切換去，各種刷新，感覺有些浪費時間；以前用過 DW 的實時預覽，感覺這個功能很贊；又踏上了 atom 插件倉庫慢慢尋找之路......

插件:atom-html-preview

官方描述：A live preview tool for Atom Editor. 簡言之：Atom編輯器內實時預覽的工具

獲取方式

1.通過命令行安裝

apm install atom-html-preview

2.通過編輯器內部的 install 搜索?atom-html-preview?安裝

使用方式及效果

快捷鍵

• 默認快捷鍵：?CTRL + P?調用，會和內置核心插件沖突(切換文件那個) — 非常不好
• 修改版快捷鍵：?CTRL + F12?(感覺方便使用且沒有沖突的快捷鍵)

#實時瀏覽器調用快捷鍵'atom-text-editor':'ctrl-F12':'atom-html-preview:toggle'

Tips

寫在 keymap 里面的權重是最高的......較新版本的 atom 內置了 Dev Live Reload 這個插件；

這個插件的作用就是重新加載所有樣式和規則，有點類似 linux 的 source xx.sh 一樣..即時生效 調用快捷鍵是?CTRL + SHIFT + ALT +R

當然，關閉 atom 再開 atom 編輯器也能達到重新加載所有樣式規則的效果......

總結

以上是生活随笔為你收集整理的Atom 编辑器实时预览 HTML 页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。