一、微文概覽
- 安裝側(cè)邊欄Side Bar插件
- 安裝View in Browser插件
二、詳細(xì)介紹
-
安裝側(cè)邊欄Side Bar包
當(dāng)我們?cè)谑褂肧ublime Text編寫(xiě)HTML時(shí)，單獨(dú)一個(gè)HTML文件還好，如果編輯的HTML文件過(guò)多，那么找起來(lái)會(huì)相當(dāng)麻煩，這時(shí)你可能希望在左側(cè)將這些HTML文件以列表的形式展示出來(lái)，如下圖所示。
側(cè)邊欄效果.png
那么，下面我就開(kāi)始介紹如何在Sublime Text 3上安裝包。
第一個(gè)我們要安裝的就是側(cè)邊欄Side Bar包。安裝步驟如下：
1.1 打開(kāi)Preferences-->Package Control
Package Control.png
1.2 進(jìn)入Package Control，單擊Install Package
安裝包.png
1.3 當(dāng)選擇完畢后你會(huì)發(fā)現(xiàn)界面沒(méi)什么變化，其實(shí)是有變化的，此時(shí)，你向窗口的左下方看，會(huì)有一個(gè)“=”左右滑動(dòng)，它表明Sublime Text 3正在啟動(dòng)安裝包程序。
等待啟動(dòng)安裝包程序.png
1.4 等待一會(huì)兒后，應(yīng)該會(huì)出現(xiàn)安裝包的界面（有時(shí)會(huì)出現(xiàn)聯(lián)網(wǎng)錯(cuò)誤，重新在啟動(dòng)安裝包即可），此時(shí)我們向輸入框中SideBar后找到SideBarEnhancements，單擊它之后，窗口的最下方又會(huì)看到“=”號(hào)來(lái)回滑動(dòng)，表示包正在安裝。
側(cè)邊欄SideBarEnhancements.png
1.5 當(dāng)安裝完畢后，如何驗(yàn)證包是否已安裝呢？我們點(diǎn)擊View會(huì)看到Side Bar，說(shuō)明我們已經(jīng)安裝成功，接著點(diǎn)擊Show Side Bar，這時(shí)我們就會(huì)看到側(cè)邊欄了，如本文第一幅圖所示。
顯示Side Bar.png
PS：如果我們?cè)趯?xiě)代碼時(shí)不想看到側(cè)邊欄，我們可以依次點(diǎn)擊View-->Side Bar-->Hide Side Bar將其隱藏。
-
-
安裝View in Browser包
我們編寫(xiě)HTML文件后，需要在硬盤(pán)上找到HTML文件的位置，有沒(méi)有一種簡(jiǎn)單的方式，不用到硬盤(pán)上去找，直接在Sublime Text中啟動(dòng)瀏覽器？答案肯定是有的，那就是安裝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文件，在窗口隨意位置單擊右鍵，會(huì)發(fā)現(xiàn)菜單欄中最下方多了一個(gè)View in Browser，說(shuō)明此包安裝成功，然后選擇View in Browser。
View in Browser.png
2.3 當(dāng)我們選擇后發(fā)現(xiàn)沒(méi)有反應(yīng)，此時(shí)莫要驚慌，莫要害怕，不是我們安裝出錯(cuò)了，而是在安裝完畢后還需要對(duì)它進(jìn)行配置。點(diǎn)擊Preferences-->Package Settings-->View in Browser-->Settings - User，進(jìn)入對(duì)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對(duì)文件進(jìn)行保存。這時(shí)我們?cè)倩氐紿TML文件中右鍵，選擇View in Browser，則直接打開(kāi)chrome瀏覽器執(zhí)行我們的HTML文件了。
以上就是我們現(xiàn)階段需要用到的包，關(guān)于開(kāi)發(fā)HTML5，還有其他的包使用，相信大家通過(guò)安裝這兩個(gè)包后積累了經(jīng)驗(yàn)，以后再安裝其它的包就按照上述安裝方式進(jìn)行安裝即可。
