Emmet คืออะไร วิธีติดตั้ง และตัวอย่างการใช้งาน

Emmet คืออะไร

Emmet คือ Plugin สำหรับช่วยเขียน Syntax ที่ทรงพลังและใช้งานง่าย สำหรับโปรแกรม Code Editor ที่ช่วยในการเขียน Syntax ของภาษา HTML, XML, XSLT และ CSS ที่เป็นประโยชน์สำหรับนักพัฒนาเว็บอย่างมาก ช่วยให้นักพัฒนาสามารถเขียนและแก้ไขโค้ด HTML และ CSS ได้อย่างรวดเร็วโดยใช้วิธีการพิมพ์โค้ดอย่างย่อ และเมื่อมีการ Trigger โค้ดส่วนนั้นก็จะขยายเป็นโค้ดแบบเต็มโดยอัตโนมัติ

ข้อได้เปรียบหลักอย่างหนึ่งของ Emmet คือ ความสามารถในการประหยัดเวลาในการเขียนโค้ด แทนที่จะต้องเขียนโค้ด HTML และ CSS บรรทัดยาวๆ ด้วยตนเอง นักพัฒนาสามารถเขียนดค้ด แบบย่อ ที่จำง่ายและพิมพ์ได้อย่างรวดเร็ว ตัวอย่างเช่น การพิมพ์ "div.wrapper>p#card" จะขยายเป็นองค์ประกอบ div ที่มีองค์ประกอบ p ซ้อนอยู่ภายในโดยอัตโนมัติ แบบนี้ "<div class="wrapper"><p id="card"></p></div>" วิธีนี้ช่วยประหยัดเวลาได้มากสำหรับนักพัฒนาที่เขียนโค้ด HTML และ CSS บ่อยๆ

div.wrapper>p#card //จากนั้นกดปุ่ม Tab
// โค้ดที่ได้

<div class="wrapper">
    <p id="card"></p>
</div>

Emmet ยังใช้งานร่วมกับโปรแกรม Code Editor ได้หลากหลาย รวมถึงโปรแกรมยอดนิยม เช่น Jetbrains, Sublime Text, Visual Studio Code, Atom,  และอื่นๆ อีกมากมาย ซึ่งหมายความว่านักพัฒนาสามารถติดตั้ง Plugin Emmet ใน Editor ที่คุณใช้งานอยู่ และใช้งานมันได้ได้อย่างง่ายดาย

นอกจากนี้ Emmet ยังเสนอฟีเจอร์มากมายที่ช่วยให้นักพัฒนาเขียนและแก้ไขโค้ดได้อย่างมีประสิทธิภาพมากขึ้น ตัวอย่างเช่น มีฟีเจอร์ "Wrap with Abbreviation" ที่ช่วยให้นักพัฒนาสามารถตัดข้อความที่เลือกด้วยองค์ประกอบ HTML หรือ CSS ได้อย่างรวดเร็ว นอกจากนี้ยังมีคุณลักษณะ "Update Tag" ที่ช่วยให้นักพัฒนาอัปเดตชื่อแท็กขององค์ประกอบที่เลือกได้อย่างรวดเร็ว โดยไม่ต้องเขียนองค์ประกอบทั้งหมดใหม่ด้วยตนเอง

โดยสรุป Emmet เป็นเครื่องมือที่มีประโยชน์สำหรับเหล่านักพัฒนาเว็บเป็นอย่างมาก โดย Plugin จะช่วยให้วิธีการเขียนและแก้ไขโค้ดที่รวดเร็วและมีประสิทธิภาพมากขึ้น ความเข้ากันได้กับโปรแกรมแก้ไขข้อความที่หลากหลายและคุณสมบัติที่หลากหลายทำให้มันเป็นสิ่งที่ต้องมีสำหรับนักพัฒนาเว็บทุกคน

วิธีการติดตั้ง Emmet Extension/Plugin

