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:xt tab后表明XHTML文档类型；
    • html:4s tab后表明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。

 

以上。

转载于:https://www.cnblogs.com/libinfs/p/5212750.html