前端神器 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 變這樣啦。

view plaincopy to clipboardprint

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

更多使用方式可以看這邊。

對於選取器熟的朋友，在學習用 Emmet 寫一定可以快速上手，比如說兄弟選擇器 + ，只要打上 div+p+bq，就會變成：

view plaincopy to clipboardprint

1. <div></div>  
2. <p></p>  
3. <blockquote></blockquote>  

要打很多個重複的 tag ，只要用"*" 比如 ul>li*5，就會變成

view plaincopy to clipboardprint

1. <ul>  
2.     <li></li>  
3.     <li></li>  
4.     <li></li>  
5.     <li></li>  
6.     <li></li>  
7. </ul>  

要包文字的話用 {}，如 a{Click me}，就會變成

view plaincopy to clipboardprint

1. <a href="">Click me</a>  

像 input 有很多 attribute 這種，用起來也很開心，打上 input:radio、input:c，就會變成

view plaincopy to clipboardprint

1. <input type="checkbox" name="" id="">  
2. <input type="radio" name="" id="">  

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

反應：