Emmet — the essential toolkit for web-developers

Emmet เป็น Plugins ตัวใหม่ ที่สามารถทำให้ DEV เขียน Code ได้ไวกว่าเดิม(ถ้าจำ alias มันได้หมดนะ – -”)

สิ่งที่เด่นของมันก็คือเช่น ถ้า คุณใส่ border-radius ซึ่งเป็น css ตัว Emmet นี้ จะสามารถ Generate Css ของ border-radius

ออกมาเป็น -webkit-border-radius,-moz-border-radius,-ms-border-radius,-0-border-radius ให้ด้วย สะดวกมั๊ยล่ะทีนี้ 🙂

คำสั่งลัดๆของ Emmet จะถูกเรียกว่า Abbreviations ซึ่งสามารถใช้ได้กับ HTML และ CSS

มาดูคำสั่งเพื่อให้เข้าใจง่ายๆ สมมุติคุณอยากได้ Text List บน HTML ของคุณ อาจจะต้องเขียนดังนี้

<ul class=”generic-list”>
<li class=”item”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li>
<li class=”item”>Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li>
<li class=”item”>Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</li>
<li class=”item”>Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</li>
</ul>

แต่ Emmet สามารถเขียนได้ใน บรรทัดเดียวคือ ul.generic-list>lorem10.item*4
ดูจากคำสั่งแล้วดูที่ผลลัพธ์ก็คงไม่ยากที่จะแกะนะครับ 🙂

ซึ่งเจ้าตัวนี้ ทำออกมารองรับ Editorไม่กี่สายพันธ์เท่านั้น

Codelobster ที่ผมใช้ประจำดันไม่มีในหน้าดาวน์โหลด แต่!!! Codelobster เหนือกว่านั้น
ถึงไม่ Support แต่ก็จัดให้ได้ มันเอาความสามารถของ Emmet มาเป็น Plugin ด้วยไม่ต้องรอทาง Emmet เลย
Emmet Plugin ของ Codelobster มีอยู่ใน Version 4.6 ขึ้นไปนะครับ ^^
(สำหรับ 4.6 ตัว Emmet ยังทำอะไรเพียงสร้างโครงสร้างนะครับ จะใส่ text ในนั้นยังไม่ได้ เช่น a{hello world} จะไม่ออกถูกต้องครับ)

ดาวน์โหลดได้ที่ http://emmet.io/download/ เลือกให้ตรงกับ Editor ที่คุณใช้อยู่ด้วยนะครับ

 

Leave a Reply