0
点赞
收藏
分享

微信扫一扫

Sublime text 2编辑器(本次用于backbone+jQuery_Mobile+html5的web前端开发)


1. Sublime是什么?

Sublime Text 2是一个轻量、简洁、高效、跨平台的编辑器,方便的配色以及兼容vim快捷键等各种优点博得了很多前端开发人员的喜爱本文推荐一些好用的插件和扩展。

Sublime Text 2基本上是共享软件,免费版和收费版基本无区别,只是偶尔会弹框让你去购买,这个基本不影响使用。如果你不了解它,也可以看下小众软件的这篇详细介绍。

2. 特色功能

  • 良好的扩展功能,官方称之为安装包(Package)。
  • 右边没有滚动条,取而代之的是代码缩略图,这个功能非常赞
  • 强大的快捷命令“可以实时搜索到相应的命令、选项、snippet 和 syntex, 按下回车就可以直接执行,减少了查找的麻烦。”
  • 即时的文件切换。
  • 随心所欲的跳转到任意文件的任意位置。
  • 多重选择(Multi-Selection)功能允许在页面中同时存在多个光标。
  • 支持 VIM 模式
  • 支持宏,宏是什么,简单地说就是把操作录制下来或者自己编写命令,然后播放刚才录制的操作或者命令。
  • 更新非常勤快,几乎每周都会有一个新版本杀出来

以下是使用:

3. 安装Sublime Text 2插件的方法:

(1)直接安装

安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages)。

(2)使用Package Control组件安装

    也可以安装package control组件,然后直接在线安装:

  1. 按Ctrl+`调出console
  2. 粘贴以下代码到底部命令行并回车:
    import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)

if not os.path.exists(ipp)

else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

  1. 重启Sublime Text 2。
  2. 如果在Perferences->package settings中看到package control这一项,则安装成功。

如果这种方法不能安装成功,可以到这里下载文件手动安装。

用Package Control安装插件的方法:

  1. 按下Ctrl+Shift+P调出命令面板
  2. 输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。

不爽的是,有的网络环境可能会不允许访问陌生的网络环境从而设置一道防火墙,而Sublime Text 2貌似无法设置代理,可能就获取不到安装包列表了。
好,方法介绍完了,下面是本文正题,

3. 一些有用的Sublime Text 2插件如下

(1)Zen Coding

这个,不解释了,还不知道ZenCoding的同学强烈推荐去看一下:《Zen Coding: 一种快速编写HTML/CSS代码的方法》。

PS:Zen Coding  for Sublime  Text 2插件的开发者已经停止了在Github上共享了,现在只有通过Package Control来安装。

(2)jQuery Package for sublime Text

如果你离不开jQuery的话,这个必备~~

(3)Sublime Prefixr

Prefixr,CSS3 私有前缀自动补全插件,显然也很有用哇

(4)JS Format

一个JS代码格式化插件。

(5)SublimeLinter

一个支持lint语法的插件,可以高亮linter认为有错误的代码行,也支持高亮一些特别的注释,比如“TODO”,这样就可以被快速定位。(IntelliJ IDEA的TODO功能很赞,这个插件虽然比不上,但是也够用了吧)

(6)Placeholders

故名思意,占位用,包括一些占位文字和HTML代码片段,实用。

(7)Sublime Alignment

用于代码格式的自动对齐。传说最新版Sublime 已经集成。

(8)Clipboard History

粘贴板历史记录,方便使用复制/剪切的内容。

(9)DetectSyntax

这是一个代码检测插件。

(10)Nettuts Fetch

如果你在用一些公用的或者开源的框架,比如 Normalize.css或者modernizr.js,但是,过了一段时间后,可能该开源库已经更新了,而你没有发现,这个时候可能已经不太适合你的项目了,那么你就要重新折腾一遍或者继续用陈旧的文件。Nettuts Fetch可以让你设置一些需要同步的文件列表,然后保存更新。

(11)JsMinifier

该插件基于Google Closure compiler,自动压缩js文件。

(12)Sublime CodeIntel

代码自动提示

(13)Bracket Highlighter

类似于代码匹配,可以匹配括号,引号等符号内的范围。

(14)Hex to HSL

自动转换颜色值,从16进制到HSL格式,快捷键 Ctrl+Shift+U

(15)GBK to UTF8

将文件编码从GBK转黄成UTF8,快捷键Ctrl+Shift+C

(16) Git

该插件基本上实现了git的所有功能。

其他相关

主要快捷键列表:

Ctrl+L 选择整行(按住-继续选择下行)
Ctrl+KK 从光标处删除至行尾
Ctrl+Shift+K 删除整行
Ctrl+Shift+D 复制光标所在整行,插入在该行之前
Ctrl+J 合并行(已选择需要合并的多行时)
Ctrl+KU 改为大写
Ctrl+KL 改为小写
Ctrl+D 选词 (按住-继续选择下个相同的字符串)
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)
Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
Ctrl+Shift+/ 注释已选择内容
Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+M 光标跳至对应的括号
Alt+. 闭合当前标签
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+KT 折叠属性
Ctrl+K0 展开所有
Ctrl+U 软撤销
Ctrl+T 词互换
Tab 缩进 自动完成
Shift+Tab 去除缩进
Ctrl+Shift+↑ 与上行互换
Ctrl+Shift+↓ 与下行互换
Ctrl+K Backspace 从光标处删除至行首
Ctrl+Enter 光标后插入行
Ctrl+Shift+Enter 光标前插入行
Ctrl+F2 设置书签
F2 下一个书签
Shift+F2 上一个书签

具体功能和使用教程看这几篇:

  • Sublime Text 2 入门及技巧。
  • ZenCoding in Sublime Text 2 关于 ZenCoding 参考小众的介绍:Zen Coding – 超快地写网页代码
  • Sublime Text 2 实用快捷键[Mac OS X]
  • Sublime Text 2 右键菜单中的实用选项
  • 关于Sublime Text2的一些记录
  • http://www.ithome.com/html/soft/19940.htm(颇为全)

举报

相关推荐

0 条评论