Emmet in Visual Studio Code

เราอาจจะคุ้นเคยกับการใช้ Snippet ซึ่งเป็นตัวช่วยที่ทำให้ workflow ของการเขียน code เราเร็วขึ้น หลักการทำงานของมันก็คือการเก็บโค้ดที่เราใช้บ่อยๆ เอาไว้ แล้วเรียกใช้ด้วย shortcut สั้นๆ แต่การจะใช้ snippet ได้นั้น โดยทั่วไปเราจะต้องสร้างเอง และบันทึกไว้ก่อนที่จะเรียกมาใช้ หรือต้องติดตั้ง extension สำหรับ snippet ของภาษานั้นๆ

Emmet ดียังไง ?

Emmet ก็คือ snippet เหมือนกันค่ะ ช่วยให้เราเขียน code ได้เร็วขึ้น สำหรับคนที่ใช้ VS Code ถ้าต้องการใช้ Emmet เราไม่ต้องลง extension เพิ่ม สามารถไปลองใช้แบบในตัวอย่างข้างล่างนี้ได้เลย

จากตัวอย่างด้านบน ถ้าเราพิมพ์ .wrapper>#list>ul>li.item$*2 เมื่อเรากด tab หนึ่งครั้ง Emmet ก็จะ Generate code ออกมาให้ในแบบที่โชว์ข้างล่างนี้ค่ะ

<div className="wrapper">
  <div id="list">
    <ul>
      <li className="item1">
      </li>
      <li className="item2">
      </li>
    </ul>
  </div>
</div>

เราสามารถใช้ Emmet ใน VS code กับไฟล์ html haml pug slim jsx xml xsl css scss sass less stylus handlebars php

ส่วนตัวแล้วจะใช้ CLASS attributes (.), Child (>), Siblings (+) บ่อยมาก เมื่อใช้บ่อยๆ คล่องๆ มันก็สนุกดีเหมือนกันค่ะ 😃

ID and CLASS attributes (#, .)

#header
<div id="header"></div>

.title
<div class="title"></div>

form#search.wide
<form id="search" class="wide"></form>

p.class1.class2.class3
<p class="class1 class2 class3"></p>

Child (>)

nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

Siblings (+)

div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

หากใครที่ใช้ VS code อยู่ และสนใจลองใช้ Emmet สามารถไปดูรายละเอียดเพิ่มเติมได้ที่ Emmet in Visual Studio Code และดู Cheat sheet เพื่อดูโพยการเขียน Emmet ได้เลยค่ะ