让Sublime Text2支持在浏览器中预览

使用Sublime Text2进行前端代码编程,我们需要使用浏览器对代码进行预览,此时我们需要对Sublime Text2进行一下配置

步骤很简单,仅仅需要以下几步:

1、打开sublime后点击菜单中的Tools——>New plugin…

操作如图:


让Sublime Text2支持在浏览器中预览_第1张图片

打开后会出现如图所示的框:


让Sublime Text2支持在浏览器中预览_第2张图片

2、将上面的代码全部删除,然后写入以下代码:



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)



如图所示:


让Sublime Text2支持在浏览器中预览_第3张图片

【如果要直接使用如果要指定用什么浏览器预览,也可以将最后一行代码

webbrowser.open_new(url)

改成:

webbrowser.get('firefox').open_new(url)

当然我使用的是Firefox浏览器打开,你可以根据自己的喜好选择自己喜欢的浏览器对其进行预览。】

即如下图:


让Sublime Text2支持在浏览器中预览_第4张图片

将文件保存在Packages/User目录中(一般情况下默认的保存目录就是Packages/User),文件名可以随便,例如:openbrowse.py


3、为刚才的插件分配快捷键,点菜单Tools -> Command Palette...

操作如下:


让Sublime Text2支持在浏览器中预览_第5张图片
让Sublime Text2支持在浏览器中预览_第6张图片

在空白处输入:key Bindings - User,打开如下图:


让Sublime Text2支持在浏览器中预览_第7张图片


我们可以将其中的内容进行编辑,编辑为以下内容:


[

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

]


然后使用快捷键"ctrl+alt+shift+b"就可以打开在浏览器中打开了。

你可能感兴趣的:(让Sublime Text2支持在浏览器中预览)