Sublime Text2 实现快捷键在浏览器中预览功能

自从开始使用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('\', '/')
break
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" }]
这样就搞定了:)那么我们可以测试一下了。打开一个html文件,按f12试试,没意外的话文件会在默认浏览器打开了。

Sublime Text 2 不完全使用手册

♦ 强大的多行选择和多行编辑:

  • 鼠标选中多行,按下 Ctrl+Shift+L (Command+Shift+L) 即可同时编辑这些行;
  • 鼠标选中文本,反复按 CTRL+D (Command+D) 即可继续向下同时选中下一个相同的文本进行同时编辑;
  • 鼠标选中文本,按下 Alt+F3 (Win) 或 Ctrl+Command+G(Mac) 即可一次性选择全部的相同文本进行同时编辑;
  • Shift+鼠标右键 (Win) 或 Option+鼠标左键 (Mac) 或使用鼠标中键可以用鼠标进行竖向多行选择;
  • Ctrl+鼠标左键(Win) 或 Command+鼠标左键(Mac) 可以手动选择同时要编辑的多处文本

♦ Package Control(绝不可错过的扩展包管理器)

Sublime Text 2 除了自身拥有无数实用功能和特性之外,它还能安装使用各种扩展/皮肤/配色方案等来增强自己。现在介绍的这个 Package Control 可以看做是一个ST2的扩展管理器,使用它,你可以用非常神奇、非常简单方便的方法去下载、安装、删除 Sublime Text 2 的各种插件、皮肤等,相信我,想更好地使用 ST2 绝对不能没有它!不过 ST2 本身并没有自带这个工具,我们需要自行安装它,方法很简单:

方法1:

[js]import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print ‘Please restart Sublime Text to finish installation'[/js]
复制上面代码到控制台执行即可。

方法2:

  1. 在 SublimeText2 的目录里面找到 Data > Installed Packages 的文件夹 (如没有请手动新建)
  2. 下载 Package Control.sublime-package 文件(地址自己搜索文件大小62kb)
  3. 将下载到的文件放进去 Installed Packages 里面
  4. 重新启动 Sublime Text 即可

♦ 常用快捷键

  • 快速搜索文件 —— CTRL + p(例如搜索routes/user/messages.js可以写r/u/m)
  • 行内注释 —— CTRL + /
  • 块注释 —— CTRL + SHIFT + /
  • 列选择模式 —— 鼠标右键+shift
  • 合并行 —— CTRL + J
  • 删除行 —— ctrl+shift+K
  • 复制行 —— ctrl+shift+D
  • 转到行 —— ctrl+G
  • 选择行 —— ctrl+L
  • 移动行 ——ctrl+shift+↑↓
  • 选择词 —— ctrl+D
  • 选择括号内内容 —— CTRL + SHIFT + M
  • 光标移动至括号内开始或结束的位置 —— CTRL + M
  • 选择标签及内容 —— ctrl + shift + A
  • 折叠代码 —— ctrl+shift+[
  • 设置书签 —— ctrl+F2
  • 词互换 —— Ctrl+T
  • 词改为大写—— Ctrl+KU
  • 词改为小写—— Ctrl+KL

♦ Emmet快捷键

  • 删除标签 —— ctrl+shift+;
  • 标签重命名 —— ctrl+shift+’
  • 套标签—— ctrl+alt+回车

♦ 推荐的部分插件:

  • Gits:可以轻松集成 GitHub
  • SFTP:直接编辑 FTP 或 SFTP 服务器上的文件
  • EMMET:这货对于前端的同学来说不得了,可以超快速编写HTML文件 (视频演示)
  • ConvertToUTF8:ST2只支持utf8编码,该插件可以显示与编辑 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的文件
  • Clipboard History:剪切板历史
  • WordPress:集成一些WordPress的函数,对于像我这种经常要写WP模版和插件的人特别有用!
  • HtmlTidy:清理与排版你的HTML代码
  • PHPTidy:整理与排版php代码
  • Bracket Highlighter:类似于代码匹配,可以匹配括号,引号等符号内的范围。
  • Prefixr:CSS3 私有前缀自动补全插件,显然也很有用哇
  • Sublime h3Intel:代码自动提示
  • JS Format:一个JS代码格式化插件。
  • Placeholders:故名思意,占位用,包括一些占位文字和HTML代码片段,实用。
  • YUI Compressor:压缩JS和CSS文件
  • Goto-CSS-Declaration:跳转到css文件该class的声明处,方便修改查看,如图下所示,注意对应的css文件要同时打开才行。