Atom 編輯器實(shí)時(shí)預(yù)覽 HTML 頁(yè)面

編輯器實(shí)時(shí)預(yù)覽 HTML 頁(yè)面

為何尋找

每次預(yù)覽 HTML 頁(yè)面，都需要打開(kāi)各種瀏覽器；哪怕不是調(diào)試，只是為了查看下效果；切換來(lái)切換去，各種刷新，感覺(jué)有些浪費(fèi)時(shí)間；以前用過(guò) DW 的實(shí)時(shí)預(yù)覽，感覺(jué)這個(gè)功能很贊；又踏上了 atom 插件倉(cāng)庫(kù)慢慢尋找之路......

插件:atom-html-preview

官方描述：A live preview tool for Atom Editor. 簡(jiǎn)言之：Atom編輯器內(nèi)實(shí)時(shí)預(yù)覽的工具

獲取方式

1.通過(guò)命令行安裝

apm install atom-html-preview

2.通過(guò)編輯器內(nèi)部的 install 搜索 atom-html-preview 安裝

使用方式及效果

快捷鍵

• 默認(rèn)快捷鍵： CTRL + P 調(diào)用，會(huì)和內(nèi)置核心插件沖突(切換文件那個(gè)) — 非常不好
• 修改版快捷鍵： CTRL + F12 (感覺(jué)方便使用且沒(méi)有沖突的快捷鍵)

 #實(shí)時(shí)瀏覽器調(diào)用快捷鍵
 'atom-text-editor':
  'ctrl-F12':'atom-html-preview:toggle'

Tips

寫(xiě)在 keymap 里面的權(quán)重是最高的......較新版本的 atom 內(nèi)置了 Dev Live Reload 這個(gè)插件；

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

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

效果圖

我用 BS 框架寫(xiě)的頁(yè)面來(lái)測(cè)試….可以正確預(yù)覽，內(nèi)部 css 是 cdn 也能正確識(shí)別。

瀏覽器猜測(cè)

跑到該插件的 GitHub 倉(cāng)庫(kù)頁(yè)面,只看到一些 cson 規(guī)則，沒(méi)有調(diào)用外部瀏覽器。

那么答案只有一個(gè)….就是 chromium 框架….所以內(nèi)核應(yīng)該也是 blink

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

Web 本地應(yīng)用程序

Atom 是一款基于 Web 技術(shù)的桌面應(yīng)用程序，和其他桌面應(yīng)用程序一樣，它也擁有自己的圖標(biāo)、本地菜單、對(duì)話框以及訪問(wèn)整個(gè)文件系統(tǒng)的權(quán)限。

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