❗ 本文最后更新于 4619 天前,文中所描述的信息可能已发生改变,请谨慎使用。
从Editplus转到Sublime Text2的同学,不知道有没觉得它少了个很有用的功能:view in browser(ctrl+b)。平时写点小demo时,那种一秒钟切浏览器看下效果,一秒后再切回来改下代码的爽快感,是我坚守Editplus多年的一大重要原因。
Editplus提供的ctrl+b功能,好用的原因有二:一是内置了webbrowser,切换时不用离开编辑器;二是对于本地调试的web站点,配置规则后自动将编辑的文件映射为URL来预览,这对预览php等服务端文件非常有用。Mac下的Coda,也有类似的预览功能,但我一直用不习惯它,暂不考虑。
Sublime Text2支持用Python编写插件,我很想自己动手解决这个问题,但估计短期内我没可能研究出如何创建webbrowser嵌进ST2里,于是打算偷点懒,直接调系统默认浏览器预览。下面是我研究出来的详细步骤(想直接使用插件的同学请直接看最后):
一、点击菜单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()
flag = False
for path, domain in url_map.items():
if url.startswith(path):
url = url.replace(path, domain).replace('\\', '\/')
flag = True
break
if not flag:
url = 'file://' + url
webbrowser.open_new(url)
代码只有几行,大部分还是参考的这个帖子,相信大家一眼就能看明白,不解释了。
将文件保存到Packages/User目录(Packages可通过菜单里的Browser Packages...打开),文件名随意,如open_browser.py。插件部分完工了。
二、接下来,为刚才的插件分配快捷键。点菜单Tools -> Command Palette...,或者shift+cmd+p,打开命令集,选择“key Bindings - User”打开个人快捷键配置,输入下列内容:
[{ "keys": ["ctrl+shift+b"], "command": "open_browser" }]
这就是要做的全部工作,可以测试下了。打开一个html文件,ctrl+shift+b试试,没意外的话文件会在默认浏览器打开了。url_map里配置的站点目录到URL的映射应该也是可用的。
PS:如果要指定用什么浏览器预览,也可以将最后一行代码改成这样:
webbrowser.get('safari').open_new(url)
webbrowser具体支持get哪些浏览器,可以通过webbrowser._browsers查看。只是,ST2默认使用的是python2.6,在我的mac os下,python2.6找不到任何可用的浏览器。2.7的webbrowser.py里多了一段patch,可以找到firefox和safari。好在,对我来说,能在默认浏览器预览已经够用了。
先写到这里,如果我哪天找到了更好的方法,再来补充。
update @ 2012-02-23:在月影的帮助下,加上了预览前先保存的功能,正文里代码已更新,并已提交到github,可以直接下载使用,https://github.com/qgy18/sublime-view-in-browser。
update @ 2013-06-30:今天sublime text3开始了beta公测,st3使用的是python3。经测试,本文代码依然可用,只是如果url不是http协议,需要加上file://,正文里代码已更新。
本文链接:https://imququ.com/post/view-sublime-text-2-file-in-browser.html,参与评论 »
--EOF--
发表于 2012-02-20 01:36:58,并被添加「Sublime」标签。查看本文 Markdown 版本 »
专题「开发工具」的其他文章 »
- 开始使用 Vagrant (Aug 23, 2015)
- 搭建 ngrok 服务实现内网穿透 (Apr 19, 2015)
- Chrome 32 开发者工具的几个变化 (Jan 19, 2014)
- Genymotion:超赞的安卓虚拟机 (Nov 28, 2013)
- 打造 Mac 下的完美开发环境 (Oct 09, 2013)
- 如何在 Mac 下使用 Fiddler (Sep 13, 2013)
- 看懂 Fiddler 的瀑布图 (Sep 04, 2013)
- firebug1.12 更新 (Aug 29, 2013)
- [小Tip]用好浏览器的控制台 (Aug 11, 2013)
- firebug1.10更新 (Jul 16, 2012)
Comments
Waline 评论加载中...