[教學] zen coding (emmet) 安裝使用方式

Zen coding 改名為 emmet

Zen coding 身為一個 web developer 不應該繼續花時間在浪費重複的事情上,這個好用的專案已經改名成 Emmet, 網址為,

Emmet 官方網址

Sublime text 2 安裝 emmet

輸入底下指令就可以安裝完成 emmet,

command + shift + p<br></br>inputpackage install<br></br>inputemmet<br></br>

Vim 安裝 emmet

vim 安裝方式可以參考底下連結說明,

https://github.com/mattn/zencoding-vim<br></br>

可以參考之前介紹使用 coffee plugin for vim 安裝方式

使用方式

在 emmet 網站裡面也有介紹如何開發 html,以 html5 樣板開發為例,在編輯區輸入內容如下,

html:5_<br></br>

_ 為游標位置,在 sublime text 2 預設按鍵為 『tab』,在 vim 底下使用方法則為,『ctrl + y + ,』接著就會產生簡易的 html5 架構,內容如下,

<br></br><html lang="en"><br></br><br></br> <meta charset="UTF-8"><br></br> <title></title><br></br><br></br><br></br><br></br><br></br><br></br>

接著游標就會直接跳至 body 中央,即可立即開發雛形頁面,開發似乎變得更為方便,
其他詳細的使用方法,可以參考 emmet 語法說明,

後記

現在已經有許多好用的工具,可以讓前端工程師縮短開發時間,很多工具在不知道或者沒有人分享的狀況下,總是會自己重新刻一套,或者使用『複製』、『貼上』繁瑣的工作重新持續著。
就自己使用 Emmet 的經驗上,在產品的雛形開發上是十分方便的工具,如果大家有什麼類似的工具,或者前端輔助工具,也歡迎大家分享。

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn