Sublime text2如何設置快捷鍵讓編寫的HTML文件在瀏覽器預覽？

12-30

這幾天剛用sublime text2，個人感覺界面和交互做的很好就是插件方面讓我糊裡糊塗的，我已經安裝open_in_browser插件，可惜只能使用默認瀏覽器預覽HTML文件，不知啥原因剛安裝好按F12就可以使用谷歌瀏覽器預覽，可惜我不會改（我是在下載吧里下載的sublime text2）.，百度上搜了好多教程，都是些在github上下載文件，然後放在sublime安裝目錄下Packages裡面，然後設置用戶按鍵...聽起來總是可行，但我就是按照所說的方法去做，結果總是讓我抓狂！！！前言說完了，我從星期一弄到現在，好無助才來貼吧知道里求助！！！如今想求各位大神解決的就是如何使用多個快捷鍵讓多個其他瀏覽器來瀏覽HTML文件，說話有點小白，別見怪哈！！！

更新，這個方法我又測試了一下是需要安裝一個插件的。（好吧其實是我換電腦，重新裝了一邊軟體。）

1，按Ctrl+`調出console（註：安裝有QQ輸入法的這個快捷鍵會有衝突的，輸入法屬性設置-輸入法管理-取消熱鍵切換至QQ拼音）

2，粘貼以下代碼到底部命令行並回車：

（ST3版本）

import urllib.request,os,hashlib; h = "2915d1851351e5ee549c20394736b442" + "8bc59f460fa1548d1514676163dafc88"; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( "Package Control" + pf.replace(" ", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); print("Error validating download (got %s instead of %s), please try manual install" % (dh, h)) if dh != h else open(os.path.join( ipp, pf), "wb" ).write(by)

（ST2版本）

import urllib2,os,hashlib; h = "2915d1851351e5ee549c20394736b442" + "8bc59f460fa1548d1514676163dafc88"; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( "Package Control" + pf.replace(" ", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), "wb" ).write(by) if dh == h else None; print("Error validating download (got %s instead of %s), please try manual install" % (dh, h) if dh != h else "Please restart Sublime Text to finish installation")

3，在Perferences-&>package settings中看到package control這一項就待變安裝成功啦。

4，安裝SideBarEnhancements插件

ctrl+shift+p —&> Install Package —&> 找到SideBarEnhancements

5，然後再配置預覽快捷鍵就行了

---------------------------------------預覽快捷鍵配置--------------------------

根據 @楊興洲同學的答案說下自己設置成功的步驟。（話說這麼簡單的事情花費了我兩個小時也是醉了，以後養成有問題先來知乎搜索的習慣。。。。）

第一步。

Preferences—Key Bindings—User.

然後就跳出一個空白頁面。

第二部，將以下代碼鍵入。

// chrome { "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe", "extensions":".*" } },


// firefox

{ "keys": ["f3"], "command": "side_bar_files_open_with",

         "args": {

            "paths": [],

            "application": "D:/Program Files (x86)/Mozilla Firefox/firefox.exe",

            "extensions":".*"

        }

},

// ie { "keys": ["f4"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:/Program Files/Internet Explorer/iexplore.exe", "extensions":".*" } }

其中「keys」是指定快捷鍵，替換成自己想要的。

application是你瀏覽器在電腦上的目錄地址，替換了就OK了。

然後保存更改就。

然後就搞定了。Enjoy Coding !

我的Mac sublime3 配置如下：

[ // Chrome { "keys": ["command+1"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "/Applications/Google Chrome.app", "extensions":".*" } }, // 習慣command+b默認Chrome { "keys": ["command+b"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "/Applications/Google Chrome.app", "extensions":".*" } },


	// Safari

	{ "keys": ["command+2"], "command": "side_bar_files_open_with",

	     "args": {

	        "paths": [],

	        "application": "/Applications/Safari.app",

	        "extensions":".*"

	    }

	},

// Firefox { "keys": ["command+3"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "/Applications/Firefox.app", "extensions":".*" } } ]

———————————補充分割線1———————————

有些小夥伴不知道在哪裡配置，特截圖作為補充：

———————————補充分割線2———————————

有些Windows小夥伴還是不會配置，這裡補充一下Windows的配置方法。

1、按截圖找到配置文件；

2、配置Chrome瀏覽器：
[
{ "keys": ["ctrl+1"], "command": "side_bar_files_open_with",
"args": {"application": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"}
}
]

3、其他瀏覽器類推，注意路徑；

———————————補充分割線3———————————

有的小夥伴嚴格按照以上方式配置，但快捷鍵就是不生效。可能是沒有安裝SideBarEnhancements插件，安裝一下即可。

create a preview of HTML files with sumblime · Jekyll Metro

第一次在知乎回答專業問題哈，好緊張啊好緊張，我用的是windows8+chrome，windows下有默認瀏覽器的設置，被設為默認瀏覽器的瀏覽器（無論是ie，chrome還是其他）都可以在命令行中用「explorer.exe"調用，不多說，看圖。

STEP 1

Tools-&>Build System-&>New Build System

STEP 2

Use windows command to open this file with default explorer

STEP 3

Save it in Package-&>User directory and switch the default build system

補充：按圖上配置完成之後按 Ctrl+B 即可用你的默認瀏覽器預覽 HTML 代碼。

但是有一點，如果文件名是中文的（或者有非asc碼）預覽會失敗，可能是 python 2 不支持中文。

---------------------------------------------------------------------

#廣告時間：

**歡迎大家來我博客** [地址]( Jekyll Metro · A Metro theme for Jekyll )

&>不支持Markdown的回答框不是好的回答框

推薦一個神器， livereload

打開Preferences - 「Key Bindings - User」，添加此行：

{"keys": ["alt+b"],"command": "open_in_browser"}

如果上一行有內容的話注意用「,」結尾。

保存後按alt+b就相當於右鍵-open in browser了，你也可以換成自己喜歡的快捷鍵。

自定義快捷鍵。。。（應該沒有用插件把。如果有的話，那就是sidebarenhance）
我用的是ST3.不知道你的2支持不支持

-------------------------------下面是更新----------------------------

SideBarEnhancements，去官網查了下，只支持ST3。

然後使用自定義快捷鍵，如下

//chrome { "keys": ["f2"],// 你自定義的快捷鍵 "command": "side_bar_files_open_with", "args": { "paths": [], "application": "D:\browser\MyChrome\MyChrome.exe", // 你選擇的瀏覽器路徑，注意轉義 "extensions": ".*"//設置支持打開的文件類型 } },

------------------------------------------------------------

剛用sublime沒多久，也遇到了這個問題，我是用Mac的，就補充一下前面幾個答案中mac的路徑設置

[

{ "keys": ["ctrl+shift+c"], "command": "copy_path" },

{ "keys": ["ctrl+s"], "command": "open_in_browser" },

{ "keys": ["ctrl+f"], "command": "side_bar_files_open_with",

"args": {

"paths": [],

"application": "Firefox.app",//sublime和firefox都在applications中

"extensions":".*" //any file with extension

} },

{ "keys": ["ctrl+c"], "command": "side_bar_files_open_with",

"args": {

"paths": [],

"application": "Google Chrome.app",//同上

"extensions":".*" //any file with extension

}

]

其實我覺得你可以試試brackets，自帶實時預覽功能。

在官方Sublime論壇裡面有答案：

View in Multiple Browsers

by GMB on Sun Oct 07, 2012 7:26 pm

Add the key bindings below to your keymap (Sublime Text 2 &> Preferences &> Key Bindings - User), then create a "viewInBrowser" file and save it in Sublime Text 2 &> Packages &> User. Modify and or add/delete browsers as per your workflow.
import sublime, sublime_plugin import webbrowser class OpenBrowserCommand(sublime_plugin.TextCommand): def run(self,edit,keyPressed): url = self.view.file_name() if keyPressed == "1": navegator = webbrowser.get("open -a /Applications/Safari.app %s") if keyPressed == "2": navegator = webbrowser.get("open -a /Applications/Google Chrome.app %s") if keyPressed == "3": navegator = webbrowser.get("open -a /Applications/Firefox.app %s") if keyPressed == "4": navegator = webbrowser.get("open -a /Applications/Opera.app %s") navegator.open_new(url)
FWIW, also up on Github at https://gist.github.com/3795759

突然注意到論壇上這個回答的日期是2012年....

現在Sublime Text都出3了好嗎！！

啊啊啊！知乎是把很久以前的問題推送給我了么？！

題主是不會用google么！！

Mac用戶followthis,用safari預覽的

{

"cmd": ["open", "-a", "/Applications/safari.app", "$file"]

}

若未源文件未保，subl則會提示你指定一個文件或目錄

另外可以自己更改safari.app來指定make程式

不知道為什麼，，，反正我在sublime按f12，就直接打開瀏覽器了

把他當成普通編輯器用吧。

不會用就Google搜教程看著學。