一、微文概覽

1. 安裝側(cè)邊欄Side Bar插件
2. 安裝View in Browser插件

二、詳細介紹

• 1. 安裝側(cè)邊欄Side Bar包
     當我們在使用Sublime Text編寫HTML時，單獨一個HTML文件還好，如果編輯的HTML文件過多，那么找起來會相當麻煩，這時你可能希望在左側(cè)將這些HTML文件以列表的形式展示出來，如下圖所示。

     
     
     側(cè)邊欄效果.png
     
     

     那么，下面我就開始介紹如何在Sublime Text 3上安裝包。
     第一個我們要安裝的就是側(cè)邊欄Side Bar包。安裝步驟如下：
     1.1 打開Preferences-->Package Control

     
     
     Package Control.png
     
     1.2 進入Package Control，單擊Install Package
     
     安裝包.png
     
     1.3 當選擇完畢后你會發(fā)現(xiàn)界面沒什么變化，其實是有變化的，此時，你向窗口的左下方看，會有一個“=”左右滑動，它表明Sublime Text 3正在啟動安裝包程序。
     
     等待啟動安裝包程序.png
     
     

     1.4 等待一會兒后，應(yīng)該會出現(xiàn)安裝包的界面（有時會出現(xiàn)聯(lián)網(wǎng)錯誤，重新在啟動安裝包即可），此時我們向輸入框中SideBar后找到SideBarEnhancements，單擊它之后，窗口的最下方又會看到“=”號來回滑動，表示包正在安裝。

     
     
     側(cè)邊欄SideBarEnhancements.png
     
     1.5 當安裝完畢后，如何驗證包是否已安裝呢？我們點擊View會看到Side Bar，說明我們已經(jīng)安裝成功，接著點擊Show Side Bar，這時我們就會看到側(cè)邊欄了，如本文第一幅圖所示。
     
     顯示Side Bar.png
     
     PS：如果我們在寫代碼時不想看到側(cè)邊欄，我們可以依次點擊View-->Side Bar-->Hide Side Bar將其隱藏。

• 2. 安裝View in Browser包
     我們編寫HTML文件后，需要在硬盤上找到HTML文件的位置，有沒有一種簡單的方式，不用到硬盤上去找，直接在Sublime Text中啟動瀏覽器？答案肯定是有的，那就是安裝View in Browser包。下面我將給大家介紹如何安裝View in Browser包及其使用方法。
     2.1 正如安裝側(cè)邊欄包一樣，進入Package Control，然后點擊Install Package安裝包。在輸入框中輸入View，找到View in Browser包，單擊安裝。

     
     
     搜索View in Browser包.png
     
     

     2.2 安裝完畢后，我們進入HTML文件，在窗口隨意位置單擊右鍵，會發(fā)現(xiàn)菜單欄中最下方多了一個View in Browser，說明此包安裝成功，然后選擇View in Browser。

     
     
     View in Browser.png
     
     2.3 當我們選擇后發(fā)現(xiàn)沒有反應(yīng)，此時莫要驚慌，莫要害怕，不是我們安裝出錯了，而是在安裝完畢后還需要對它進行配置。點擊Preferences-->Package Settings-->View in Browser-->Settings - User，進入對View in Browser的設(shè)置。
     
     設(shè)置View in Browser.png
     
     2.4 將下述代碼粘貼到設(shè)置文件中，注意"browser"后面就是我們要使用的瀏覽器，默認使用的瀏覽器是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"
}

粘貼上述代碼到設(shè)置文件.png

2.5 粘貼完畢后，按下ctrl + s對文件進行保存。這時我們再回到HTML文件中右鍵，選擇View in Browser，則直接打開chrome瀏覽器執(zhí)行我們的HTML文件了。

打開chrome瀏覽器運行HTML文件.png

以上就是我們現(xiàn)階段需要用到的包，關(guān)于開發(fā)HTML5，還有其他的包使用，相信大家通過安裝這兩個包后積累了經(jīng)驗，以后再安裝其它的包就按照上述安裝方式進行安裝即可。