2013年3月4日 星期一

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

Zen coding 改名為 emmet



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

Emmet 官方網址

Sublime text 2 安裝 emmet

輸入底下指令就可以安裝完成 emmet,
command + shift + p
input `package install`
input `emmet`

Vim 安裝 emmet

vim 安裝方式可以參考底下連結說明,
https://github.com/mattn/zencoding-vim
可以參考之前介紹使用 coffee plugin for vim 安裝方式

使用方式

在 emmet 網站裡面也有介紹如何開發 html,以 html5 樣板開發為例,在編輯區輸入內容如下,
html:5_
_ 為游標位置,在 sublime text 2 預設按鍵為 『tab』,在 vim 底下使用方法則為,『ctrl + y + ,』接著就會產生簡易的 html5 架構,內容如下,
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

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

後記

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

沒有留言:

張貼留言

Facebook