2012年12月12日

Sublime Text 2 安裝 Zen Coding 外掛

Zen Coding 是用來加速 HTML 開發的程式撰寫輔助工具,它利用類似 CSS Selector 的概念,讓開發者只要鍵入少許語法,就可以自動快速產生對應的 HTML 代碼。

Sublime Text 2 是跨平台(支援 Windows、Linux、Mac OS X)的文字編輯器,深受許多開發者喜愛。

Sublime Text 2 只要簡單地安裝外掛就能享受 Zen Coding 的極速快感,為了方便安裝我們同時需要 Sublime Package Control 這個套件,它利用 Repositories 的概念提供大量 Sublime 適用的外掛!

Zen Coding(Set of plugins for HTML and CSS hi-speed coding)
http://code.google.com/p/zen-coding/

Sublime Package Control
http://wbond.net/sublime_packages/package_control

安裝步驟:

打開 Sublime Text 2(以下簡稱 Sublime),按下「ctrl(control) + `」叫出 console 畫面,輸入以下安裝指令。

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'


安裝好之後重新啟動 Sublime。

在選單列找到 Preferences / Package Control 執行。


輸入「install package」。



按下 ENTER 後,會列出可用的套件清單,再輸入「zencoding」。



按下 ENTER 就會開始安裝,完成後會顯示一份 README 說明。

再次重新啟動 Sublime,編輯一個 .html 檔案。以下是兩個簡易的 Zen Coding 用法說明。

輸入「cc:ie6」並按下 TAB 鍵,會自動產生:

<!--[if lte IE 6]>
<![endif]-->

輸入「table>tr*3>td*4」並按下 TAB 鍵,會自動產生:

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

如此一來,開發者寶貴的生命又可以節省不少分秒。

1 則留言:

  1. 按照您的方法,但是好像沒有啟動成功?
    能說詳細一點?

    回覆刪除

lyhcode by lyhcode
歡迎轉載,請務必註明出處!