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進行語法及風格校驗