為何尋找

每次預覽 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 這個插件；

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

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

效果圖

我用 BS 框架寫的頁面來測試….可以正確預覽，內部 css 是 cdn 也能正確識別。

http://wiki.jikexueyuan.com/project/atom/images/ph1.jpg" alt="" />

http://wiki.jikexueyuan.com/project/atom/images/ph2.jpg" alt="" />

瀏覽器猜測

跑到該插件的 GitHub 倉庫頁面,只看到一些 cson 規(guī)則，沒有調用外部瀏覽器。

那么答案只有一個….就是 chromium 框架….所以內核應該也是 blink

以下是引用外部描述的 atom[不知道是不是官方]

Web 本地應用程序

Atom 是一款基于 Web 技術的桌面應用程序，和其他桌面應用程序一樣，它也擁有自己的圖標、本地菜單、對話框以及訪問整個文件系統(tǒng)的權限。

無論你是調整 Atom 的 CSS 接口還是添加一些 HTML 和 JavaScript 主要功能，它都可以被你輕松控制，并且使用起來非常方便。