http://code.kpman.cc/2014/10/14/sublime-text-3-mac-指南/
gif 屏幕录制：http://recordit.co/ 或者 http://www.cockos.com/licecap/
http://blog.wpjam.com/m/emmet-grammar/
Sublime 前端开发工具
天下武功唯快不破，在项目开发中善于总结经验，提高开发效率。也是一名优秀的工程狮的必备技能。对于编程来说，一款顺手的IDE至关重要。而对于前段工程狮来说 Sublime Text就是一款非常有趣的IDE。善于发现和利用其优势，可以用来打造自己的前端开发工作流。
常用快捷键
| 快捷键 | 含义 |
|---|---|
| Ctrl+O | 快速开启整个文件夹 |
| Ctrl+W | 关闭当前页面 |
| Ctrl+N | 新建页面 |
| Ctrl+Shift+T | 重新开启刚关闭的页面 |
| Ctrl+Shift+V | 粘贴代码保持缩进 |
| Ctrl+F | 查找 |
| Ctrl+H | 替换 |
| Ctr+L | 选择当前行 |
| Ctr+D | 选中当前单词，继续敲可以选中多个 |
| Cmd+/ | 注释掉/取消注释 |
| Ctrl+} | 增加缩进 |
| Ctrl+Tab | 切换页面 |
| Ctrl+K,Ctrl+B | 显示隐藏sidebar |
| Shift-Ctrl-enter | 当前行之前开辟一行 |
| Ctrl+Shift+K | 删除整行 |
Shift+F11 (或者View --> Enter Distraction Free Mode)进入zen状态，单份文件变成全屏幕，且左边会自动缩排。 使用情境：当不需要切换页面时，如写blog。
Goto Anything
Ctrl+P
可以快速跳转到当前项目中的任意文件，可进行关键词匹配，支持模糊匹配.Ctrl+P+"@"+function name
此功能等同于Ctrl+R可以快速跳转到定义的function(css选择器).Ctrl + Shift + F
全文搜索，可以找出整个Project内的关键字.Ctrl+P+:+行数
此功能等同于Ctrl+G可以快速的跳到指定行数.
多行游标
产生多行游标的四种方法：
第一种方法：Ctrl+D ，使用 Ctrl+D 选择词的过程中可以使用 Ctrl+K 跳过本次选中。
第二种方法：Alt+F3 多选
第三种方法：Ctrl+A，Ctrl+Shift+L
第四种方法：使用 “shift+ 鼠标右键点击”可以产生多行游标.
Ctrl+J 合并行，Ctrl+Shift+K删除行，Ctrl+Shift+D重复行
Emmet
emmet是一款编辑器插件，是由Zen Coding的原作者就进行开发。
安装Emmet,使用sublime安装插件最便利的方式就是通过Package Control进行安装。如果还没装Package Control？不要紧，通过快捷键Ctrl+或者View>Show Console菜单打开控制台，输入以下Python执行代码：
import urllib.request,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib.request.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
安装完成后，通过Shift+Ctrl+P呼出面板，输入"pci"即可锁定"Package Control:Install Package"，回车之后可以看到一个列表，继续输入"emmet"即可找到插件，再次回车等待片刻就安装完成。
Emmet 的工作流程：打开 HTML 或 CSS 文件->按语法编写指令->摁下 TAB 键->生成！
ex: #page>div.logo+ul#navigation>li*5>a{Item $}
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
Sublime还有其他不少优秀的插件
- snippets以模板的方式编程
- advanceNewfile
- httpRequest
- nettus fetch
- sidebarenhancement
- 使用lint进行语法及风格校验