實現儲存檔案自動重新整理瀏覽器--實時預覽
外掛的下載以及其功能簡述
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資料夾中：
- 功能：一個瀏覽器和sublime同時要裝的外掛後可以實現，在sublime中每儲存一次，chrome瀏覽器也自動重新整理一次實現實時預覽。
- 開啟Sublime ，然後點選
- 把原始碼改為下面這個：
{ "enabled_plugins": [ "SimpleReloadPlugin", "SimpleRefresh" ] 複製程式碼 - 開啟Sublime ，然後點選
} ```
- 儲存後最後一步要開啟這個功能：
- 下面這裡按回車:
- 然後在彈出的視窗中下拉，找到下面的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&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寫的，感覺掘金的介面更討人喜歡，轉戰掘金。