1. 程式人生 > >如何在Sublime Text3 中開啟瀏覽器預覽效果

如何在Sublime Text3 中開啟瀏覽器預覽效果

由於最近在學習網頁製作,目前還只是在起步的HTML階段。

昨晚用記事本寫了寫HTML程式碼,深感不爽,今早便在知乎上尋找了一款受歡迎的編輯器——Sublime Text3

話不多說,下課後吃完飯立馬開啟電腦開始安裝Sublime Text3,剛進去的頁面便讓英語不好的我感受到了一絲涼意,還有複製進去昨晚寫的程式碼為啥全是一色顯示,也沒有想象中的語法高亮顯示啊。還有這個到底怎麼才能執行。。。。。

下面便開始逐一解決問題。

關於基本的安裝和外掛,這裡推薦這篇文章,適合小白的細心教程。

關於漢化,也是比較簡單的,戳這裡!

那麼,大家關心的語法高亮怎麼實現呢?

在Sublime Text3的右下角有個選擇的小按鈕,需要選擇語言才行。。

沒找到的戳這裡!

最後就到了唯一有些難度的執行問題了,我們肯定是希望能夠直接在編輯器中按一個鍵然後就在網頁中預覽到當前效果。

然後去百度了一下,需要自己設定快捷鍵。

沒有經過漢化的是這樣的


而我的經過了漢化的是這樣的


其實都差不多,然後點進去是這個頁面,左面是預設的一些快捷鍵,可以瞭解一下。右面空空的地方就是可以自己定義的了。


我這裡設定了三種瀏覽器開啟,分別為預設,IE和chorme


"keys": ["f2"] :

keys:表示快捷鍵,即 F2 可以啟動chorme瀏覽器進行預覽。

"application": "C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe"

application:表示瀏覽器所在的安裝路徑,上面的這個路徑是我電腦上的瀏覽器路徑。

如果直接從屬性中複製路徑,注意斜槓!!!注意斜槓!!!注意斜槓!!!

這裡出現了一個尷尬的問題,設定完了按快捷鍵卻好像沒啥反應,哪裡錯了嘛

找了半天,原來是需要安裝一個外掛:SideBarEnhancements

方法:ctrl+shift+P 選 Package Control: Install Package 找 SideBarEnhancements 安裝即可。

然後推薦一些個好看的主題:點這裡!

最後附上我的設定

[    
	{ "keys": ["f3"], "command": "open_in_browser" },
//ie
    {
        "keys": ["f1"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files (x86)\\Internet Explorer\\iexplore.exe",
            "extensions": ".*"
        }
    },
//chorme
     {
        "keys": ["f2"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
            "extensions": ".*"
        }
    }]