Sublime 前端工程師必裝外掛 : Browser Refresh

一個前端工程師，每天都要重覆的切換瀏覽器與編輯器，先在編輯器上修改 Style，再儲存檔案，還要再切換到瀏覽器，並重新整理頁面，才能看到瀏覽器頁面上的變化，有時候只是調整文字的行高與間距，就要重覆一次這樣的動作，現在只要安裝了 Browser Refresh 這個 Sublime 外掛，就可以減化這個動作，加快前端開發的時間，可以早點回家陪老婆、小孩。

Browser Refresh 這個外掛目的就是要減少前端工程師不間斷的重覆行為，安裝這個 Plugin 可以大大的加快開發速度，Browser Refresh 整合幾個步驟：儲存檔案，切換到瀏覽器，重新整理頁面，把這三個步驟整合成一個快捷鍵，你只要按 “Ctrl + Shift + R”，三個需求一次滿足。

合併以下三個動作：

• Sublime 儲存檔案
• 切換到瀏覽器
• 重新整理頁面

如何安裝 Browser Refresh

安裝方式很簡單，先打開你的 Sublime ，選擇 Preferences Packages Control ，等 Sublime 跳出一個小視窗後，選擇 install packages ，再搜尋 Browser Refresh ，點擊這個外掛後， Sublime 就會自動幫我們安裝。

裝好之後，要注意先打開你要編輯的 HTML 跟 CSS 檔案，再到瀏覽器打開 HTML 頁面，這樣就完成了 Sublime 與瀏覽器之間的連動，接下來只要你有修改 HTML 或是 CSS ，按一下 "Ctrl + Shift + R" ，就可以馬上看到瀏覽器上樣式的變化。

修改 Browser Refresh 熱鍵

如果你不喜歡 Browser Refresh 預設的熱鍵，那麼我們也可以自已定義熱鍵，首先打開 Preferences Package Settings Browser Refresh Key Bindings - User，Sublime 會自動打開一個個人化的空白設定檔。

接著我們就可以輸入自訂的熱鍵，例如我想要用 Ctrl + R 來取代 Ctrl+Shift +R ，那麼我可以這樣寫：

[
    {
        "keys": ["ctrl+r"], "command": "browser_refresh", "args": {
            "auto_save": true,
            "delay": 0.0,
            "activate": true,
            "browsers" : ["chrome"]
        }
    }
]