SublimeText2 编辑器使用小结
用SublimeText 2进行前端开发也有一段时间了，所谓“工欲善其事必先利其器”，前几日对照着网易课程又重新温习总结了一下有关SublimeText编辑器的使用方式，有所收获，在此进行一次小小的总结。
1.前端开发工具的类别
前端开发工具可以分为两种类别：
（1）文本编辑器：SublimeText，Notepad++，EditPlus等；
（2）IDE(集成开发环境)：WebStorm，Intellij IDEA，Eclipse等；
前者小而轻，后者大而全。
2.SublimeText编辑器的优势
（1）跨平台，启动快；
（2）支持多行选择；
（3）拥有众多实用插件；
（4）Snippets功能快速添加实用代码片段；(注意文件名一定要用sublime-snippets结尾)
（5）支持VIM兼容模式；
3.SublimeText常用快捷键
（1）查找：Ctrl + P +
：（查找行）Ctrl+G
@（查找具体符号）Ctrl+R （查找所有CSS选择器！）
#（查找关键字）Ctrl+；
注意：Mac下部分快捷键不同。
（2）打开命令面板：Ctrl + Shift + P；
（3）多行选择：Ctrl + D；Ctrl + Shift + L；Alt+F3（选中全部）
（4）跳过所选项：Ctrl + K；
MAC环境下：
（1）折叠代码：Alt + CMD + [
（2）打开代码：Alt + CMD + ]
（3）跳至下一行：CMD + ENTER
（4）浏览器打开：Fn + F12
（5）CSS排序：Fn + F5
（6）创建代码环境： 打开命令面板 + SSH（Set Syntax HTML）
（7）切换标签页：CMD + Shift + [
4.SublimeText常用插件
（1）PackageControl 一个用于方便管理插件的插件，可对插件进行添加，更新，卸载；
（2）Emmet 一个用于简写HTML，CSS代码的插件；
（3）DocBlockr 一个方便产生函数注释的插件；
（4）SideBarEnhancements 一个右键菜单增强工具的插件；
（5）Terminal 一个可以在Sublime中直接打开命令行终端的插件；
（6）CSSComb 一个控制CSS排序的插件，配合Fn + F5使用；
5.SublimeText常用插件使用方式
（1）Emmet
Emmet提供了便利的HTML与CSS值缩写方式，给开发工作带来了极大的便利。
HTML常用的值缩写有：
① 声明文档类型
-
-
html:5或者!tab后表明HTML5文档类型；html:xttab后表明XHTML文档类型；html:4stab后表明HTML4文档类型下的严格模式；
-
② 快速添加标签属性和内容
-
-
- "."号用来添加元素class属性，如p.nav；
- "#"号用来添加元素id属性，如p#banner；
- "[]"号用来添加元素任意属性，如a[href=#]；
- "{}"号用来添加标签内容，如h1{hello world}；
-
③ 快速建立标签结构
-
-
- "+"号用来表示同级标签，如h1+h2；
- ">"号用来表示父子标签，如h1>p；
- "^"号用来将其后的标签提升一个层级，这个貌似比较难以理解，我来解释一下，若p>span+h1这种写法，实际上得到的效果是p标签内嵌套span和h1两个标签，这样其实嵌套错误，但如果写成p>span^h1，h1就会被提升一个层级与p标签并列；
- "（）"用来进行标签分组，使用（）的标签会被认为是一组，如(ul>li*4)>p；
- "*"号用来重复标签数量，在其后放上需要的次数，如ul>li*4；
-
CSS常用的值缩写有：
① 一般属性值缩写
-
-
- w100,h100等于width:100px;height:100px；
- 类似以上，一般属性都可以根据特定字母进行简写；
- 需要注意的是，数字后默认单位为px,也可以通过快捷键进行单位控制：
- p为%；
- e为em；
- x为ex；
-
② @font-face
-
-
- 只要输入@f即可自动生成@font-face属性声明样式；
- 输入@f+可生成复杂版本的样式声明；
-
③ 浏览器私有属性的简写
-
-
- 键入trf即可生成各浏览器私有属性前缀；
- 各浏览器私有属性的简写：
w→-webkit-m→-moz-s→-ms-o→-o-
-
其他快捷键：
除了上述值缩写外，Emmet还提供了一些很有用的快捷键：
① 标签删除与改写
-
-
- 删除：⌘’ / Shift+Ctrl+;(对应ST2/ST3);
- 改写：⇧⌘K / Shift+Ctrl+’；
-
② 数学计算
只需要键入算式，如3+7，再使用 ⇧⌘Y（苹果） / Shift+Ctrl+Y（Windows）即可求出答案，省去了打开计算器和心算的麻烦。
③ 快速添加图片的尺寸与大小
在图片的url中使用快捷键SHIFT+ CRTL + I（苹果）即可自动生成图片的宽高数据。
以上是Emmet插件的一些基本用法，更多内容可参考这篇文章http://caibaojian.com/emmet.html，需要说明的是，不同的ST版本，不同的操作平台的快捷键是不同的，我所罗列的快捷键经过ST2,MAC测试。
（2）DocBlockr
一款很方便添加函数注释的插件，只需要键入"/**"即可快捷方便的生成规范化的函数注释，但插件未添加作者和时间的信息，如需添加还请移步这篇文章http://www.cnblogs.com/huangtailang/p/4499988.html。
暂时先写到这里吧，更多SublimeText实用插件请点击这里继续阅读http://blog.csdn.net/lifeiaidajia/article/details/19397097。
以上。
