前端神器 Emmet 介紹

以往在寫網頁的時候,可以用程式跑迴圈還好,但如果是要做 protoype 的時候,沒有用 js 輔助的話光是複製重複的 html 的煩死了,即使用 js 寫也不見得方便,剛好看到有人在討論 Emmet 這個工具,看了一下介紹,覺得應該是個好用的東西,就裝來試試看,試用的結果發現果然是好物,於是來介紹一下。

外掛網址: Emmet

主要要先把外掛下載後裝到慣用的開發工具上,支援的列表在這邊,我會用到的 Dreamweaver 跟 Sublime 都有就夠了。

就用 sublime 來說明,首先要安裝 Emmet 到 Sublime,下載後解壓縮把東西放到 C:\Users\[你的登入者名稱]\AppData\Roaming\Sublime Text 2\Packages ,或是使用 Package Control 直接安裝。

然後就是見證奇蹟的時刻啦,在 sublime 打上這段 nav>ul>li,接著按 Tab 鍵。

然後你就會看到 html 變這樣啦。

  1. <nav>  
  2.     <ul>  
  3.         <li></li>  
  4.     </ul>  
  5. </nav>  

更多使用方式可以看這邊

對於選取器熟的朋友,在學習用 Emmet 寫一定可以快速上手,比如說兄弟選擇器 + ,只要打上 div+p+bq,就會變成:
  1. <div></div>  
  2. <p></p>  
  3. <blockquote></blockquote>  

要打很多個重複的 tag ,只要用"*" 比如 ul>li*5,就會變成
  1. <ul>  
  2.     <li></li>  
  3.     <li></li>  
  4.     <li></li>  
  5.     <li></li>  
  6.     <li></li>  
  7. </ul>  

要包文字的話用 {},如 a{Click me},就會變成
  1. <a href="">Click me</a>  

像 input 有很多 attribute 這種,用起來也很開心,打上 input:radioinput:c,就會變成
  1. <input type="checkbox" name="" id="">  
  2. <input type="radio" name="" id="">  

真的是超威的,有興趣的可以玩玩看。

留言