一枚成分复杂的网络IT分子，常年游弋于电子商务，属于互联网行业分类中的杂牌军。当前正在待业中...
Design. Valid XHTML & CSS.专注互联网前端技术 JS CSS HTML
Sublime Text2 实现快捷键在浏览器中预览功能
Posted By 刘晓帆 | 6,002 views
自从开始使用Sublime Text2这个神器之后，越来越喜欢它了。但是也有些不太方便的地方，比如预览功能，我习惯了DW的f12和eclispe的集成浏览器，当然ST也有这个功能，在编辑区右键菜单里面可以实现。不过还是要多点几下鼠标，很是不爽~
那么，接下来就是重点了！如何实现快捷键预览呢？
方法很简单，就是创建插件的形式了来实现了。
一、创建插件
点击菜单Tools -> New Plugin…，在创建好的py文件输入下列内容：
import sublime, sublime_plugin
import webbrowser
url_map = {
'/Users/jerry/Sites/test/' : 'http://test/',
class OpenBrowserCommand(sublime_plugin.TextCommand):
def run(self,edit):
window = sublime.active_window()
window.run_command('save')
url = self.view.file_name()
for path, domain in url_map.items():
if url.startswith(path):
url = url.replace(path, domain).replace('\', '/')
webbrowser.open_new(url)
然后将文件保存到Packages/User目录（Packages可通过菜单里的Browser Packages…打开），文件名随意，如open_browser.py。这样插件部分完工了。
二、为刚才的插件分配快捷键
点菜单Tools -> Command Palette…，或者shift+cmd+p，打开命令集，选择“key Bindings – User”打开个人快捷键配置，输入下列内容：
[{ "keys": ["f12"], "command": "open_browser" }]
这样就搞定了:)那么我们可以测试一下了。打开一个文件，按f12试试，没意外的话文件会在默认浏览器打开了。
CopyRight @ 爱前端[网页设计]无需插件，轻松3步设置sublime text2/sublime text3的预览浏览器
你的位置：
[网页设计]无需插件，轻松3步设置sublime text2/sublime text3的预览浏览器
1，打开sublime 依次选择 tools & build system & new build system...&2，选择你喜欢的浏览器，右键 & 属性 把&目标&里的路径复制下来&{&"cmd": ["C:/Program Files (x86)/Mozilla Firefox/firefox.exe","$file"],"selector": ["text.html"]&}3，如图把代码里的路径替换成你刚才复制的路径&&3.1保存到Sublime Text 3\Packages\User路径下面，名字随便取都行&现在随便打开一个文件 然后按ctrl + b键 文件就会自动用你设置的浏览器打开&
、 、 、 、 、Sublime Text3设置快捷键让html文件在浏览器打开 - 简书
Sublime Text3设置快捷键让html文件在浏览器打开
我真的想说，这是我第一次如此执着的和一款软件这样死磕，耗时两个半天，终于安装好了，连我都开始有点佩服自己的耐心和执着了。哈哈～大家不要喷我哦，真的以前装软件要么管别人要下载好的，要么遇到问题找别人，实在不行搞不定了就放弃了，这真真的是第一次自己独立搞定的。所以，希望分享给大家，希望有用。1 首先下载安装sublime text3下载地址：/sublimetext3.html具体的安装步骤我就不赘述了，上面的下载地址里有详细的步骤，请大家参阅。这里要特别给大家推荐一个很好的下载的地方，史蒂芬周的博客
这个博客要强烈推荐，上面有很多常用工具的破解版下载地址，而且有非常详细的安装步骤，周大神真的是位非常好的人，为大家无私的分享了很多好东西，总之，非常感谢啦。2 package control的安装sublime text3可以安装很多插件，譬如我们要让html文件在浏览器打开，我们需要安装插件view in browser，但前提是我们需要安装package control。那么怎么安装package control呢？网上又很多的地方，我试了晕晕乎乎的。最终被我发现一个很好的网址推荐给大家https://packagecontrol.io/installation#Manual一 简单的安装办法使用Ctrl+`快捷键或者通过View-&Show Console菜单打开命令行，Sublime
Text3粘贴如下代码：import urllib.request,os, h = 'e5ee549c' + '8bc59f460fa163dafc88'; 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( 'http://packagecontrol.io/' + 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)如果顺利的话，此时就可以在Preferences菜单下看到Package Settings和Package Control两个菜单了。顺便贴下Sublime Text2 的代码：import urllib2,os, h = 'e5ee549c' + '8bc59f460fa163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else N urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else N 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')二、手动安装
可能由于各种原因，无法使用代码安装，那可以通过以下步骤手动安装Package Control：1.点击Preferences&Browse Packages菜单2.进入打开的目录的上层目录，然后再进入Installed Packages/目录3.下载并复制到Installed Packages/目录4.重启Sublime Text。我们已经向成功走了一大半了，就剩一小点问题了，嘿嘿，耐心～3 Sublime Text 3 配置浏览器预览路径 localhost在 Sublime Text 3 中，安装 SideBarEnhancements 侧边栏增强插件。1 SideBarEnhancements2 插件安装完成后，首先为 SideBarEnhancements 指定默认浏览器。打开 " Preference --& PackageSettings --& Side Bar --& Settings User-User"
3 在打开的文件中添加：{"default_browser": "chrome" //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari}默认的浏览器可以是列表中的任意一种，在这里我选择的是Chrome，可以根据自己的情况进行选择。
4 为 SideBarEnhancements 指定默认localhsot目录。在侧边栏任意文档上点击鼠标右键，选择 "Project --& Edit Preview URLs"
5 在打开的文件中添加如下内容：{"E:/WEBSITE/HelloWorld/":{"url_testing": "http://localhost:8008/","url_production": "/"}}1、"E:/WEBSITE/HelloWorld/" 是项目在磁盘中的路径，请修改为你的项目地址2、"url_testing" 是你本地的 localhost 地址3、 "url_production" 是项目线上地址请根据自己的情况进行修改。
6 为浏览器绑定热键。在 Sublime Text 3 中，打开 "Preference --& Package Settings --& Side Bar --& key Bindings-User"，在打开的文件中添加如下内容：[{"keys": ["alt+f12"],"command": "side_bar_open_in_browser","args": {"paths": [],"type": "testing","browser": ""}}]在此，我为浏览器绑定的热键是 "alt + F12"，可以根据自己的使用习惯进行修改。
7 至此，所有设置已经完成，可以在页面中按相应的热键，调用在配置文件中设置好的浏览器进行浏览。
哈哈～～～终于完了，是不是看的很累啊，我也确实装的很累，不过还好，问题解决了，我们可以按快捷键打开html文件了。真的是在网上查阅了很多，也借鉴了很多大神的方法，小女子在此谢过了。希望对大家有用。