sublime Text2技巧以及emmet(Zen Coding)快速編寫HTML/CS

zen coding 一種快速編寫HTML/CSS代碼的方法，已更名爲Emmet，而且搭建了一個新的網站：docs.emmet.io

Sublime Text 2安裝插件Emmet後，打開sublime Text2輸入代碼ul>li*4>a{Links$} ，按Tab鍵生成下面一段代碼：

 

Emmet 插件的安裝：

打 開Sublime Text 2，首先，咱們須要安裝Package Contro，ctrl+`調出命令行工具，輸入import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

回車便可。

點擊Preferences→Package Control，顯示如下彈窗，選擇Install Package

 

以後再輸入Emmet來找到要安裝的包，安裝後就可使用了。

 

使用Emmet編寫代碼時，須要遵循必定的縮寫規則：

• E
  元素名（div、p）；

• E#id
  帶Id的元素（div#content、p#intro、span#error）；

• E.class
  帶class的的元素（div.header、p.error）,id和class能夠連着寫，div#content.column

• E>N
  子元素（div>p、div#footer>p>span）

• E*N
  多項元素（ul#nav>li*5>a）

• E+N
  多項元素

• E$*N
  帶序號的元素

 

Sublime Text 中的其餘插件：

jQuery Package for sublime Text

若是你離不開jQuery的話，這個必備～～

Sublime Prefixr

Prefixr，CSS3 私有前綴自動補全插件，顯然也頗有用哇

JS Format

一個JS代碼格式化插件。

Placeholders

故名思意，佔位用，包括一些佔位文字和HTML代碼片斷，實用。

Sublime Alignment

用於代碼格式的自動對齊。傳說最新版Sublime 已經集成。

Tag
一些有代碼潔癖的程序猿很適合這個插件，HTML代碼格式化能使html代碼更加漂亮整潔。

JsMinifier

該插件基於Google Closure compiler，自動壓縮js文件。

Sublime CodeIntel

代碼自動提示

Bracket Highlighter

相似於代碼匹配，能夠匹配括號，引號等符號內的範圍。

GBK to UTF8

將文件編碼從GBK轉黃成UTF8，快捷鍵Ctrl+Shift+C

 

主要快捷鍵

Ctrl+L 選擇整行（按住-繼續選擇下行）

Ctrl+KK 從光標處刪除至行尾

Ctrl+Shift+K 刪除整行

Ctrl+Shift+D 複製光標所在整行，插入在該行以前

Ctrl+J 合併行（已選擇須要合併的多行時）

Ctrl+KU 改成大寫

Ctrl+KL 改成小寫

Ctrl+D 選詞 （按住-繼續選擇下個相同的字符串）

Ctrl+M 光標移動至括號內開始或結束的位置

Ctrl+Shift+M 選擇括號內的內容（按住-繼續選擇父括號）

Ctrl+/ 註釋整行（如已選擇內容，同「Ctrl+Shift+/」效果）

Ctrl+Shift+/ 註釋已選擇內容

Ctrl+Z 撤銷

Ctrl+Y 恢復撤銷

Ctrl+M 光標跳至對應的括號

Alt+. 閉合當前標籤

Ctrl+Shift+A 選擇光標位置父標籤對兒

Ctrl+Shift+[ 摺疊代碼

Ctrl+Shift+] 展開代碼

Ctrl+KT 摺疊屬性

Ctrl+K0 展開全部

Ctrl+U 軟撤銷

Ctrl+T 詞互換

Tab 縮進 自動完成

Shift+Tab 去除縮進

Ctrl+Shift+↑ 與上行互換

Ctrl+Shift+↓ 與下行互換

Ctrl+K Backspace 從光標處刪除至行首

Ctrl+Enter 光標後插入行

Ctrl+Shift+Enter 光標前插入行

Ctrl+F2 設置書籤

F2 下一個書籤

Shift+F2 上一個書籤