[程式設計工具]Sublime Text 3配置瀏覽器默認路徑為localhost的方法

有兩種方法，側邊欄增強選單與瀏覽器外掛。

前題要先安裝 Package Control 元件，Tools → Command Palette → Install Package Control

一、側邊欄增強選單 SideBarEnhancements與localhost設定

1. 官網：https://packagecontrol.io/packages/SideBarEnhancements

2. 安裝：Preferences → Package Control → Package Control：Install Package → SideBarEnhancements

3. 安裝套件：Open In Browser

安裝：Preferences → Package Control → Package Control：Install Package → Open In Browser

4. 安裝後的位置：Preferences → Browse Packagesd → 資料夾 User 裡

5. 側邊欄 SideBarEnhancements 設定方法

(1)網址設定 SideBarEnhancements.json

左側按右鍵 → Project → Edit Preview URLS

{

    "G:/EasyPHP-DevServer-14.1VC9 20161012/data/localweb/": { //檔案位置

    "url_testing": "http://localhost/"//測試服務器地址

    "url_production": "" //上架後服務器地址

    }

}

(2)設置默認預覽瀏覽器 Side Bar.sublime-settings

Preferences → Package Settings → Side Bar → Settings - User

位置C:\Users\fan\AppData\Roaming\Sublime Text 3\Packages\User

{

  "default_browser": "firefox" //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari

}

(3)設置快速鍵

Preferences → Package Settings → Side Bar → Key Settings - User

[

{ 

    "keys": ["f12"],

            "command":"side_bar_open_in_browser",

            "args":{

            "paths":[], 

        "type":"url_testing", 

    "browser":"firefox"

   }

    },{

    "keys": ["f5"],

    "command":"side_bar_files_open_with",

    "args": {

        "paths": [],

        "application":"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",

        "extensions":".*"

    }

}

]

二、瀏覽器外掛與localhost設定

先儲存右側預覽介面 Project → Add Folder to Project → Save Project As，例如：儲存為ST.sublime-project

1. 套件一：Open In Browser

安裝：Preferences → Package Control → Package Control：Install Package → Open In Browser

2. 套件二：View In Browser

安裝：Preferences → Package Control → Package Control：Install Package → View In Browser

第一步

Preferences → Package Settings → View in Browser → Settings-User，加入以下內容

{

"browser": "firefox"

}

第二步

方法一：如果有安裝 SideBarEnhancements 就在左側按右鍵 → Project → Edit Project，修改成以下內容。

方法二：在左側開啟存成 ST.sublime-project 檔案，修改成以下內容。

{

"folders":

[

{

"path": "G:\\EasyPHP-DevServer-14.1VC9 20161012\\data\\localweb\\jQuery"

}

],

"settings":

{

"sublime-view-in-browser":

{

"basePath": "G:\\EasyPHP-DevServer-14.1VC9 20161012\\data\\localweb\\jQuery",

"baseUrl": "http://localhost/jQuery"

}

}

}

第三步

預設快速鍵如下

[

    { "keys": [ "ctrl+alt+v" ], "command": "view_in_browser" },

    { "keys": [ "ctrl+alt+f" ], "command": "view_in_browser", "args": { "browser": "firefox" } },

    { "keys": [ "ctrl+alt+c" ], "command": "view_in_browser", "args": { "browser": "chrome" } },

    { "keys": [ "ctrl+alt+i" ], "command": "view_in_browser", "args": { "browser": "iexplore" } },

    { "keys": [ "ctrl+alt+s" ], "command": "view_in_browser", "args": { "browser": "safari" } }

]

改快速鍵方法如下

方法一：Preferences → Key Bindings → 在右邊加入

方法二：Preferences → Package Settings → View in Browser → Key Bindings-User → 加入

[

    { "keys": [ "f12" ], "command": "view_in_browser", "args": { "browser": "firefox" } }

]