Emmet ที่จะทำให้การสร้างเว็บ ลื่นไหล Tab เดียวจอด...

เคยประสบปัญหาเวลา เราเขียนเว็บกันมั้ยครับ เราต้องค่อย ๆ มานั่งพิมพ์ ทีล่ะตัว ๆ ไปเรื่อย ๆ Web Developer หลาย ๆ คนเลยเริ่มไปหาพวกโปรแกรม Code snippet มาใช้ ซึ่งผมก็เป็นเหมือนกัน แต่ผลปรากฏว่า เราก็ต้องมาสร้าง snippet เพื่อใช้เองอีก ทำให้เสียเวลามาก ๆ
ซึ่งแน่นอนว่า สมัยนี้เรามี Editor มากมายกายกองให้เราใช้ ไม่ได้มีแค่ Dreamweaver หรือ Notepad เหมือนเมื่อก่อนแล้ว และอีกอย่าง สมัยนี้เราใช้ IDE ตัวเดียว แต่สามารถเขียนได้หลาย ๆ ภาษาได้ในโปรแกรมเดียวด้วยล่ะ
ซึ่งอย่างที่ผมกำลังใช้อยู่ตอนนี้คือ Sublime Text ก็เป็น IDE สารพัดประโยชน์ดีจริง ๆ ใช้เป็น Default Text Editor แทน TextEdit บน OSX เลยทีเดียว กลับมาที่ Emmet กันต่อ
Emmet เป็น Plugin ตัวนึง ที่ทำให้เราเขียนโค๊ตได้อย่างลื่นไหลมาก ๆ เราสามารถที่จะทำได้มากกว่าที่ Code snippet ทั่ว ๆ ไปทำได้อีกด้วยล่ะ ! !

Editor ที่ Emmet รองรับ

เนื่องจาก ผู้สร้าง Emmet ต้องการให้มันใช้ได้กับหลาย ๆ IDE เขาเลยทำออกมาเป็น Plugin เพื่อให้ Developer สามารถดึงมาใช้ได้กันเยอะ ๆ (ผมชอบเวอร์ ~~ )

Sublime Text 3 (Version 3 อย่างเดียว Version 2 ใช้ไม่ได้นะ หรืออาจจะใช้ได้ แต่เคยลองแล้วไม่ได้อะ)
Eclipse
Vim หรือที่บางคนเรียก Vi ผ่าน Package Manager ได้เลย
มีอื่น ๆ อีก แต่ผมไม่เคยใช้ เลยไม่กล้าพูด

เรามาลองใช้กันดีกว่า

เรื่องแรกคือ Abbreviations ถือเป็น Core ของตัว Emmet เลยทีเดียว ไม่งั้นเราจะใช้ทำไมเนอะ

div>h1

อย่างเช่น เราต้องการ Div Tag แล้วข้างใน Div Tag จะมี h1 อยู่ข้างใน เราก็พิมพ์ตามด้านบน พอกด Tab ก็จะออกมาเป็น

<div>
   <h1></h1>
</div>

เรามาลองอะไรที่ซับซ้อนกว่านี้หน่อย

html>(head>title{this is test.})+body

มันก็จะออกมาเป็น

<html>
   <head>
     <title>This is test.</title>
   </head>

   <body>

   </body>
</html>

อีกอย่าง ถ้าเราใส่ปีกกาจะเป็นการเพิ่ม Content ลงไปใน Tag ที่เรากำหนดไว้ เช่น ตัวอย่างข้างบน ที่เราใส่ title{This is test} มันก็คือการใส่ This is test ลงไปใน Tag title นั่นเอง

Class & ID

บางครั้ง ไม่สิ ทุกครั้งสิ เราก็ต้องมากำหนด Style ด้วย CSS ผ่าน Class หรือ ID ถ้าเราจะกำหนด Class เราก็แค่ใส่ จุด แล้วตามด้วยชื่อ Class ที่เราต้องการ เช่น

div.container

เมื่อเรากด Tab เราก็จะเป็น

<div class = "container"> </div>

ส่วน ID ก็เช่นกัน แต่เปลี่ยนจาก จุด เป็น # เช่น

div#section1

ก็จะกลายเป็น

<div id = "section1"> </div>

แล้ว Properties อื่น ๆ ละ ?

