[转载]让Sublime Text2支持浏览器中预览

最新推荐文章于 2023-02-08 01:01:55 发布

原创最新推荐文章于 2023-02-08 01:01:55 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何为Sublime Text 2添加类似Editplus的浏览器预览功能，包括通过Python编写插件实现一键预览当前编辑的网页文件，并配置快捷键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从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


class OpenBrowserCommand(sublime_plugin.TextCommand):
   def run(self,edit):
      url = self.view.file_name()
      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。

本文链接：http://www.imququ.com/post/view_sublime-text-2_file_in_browser.html