Skip to main content

Askboon

Emmet VSCode Little Cheat Sheet

รวมเทคนิคการใช้งาน Emmet ใน VSCode เพื่อเพิ่มประสิทธิภาพในการเขียนโค้ดของเราครับ

เทคนิคการใช้งาน Emmet


การใส่ comment หลัง tag ปิดของ html โดยอัตโนมัติ

แก้ไขที่ไฟล์ settings.json ในส่วนของ user’s setting

1
2
3
4
5
6
7
8
"emmet.preferences":{
    "filter.commentAfter": "\n<!-- /[#ID][.CLASS] -->",
  },
"emmet.syntaxProfiles": {
    "html" : {
      "filters" :"html, c"
      }
  },

Emmet ที่ใช้บ่อย

div.abc

1
<div class="abc"></div>

div#abc

1
<div id="abc"></div>

div.abc#xyz

1
<div class="abc" id="xyz"></div>

li*3

1
2
3
<li></li>
<li></li>
<li></li>

ol>li*3

1
2
3
4
5
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

ol>li*3#item$

1
2
3
4
5
<ol>
    <li id="item1"></li><!-- /#item1 -->
    <li id="item2"></li><!-- /#item2 -->
    <li id="item3"></li><!-- /#item3 -->
</ol>

ข้อมูลเพิ่มเติม:
https://emmet.io/
https://www.youtube.com/watch?v=5guZjNDcVnA/