一、微文概覽
- 安裝側(cè)邊欄Side Bar插件
- 安裝View in Browser插件
二虑鼎、詳細(xì)介紹
-
安裝側(cè)邊欄Side Bar包
當(dāng)我們在使用Sublime Text編寫HTML時辱匿，單獨(dú)一個HTML文件還好，如果編輯的HTML文件過多，那么找起來會相當(dāng)麻煩掀鹅，這時你可能希望在左側(cè)將這些HTML文件以列表的形式展示出來，如下圖所示媒楼。
側(cè)邊欄效果.png
那么乐尊，下面我就開始介紹如何在Sublime Text 3上安裝包。
第一個我們要安裝的就是側(cè)邊欄Side Bar包划址。安裝步驟如下：
1.1 打開Preferences-->Package Control
Package Control.png
1.2 進(jìn)入Package Control扔嵌，單擊Install Package
安裝包.png
1.3 當(dāng)選擇完畢后你會發(fā)現(xiàn)界面沒什么變化，其實(shí)是有變化的夺颤，此時痢缎，你向窗口的左下方看，會有一個“=”左右滑動世澜，它表明Sublime Text 3正在啟動安裝包程序独旷。
等待啟動安裝包程序.png
1.4 等待一會兒后，應(yīng)該會出現(xiàn)安裝包的界面（有時會出現(xiàn)聯(lián)網(wǎng)錯誤寥裂，重新在啟動安裝包即可）嵌洼，此時我們向輸入框中SideBar后找到SideBarEnhancements，單擊它之后封恰，窗口的最下方又會看到“=”號來回滑動麻养，表示包正在安裝。
側(cè)邊欄SideBarEnhancements.png
1.5 當(dāng)安裝完畢后诺舔，如何驗(yàn)證包是否已安裝呢鳖昌？我們點(diǎn)擊View會看到Side Bar，說明我們已經(jīng)安裝成功低飒，接著點(diǎn)擊Show Side Bar许昨，這時我們就會看到側(cè)邊欄了，如本文第一幅圖所示逸嘀。
顯示Side Bar.png
PS：如果我們在寫代碼時不想看到側(cè)邊欄车要，我們可以依次點(diǎn)擊View-->Side Bar-->Hide Side Bar將其隱藏。
-
-
安裝View in Browser包
我們編寫HTML文件后崭倘，需要在硬盤上找到HTML文件的位置翼岁，有沒有一種簡單的方式，不用到硬盤上去找司光，直接在Sublime Text中啟動瀏覽器琅坡？答案肯定是有的，那就是安裝View in Browser包残家。下面我將給大家介紹如何安裝View in Browser包及其使用方法榆俺。
2.1 正如安裝側(cè)邊欄包一樣，進(jìn)入Package Control，然后點(diǎn)擊Install Package安裝包茴晋。在輸入框中輸入View陪捷，找到View in Browser包，單擊安裝诺擅。
搜索View in Browser包.png
2.2 安裝完畢后市袖，我們進(jìn)入HTML文件，在窗口隨意位置單擊右鍵烁涌，會發(fā)現(xiàn)菜單欄中最下方多了一個View in Browser苍碟，說明此包安裝成功，然后選擇View in Browser撮执。
View in Browser.png
2.3 當(dāng)我們選擇后發(fā)現(xiàn)沒有反應(yīng)微峰，此時莫要驚慌，莫要害怕抒钱，不是我們安裝出錯了蜓肆，而是在安裝完畢后還需要對它進(jìn)行配置。點(diǎn)擊Preferences-->Package Settings-->View in Browser-->Settings - User谋币，進(jìn)入對View in Browser的設(shè)置症杏。
設(shè)置View in Browser.png
2.4 將下述代碼粘貼到設(shè)置文件中，注意"browser"后面就是我們要使用的瀏覽器瑞信，默認(rèn)使用的瀏覽器是firefox厉颤，我這里使用的是chrome。
PS：這里要注意chrome的路徑是否與你電腦上的路徑一致凡简，如果不一致則需要修改“chrome”后面的路徑逼友。
-
{
"posix": {
"linux": {
"firefox": "firefox -new-tab",
"chrome": "google-chrome",
"chrome64": "google-chrome",
"chromium": "chromium"
},
"linux2": {
"firefox": "firefox -new-tab",
"chrome": "google-chrome",
"chrome64": "google-chrome",
"chromium": "chromium"
},
"darwin": {
"firefox": "open -a \"/Applications/Firefox.app\"",
"safari": "open -a \"/Applications/Safari.app\"",
"chrome": "open -a \"/Applications/Google Chrome.app\"",
"chrome64": "open -a \"/Applications/Google Chrome.app\"",
"yandex": "open -a \"/Applications/Yandex.app\""
}
},
"nt": {
"win32": {
"firefox": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe -new-tab",
"iexplore": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
"chrome": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"chrome64": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"yandex": "%Local AppData%\\Yandex\\YandexBrowser\\browser.exe"
}
},
"browser": "chrome"
}
2.5 粘貼完畢后，按下ctrl + s對文件進(jìn)行保存秤涩。這時我們再回到HTML文件中右鍵帜乞，選擇View in Browser，則直接打開chrome瀏覽器執(zhí)行我們的HTML文件了筐眷。
以上就是我們現(xiàn)階段需要用到的包黎烈，關(guān)于開發(fā)HTML5，還有其他的包使用匀谣，相信大家通過安裝這兩個包后積累了經(jīng)驗(yàn)照棋，以后再安裝其它的包就按照上述安裝方式進(jìn)行安裝即可。