คุณสามารถคลิกเข้าไปดูวิธีติดตั้งโดยอ้างอิงจาก Editor ที่คุณใช้งานโดยเข้าไปที่ตาม Link นี้ Click วันนี้เราจะมาลองยกตัวอย่างวิธีการติดตั้ง Emmet Extension บน VSCode กับ PHPStorm ให้เพื่อน ๆ ได้ดูกัน

วิธีการเปิดใช้งาน Emmet Extension บน VSCode

  1. ไปที่เมนู File > Preference > Settings
  2. ค้นหา "emmet.triggerExpansionOnTab" ในช่องค้นหา จากนั้น Checkbox ตามรูป
  3. ตัวอย่างการใช้งาน คุณจำเป็นต้องใช้งาน Emmet ร่วมกับ file extension ที่ตัวส่วนขยายรองรับ เช่น test.html หรือ test.php เป็นต้น

วิธีการเปิดใช้งาน Emmet Extension บน PHPStrom

  1. ไปที่เมนู File >  Settings จากนั้นไปที่ Tab Plugins ค้นหาคำว่า "Emmet Everywhere" จากนั้นกด Install
  2. ตัวอย่างการใช้งาน คุณจำเป็นต้องใช้งาน Emmet ร่วมกับ file extension ที่ตัวส่วนขยายรองรับ เช่น test.html หรือ test.php เป็นต้น

ตัวอย่าง วิธีการใช้งาน Emmet Extension/Plugin

โดยทั่วไปแล้วเราจะใช้ Emmet ร่วมกับ ปุ่ม Tab

ตัวอย่างที่ 1: เราจะทำการสร้าง div หลัก และ สร้าง tag p ภายใน div โดยระบุ class และ id ให้กับ element ทั้ง 2 ตัว

div.wrapper>p#card //จากนั้นกดปุ่ม Tab

<div class="wrapper">
    <p id="card"></p>
</div>

ตัวอย่างที่ 2: เราจะทำการสร้าง form หลัก และสร้าง div, ul และ li ซ้อนลงไปตามลำดับ

  • เครื่องหมาย * ใช้สำหรับบอกจำนวนว่าเราต้องการสร้าง Element นั้นเป็นจำนวนเท่าใด
  • เครื่องหมาย $ ใช้ใส่จำนวนนับให้กับ Property ที่เราสร้างเช่น สร้าง .hello$*3 คือสร้าง Element 3 ตัวและใส่จำนวนนับให้ด้วย
form.test>div.wrap*3>ul>li.hello$*3 //จากนั้นกดปุ่ม Tab
<form action="" class="test">
    <div class="wrap">
        <ul>
            <li class="hello1"></li>
            <li class="hello2"></li>
            <li class="hello3"></li>
        </ul>
    </div>
    <div class="wrap">
        <ul>
            <li class="hello1"></li>
            <li class="hello2"></li>
            <li class="hello3"></li>
        </ul>
    </div>
    <div class="wrap">
        <ul>
            <li class="hello1"></li>
            <li class="hello2"></li>
            <li class="hello3"></li>
        </ul>
    </div>
</form>

เป็นยังไงกันบ้างคะ สำหรับบทความเรื่อง Emmet คืออะไร วิธีติดตั้ง และตัวอย่างการใช้งาน ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

CSS @media print คือ วิธีใช้ window.print ปริ้น หน้าจอ HTML

CSS @media print คือ วิธีใช้ window.print ปริ้น หน้าจอ HTML

ดูเพลิน Admin - 04 ม.ค. 66
แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

ดูเพลิน Admin - 23 ธ.ค. 65
Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

ดูเพลิน Admin - 21 ธ.ค. 65
Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

ดูเพลิน Admin - 26 ธ.ค. 65
Debug CSS @media print วิธีดีบั๊ก print preview

Debug CSS @media print วิธีดีบั๊ก print preview

ดูเพลิน Admin - 04 ม.ค. 66

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...

let value = 147/32; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.59 Result = 5let value = 147/33; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.454 Result = 4