从 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 文件输入下列内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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”打开个人快捷键配置,输入下列内容:

1
[{ "keys": ["ctrl+shift+b"], "command": "open_browser" }]

这就是要做的全部工作,可以测试下了。打开一个 html 文件,ctrl+shift+b 试试,没意外的话文件会在默认浏览器打开了。url_map 里配置的站点目录到 URL 的映射应该也是可用的。

PS:如果要指定用什么浏览器预览,也可以将最后一行代码改成这样:

1
webbrowser.get('safari').open_new(url)

webbrowser 具体支持 get 哪些浏览器,可以通过 webbrowser._browsers 查看。只是,ST2 默认使用的是 python2.6,在我的 mac os 下,python2.6 找不到任何可用的浏览器。2.7 的 webbrowser.py 里多了一段 patch,可以找到 firefox 和 safari。好在,对我来说,能在默认浏览器预览已经够用了。

本文地址 https://shaoshilei.com/2014-01/let-sublime-text2-support-browser-preview.html