เราสามารถเติม Properites อื่น ๆ ได้โดยใช้ [ ] แล้วข้างในก็เติม Properites ที่เราต้องการเข้าไป เช่น เราต้องการ Properites enable แล้วให้ค่ามันเป็น True ที่ Tag Link

div[enable=true]

พอเรากด Tab ก็จะกลายเป็น

<div enable = "true"></div>

แต่แค่นี้คงยังไม่มันส์ แล้วถ้าเกิดว่าเราจะต้องเขียนอะไรซ้ำ ๆ กันเยอะ ๆ อย่างเช่นเขียน li สัก 100 อันล่ะ (สมมุตินะ) ถ้าเขียนเองคงตายแน่นอน ถึงจะใช้ Sublime กด Cmd + Shift + D ก็ต้องกดไปอีก 99 ครั้ง ไหน ๆ เราก็ใช้ Emmet แล้ว ก็ใช้มันให้เป็นประโยชน์กันเถอะ

ul>li*100

ผลที่ออกมาก็จะเป็น ul แล้วข้างในเป็น li 100 อัน เยอะมากก......!!@#@#%#%
แต่นอกจากที่เราจะใช้ตัวคูณเพื่อเสก Tag ตามจำนวนที่เราต้องการแล้ว เรายังสามารถรันตัวเลขลงไปได้ด้วย เช่นใน Tag li เมื่อกี้ผมต้องการกำหนด ให้ใน Tag li มี Class ชื่อ ls แล้วตามด้วยเลข Tag ที่เท่าไหร่ ใน Emmet เราสามารถที่จะรันตัวเลขแบบอัตโนมัติก็ได้โดยใช้ $ เช่น

ul>li.item $$$*100

ผลที่ได้ก็จะออกมาเป็น

<ul>
   <li class = "item 001"></li>
   <li class = "item 002"></li>
             .
             .
             .
   <li class = "item 100"></li>
</ul>

ได้กันเป็นแบบนี้เลยทีเดียว เจ๋งมาก ! !
กับอีก Feature นึงคือ การ Generate Lorem ipsum ได้ด้วยล่ะเช่น

p>lorem

มันก็จะออกมาได้เป็น

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolores sit natus modi aut aliquid numquam fuga, suscipit impedit pariatur molestias optio neque quis blanditiis harum, a! Possimus, asperiores, animi.</p>

แต่ถ้าเราต้องการ ให้มัน Generate ออกมาสัก 4 คำก็ได้โดยการใส่เลขจำนวนคำหลัง lorem เช่น เราต้องการให้มัน Generate ออกมา 4 คำก็ต้องเขียนไปว่า lorem4 เช่น

p>lorem4

ผลก็จะได้ออกมาเป็น

<p>Lorem ipsum dolor sit.</p>

เพิ่มเติม เล็กน้อย

ในไฟล์ html ของเรา อย่างน้อยก็จะต้องมีพวก Tag head, body อะไรที่เป็นพื้นฐาน ซึ่งถ้าเราต้องพิมพ์ html>head>title... อะไรก็คงเยอะ มันเลยมี Snippet ของตัว Emmet เข้ามาช่วยอีก นั่นคือ html:5 พอกด Tab เท่านั้นแหละ รู้เลย !!! มาหมด

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>

</body>
</html>

จริง ๆ แล้วนอกจากที่เอามาให้ดูในนี้แล้ว มันยังมีทางฝั่ง CSS ด้วย แต่ไม่ขอเอามาพูดและ เพราะเริ่มเยอะไปมากแล้ว สามารถเข้าไปดูที่เหลือได้ใน Document ของ Emmet ได้เลยที่ http://docs.emmet.io เขาจะบอกหมดเลยว่า มันมีอะไรบ้าง บอกเลยว่า เยอะมาก ๆ ผมยังจำได้ไม่หมดเลย (กำลังหัดใช้อย่างจริงจังมากอยู่ด้วยล่ะ)
จากที่เห็น ว่ามันทำให้เราเขียนเว็บได้ง่ายมาก ๆ มากกว่าเมื่อก่อนที่เราค่อย ๆ พิมพ์ทีล่ะตัวเยอะเลย ซึ่งจริง ๆ แล้วทั้งหมดนี้ก็เป็นเพียงแค่เครื่องมือช่วยทำให้เราเขียนโค๊ตได้สะดวกขึ้นเท่านั้นเอง แต่ที่สำคัญที่สุด ก็อยู่ฝีมือเราจริง ๆ แล้วล่ะครับ