1. 程式人生 > >Sublime Text3 無法使用LiveReload外掛的解決方法

Sublime Text3 無法使用LiveReload外掛的解決方法

原部落格時間: 2015-08-16 16:10:40

問題更新

最近電腦系統換為ubuntu後,發現原來這個問題的解決辦法和windows中略有不同,及時記錄下來

前言

以前一直在用sublime text2, 有一款外掛感覺非常好用,就是LiveReload
在sublime中寫完程式碼,按下ctrl+s儲存後,瀏覽器自動重新整理頁面,可直接檢視效果,
而不用切換到瀏覽器中再按F5重新整理。這對於做web開發的真心方便,最爽的莫過於雙屏開發,這邊寫完程式碼,儲存,那邊直接檢視效果。
然而,前段時間開始嘗試sublime text 3, 沒想到通過package control安裝的livereload

外掛無法使用了,簡直不能忍啊!!在網上搜索了好久,也看了國外的一些解答,總算找到了解決方法。

安裝LiveReload

chrome

1.在chrome瀏覽器中安裝擴充套件外掛LiveReload,安裝完成後,可看到右上角出現livereload圖示,
如下圖所示,此時中心的圓點是空心的,代表還未開啟

2.進入chrome擴充套件程式頁面,將livereload中的允許訪問檔案網址打上勾

sublime安裝LiveReload

sublime text3的package control中的livereload外掛存在bug, 不知道什麼時候能夠修復

windows


https://github.com/Grafikart/ST3-LiveReload
可以從上面地址下載到可用的livereload,直接下載到本地或clone均可
你會得到一個外掛包,將該資料夾重新命名為LiveReload,然後將其手工放入
sublime text3的Packages目錄中,此資料夾是隱藏資料夾,預設地址為
C:\Users\your_user_name\AppData\Roaming\Sublime Text 3\Packages
博主是用的Everything查詢的,直接輸入sublime package 關鍵字即可查詢到。

順道在此打個廣告,Everything是一款特別好用的windows平臺下的搜尋工具,比windows自帶的搜尋功能好用上千倍,附上下載地址,有需自取

http://www.voidtools.com/downloads/

Linux

cd ~/.config/sublime-text-3/Packages  
rm -rf LiveReload  
git clone https://github.com/Grafikart/ST3-LiveReload.git LiveReload  

接下來,開啟sublime text 3

windows
preferences -> Packge Settings -> LiveReload -> Settings - User

Linux
preferences -> Packge Settings -> LiveReload -> Settings - Default
輸入以下內容儲存即可

{
    "enabled_plugins": [
        "SimpleReloadPlugin",
        "SimpleRefresh"
    ]
}

有很多教程是要每次開啟sublime後,通過package control手動啟用上述元件,這樣也是可以的,但總歸麻煩了一些,可以直接新增上述程式碼,使之預設載入。

最後

例如,開啟某個html檔案,在chrome中開啟,點選LiveReload圖示,可以看到中心由空心圓點變為實心圓點,代表啟動成功,這時返回sublime中,可以看到左下角出現LiveReload連線成功的提示

最後,開始享受敲程式碼的愉悅感吧!