Sublime 插件FileHeader 聯動Side Bar和Live Reload 實現F1打開谷歌chrome瀏覽器自動打開右上角的LiveReload

時間 2019-12-05

標籤 sublime 插件 fileheader 聯動 live reload 實現 f1 打開谷歌 chrome 瀏覽器自動右上 livereload 欄目 Chrome 简体版

原文原文鏈接

實現保存文件自動刷新瀏覽器--實時預覽

插件的下載以及其功能簡述

FileHeader

介紹：能夠在新建文件的時候，自動加上文件相關的開頭代碼和註釋。
安裝：按Ctrl+Shift+P，輸入install ，看到第一個Install Package按回車，而後在彈出的窗口中輸入FileHeader按回車直接安裝
功能
- 按Ctrl+Alt+N，新建相關文件的時候，自動生成文件開頭的代碼。以Html格式爲例：

在文件名稱後面加上」.html"，按回車新建文件。新建的html文件就會出現設定好的模板

SideBarEnhancements

安裝：按Ctrl+Shift+P，輸入install ，看到第一個Install Package按回車，而後在彈出的窗口中輸入SideBarEnhancements按回車直接安裝。
功能：
- 能夠增長左邊菜單欄功能以及定義不一樣的快捷鍵打開不一樣的瀏覽器

如上圖，打開。在打開的文件中添加如下快捷鍵代碼，下面的["f1"]爲快捷鍵，你也能夠調成本身喜歡的快捷鍵，
而後下面「application」右邊是谷歌（chrome）瀏覽器的路徑，要改成你本身的路徑。這樣就實現了按F1直接打開谷歌瀏覽器了。

// Side Bar的谷歌瀏覽器快捷鍵
   { "keys": ["f1"], "command": "side_bar_files_open_with",
          "args": {
              "paths": [],
              //下面這裏要輸入本身電腦的谷歌chorme瀏覽器路徑
              "application": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
              "extensions":".*"
          }
   },
複製代碼

Live Reload

sublime 安裝插件

安裝：去github下載文件放入到Package文件夾中：
- 下載地址：github.com/MattDMo/Liv…
功能：一個瀏覽器和sublime同時要裝的插件後能夠實現，在sublime中每保存一次，chrome瀏覽器也自動刷新一次實現實時預覽。
- 打開Sublime ，而後點擊
- 把原代碼改成下面這個：
```
{
   "enabled_plugins": [
    "SimpleReloadPlugin",
    "SimpleRefresh"
   ]
複製代碼
```

} ```html

保存後最後一步要開啓這個功能：
下面這裏按回車:

而後在彈出的窗口中下拉，找到下面的Simple Reload 點擊或回車開啓功能

此時左下角彈出下圖表示功能已開啓。

谷歌chrome瀏覽器

安裝：經過chrome應用商店搜索Live Reload安裝或者自行下載.crx文件離線安裝，如圖：

安裝好有右上角會出現一個循環中間有一個小圓圈的圖標：右鍵它，而後點擊管理拓展程序。

而後在彈出的窗口中打開「容許訪問文件網址」按鈕。

所有工做準備完成

打開Live Reload:

到這裏的時候，咱們新建一個html文件，按F1打開chrome瀏覽器，按F12打開開發者模式，點擊右上角的Live Reload 按鈕，中間那個空心小圓圈會變成實心的，這時候注意，你會發現下面標籤出現閃動打開會看到文件多了一行代碼，

也就是說，谷歌chrome的Live Reload 插件功能就是經過這一行代碼鏈接到sublime能夠實現每保存一次（Ctrl+S）瀏覽器就刷新一次，可是咱們每次新建一個文件都要打開瀏覽器點擊這個按鈕都很浪費時間。因此咱們能夠結合FileHeader插件在新建文件後直接在文件頭部插入這個代碼實現每次打開谷歌chrome瀏覽器自動開啓Live Reload功能（空心小圓圈變實心表示開啓）

配置FileHeader文件

打開插件FileHeader的文件位置

繼續打開模板文件夾template

用Sublime打開html的新建文件模板，就是上圖這個，在裏面輸入模板

<!DOCTYPE html>
<html lang="en">
    <head>
    	<script src="http://127.0.0.1:35729/livereload.js?ext=Chrome&amp;extver=2.1.0"></script>
        <meta charset="utf-8">
        <title>Documents</title>
    </head>
    <body>
    </body>
</html>
複製代碼

這樣咱們在經過Ctrl+Alt+N或者新建html文件的時候就會出現頭部的代碼，此時按F1打開谷歌chrome瀏覽器。

你會發現Live Reload 按鈕已經自動從空心小圓圈變爲實心的了，也就是說自動開啓了這個功能。

測試

在標籤裏輸入123123，按Ctrl+S保存，

以上是我在自學前端後發現能夠顯著提升學習效率的三個插件組成的聯動功能

做者：WuBob123
來源：CSDN
原文：blog.csdn.net/m0_38025763…
版權聲明：本文爲博主原創文章，轉載請附上博文連接！
- 這是我在CSDN寫的，感受掘金的界面更討人喜歡，轉戰掘金。

相關文章

相關標籤/搜索

谷歌瀏覽器

谷歌Chrome插件

瀏覽器信息

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<