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


作為一個前端,有一款好的開發利器是必不可少的,editplus、notepad++都是不錯的工具,體積輕巧,啟動迅速(dw太浮腫了)。Sublime Text2是一款跨平台的編輯器,是一款具有代碼高亮、語法提示、自動完成且反應快速的編輯器軟件,不僅具有華麗的界面,還支持插件擴展機制。

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 上一個書簽

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM