sublime 前端开发工具

http://code.kpman.cc/2014/10/14/sublime-text-3-mac-%E6%8C%87%E5%8D%97/

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进行语法及风格校验