เขียน HTML เร็วฟ้าผ่าด้วย Emmet

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

วันนี้จะพาไปรู้จักกับ Emmet กันครับ

Emmet คืออะไร

ถ้าจะให้พูดกันสั้นๆ Emmet นั้นคือการเขียน HTML ด้วยคำสั่งลักษณะเดียวกับ CSS Selector ครับ  ตัวอย่างเช่นเราพิมพ์คำสั่งดังนี้

div.container>div.row>div.col

จากนั้นเรากด tab บรู้ม! มันก็จะแปลงออกมาเป็นโค้ด HTML แบบนี้ให้ในทันที

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

ง่ายมั้ยล่ะ?

จะใช้ Emmet ต้องทำอย่างไร?

Emmet นั้นเป็นวิธีการพิมพ์โค้ดอย่างหนึ่ง  ซึ่ง Text Editor ชื่อดังทั้งหลายต่างรองรับไม่ทางใดก็ทางหนึ่ง  อย่างใครใช้ SublimeText อาจจะต้องติดตั้งแพ็คเกจเพิ่ม (ไม่ได้ใช้มานานแล้ว  มันมีในตัวยังหว่า?) หรือถ้าใครใช้ Visual Studio Code นั้นจะสามารถเริ่มใช้งาน Emmet ได้ในทันที

ทั้งนี้ทั้งนั้น  แนะนำให้ใช้ Visual Studio Code กันครับ  มันดีจริงๆ ให้ตายสิ >> โหลดที่นี่

บทความนี้จะยึดการใช้ Emmet บน Visual Studio Code เป็นหลัก

โดยปกติแล้ว Emmet จะเริ่มทำงานเมื่อเราเปิดไฟล์ HTML ขึ้นมาเท่านั้น  สำหรับไฟล์ใหม่ก็ให้เราเซฟไฟล์เปล่าๆ เป็น .html ก่อน  หรือใครใช้ VSCode ก็กด F1 แล้วพิมพ์ Change Language Mode แล้วเลือกเป็น HTML ก็พร้อมใช้ทันที

วิธีพิมพ์คำสั่ง Emmet เบื้องต้นคือพิมพ์คำสั่งให้เสร็จแล้วกด Tab แล้วโปรแกรมจะแปลงคำสั่งเป็นโค้ด HTML ให้อัตโนมัติ  เช่น  พิมพ์ html:5 แล้วกด Tab ก็จะได้โครง HTML5 ออกมาดังนี้

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

การเปิดแท็ก กำหนดคลาส ไอดี และแอททริบิวต์อื่นๆ

ในส่วนนี้จะเหมือนกับการเขียน CSS Selector เลย  หลักๆ คือให้พิมพ์ชื่อแท็กก่อน  แล้วตามด้วยคำสั่งดังนี้

  • ใช้ . ในการกำหนดคลาส (ถ้าจะกำหนดหลายคลาสก็ . ต่อกันไปเรื่อยๆ)
  • ใช้ # ในการกำหนดไอดี
  • ใช้ [] ในการกำหนดแอททริบิวต์อื่นๆ โดยกำหนดเป็น [attr=”value”] เขียนต่อไปหลายๆ อันเพื่อกำหนดหลายแอททริบิวต์
  • ใช้ {} ในการใส่ข้อความภายในแท็กนั้นๆ

ตัวอย่างเช่นโค้ดดังนี้

a.author[rel="nofollow"]{My Link}

เมื่อกด Tab ก็จะได้ผลลัพธ์ออกมาดังนี้

<a href="" class="author" rel="nofollow">My Link</a>

และถ้าสังเกตุจะพบว่าพอกด Tab แล้ว  มันจะเลื่อนเคอร์เซอร์ไปยังแอททริบิวต์ href ให้อัตโนมัติด้วย!

หรืออีกตัวอย่างหนึ่ง

div#main-slide.slide-container.no-padding[data-driver="slider"][data-source="rest-api"]{Hello World}

ก็จะออกมาแบบนี้

<div id="main-slide" class="slide-container no-padding" data-driver="slider" data-source="rest-api">Hello World</div>

ข้อดีอีกอย่างหนึ่งคือ Emmet จะสามารถเดาแท็กได้อัตโนมัติด้วย  อย่างเช่นถ้าเราเขียน .container ขึ้นมาลอยๆ แล้วกด Tab ตัว Emmet ก็จะตีความว่านั้นคือ div นะ  หรือถ้าเขียน ul แล้วตามด้วยชื่อคลาสเปล่าๆ เช่น

ul>.item
<ul>
	<li class="item"></li>
</ul>

ตัว Emmet ก็จะตีความว่าคลาสเปล่าๆ นั้นคือ li

การเขียนซ้อนแท็กหลายๆ ชั้น

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

ยกตัวอย่างสำหรับใครที่ใช้ Bootstrap จะต้องเจอแท็กซ้อนไปเรื่อยๆ  อย่างเช่นต้องเปิดด้วย .container ตามด้วย .row ถึงจะกำหนด .col ได้  ซึ่ง Emmet เราก็สามารถเขียนได้โดยใช้เครื่องหมาย > ต่อไปได้เลย  เช่น

div.container>div.row>div.col

ก็จะได้ผลลัพธ์ออกมาแบบนี้

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

และเมื่อเราเขียนจริงๆ  เราก็มักจะไม่ได้กำหนดแค่คอลัมน์เดียวแบบนี้  แต่จะมีการกำหนดแบ่งเป็นหลายคอลัมน์ด้วย  ซึ่งในกรณีที่ทุกคอลัมน์นั้นมีค่าต่างๆ เหมือนกันหมด (เช่นจะเป็น div.col-3 จำนวน 4 คอลัมน์) เราสามารถใส่ * ตามด้วยจำนวนที่ต้องการได้เลยดังนี้

div.container>div.row>div.col-3*4

ผลลัพธ์ก็จะจะได้ div.col-3 จำนวน 4 คอลัมน์แบบนี้

<div class="container">
	<div class="row">
		<div class="col-3"></div>
		<div class="col-3"></div>
		<div class="col-3"></div>
		<div class="col-3"></div>
	</div>
</div>

แล้วถ้าคอลัมน์ไม่เหมือนกันล่ะ? เช่นจะกำหนด col-8 กับ col-4 ในกรณีแบบนี้เราจะใช้เครื่องหมาย + ครับ  เช่น

div.container>div.row>div.col-8+div.col-4
<div class="container">
	<div class="row">
		<div class="col-8"></div>
		<div class="col-4"></div>
	</div>
</div>

อนึ่งเราสามารถใช้ทั้ง + และ * ร่วมกันได้ด้วย  ยกตัวอย่างเช่นเราต้องการ col-6 หนึ่งคอลัมน์  และ col-2 อีกสามคอลัมน์  ก็เขียนแบบนี้

div.container>div.row>div.col-6+div.col-2*3
<div class="container">
	<div class="row">
		<div class="col-6"></div>
		<div class="col-2"></div>
		<div class="col-2"></div>
		<div class="col-2"></div>
	</div>
</div>

ท่าพิเศษอีกอย่างหนึ่งคือเราสามารถใช้เครื่องหมาย $ ในการรันเลขได้ด้วย  ทั้งนี้จะรันเลขได้เฉพาะเมื่อใช้ร่วมกับ * เท่านั้น  เช่น

div.container>div.row>div.col-2*6.item-$
<div class="container">
	<div class="row">
		<div class="col-2 item-1"></div>
		<div class="col-2 item-2"></div>
		<div class="col-2 item-3"></div>
		<div class="col-2 item-4"></div>
		<div class="col-2 item-5"></div>
		<div class="col-2 item-6"></div>
	</div>
</div>

นอกจากนี้เราจะพบว่าเมื่อเรากด Tab แล้ว  โปรแกรมจะเลื่อนเคอร์เซอร์ไปอยู่ตรงที่น่าจะต้องพิมพ์ต่อไปให้อัตโนมัติ  และเราสามารถสั่งเลื่อนเคอร์เซอร์ไปยังจุดที่จะต้องพิมพ์จุดต่อไป (เช่นใน div ถัดไป) ได้ด้วยการกด Tab

การจัดกลุ่ม

ถึงจุดนี้ถ้าหากเราลองพิมพ์ * ลงไปที่ div.row แล้วตามด้วย div.col ข้างในแบบนี้

div.container>div.row*3>div.col-4*3

จะพบว่ามันจะออกมาเป็น div.row จำนวน 3 อันที่ข้างในมี div.col-4 จำนวน 3 อันเหมือนกันเป๊ะ แบบนี้

<div class="container">
	<div class="row">
		<div class="col-4"></div>
		<div class="col-4"></div>
		<div class="col-4"></div>
	</div>
	<div class="row">
		<div class="col-4"></div>
		<div class="col-4"></div>
		<div class="col-4"></div>
	</div>
	<div class="row">
		<div class="col-4"></div>
		<div class="col-4"></div>
		<div class="col-4"></div>
	</div>
</div>

ซึ่งในความเป็นจริง  เราอาจจะต้องการให้ .row ตัวแรกและตัวที่สองมี 2 คอลัมน์ และ .row ตัวที่สามที่ 3 คอลัมน์ก็เป็นได้

ในกรณณีแบบนี้เราจะใช้การจัดกลุ่มเข้ามาช่วยครับ  โดยจะเป็นการเขียนโค้ดเอาไว้ในวงเล็บ  แล้ว + ตามด้วยกลุ่มอื่น  เช่น

div.container>(div.row>div.col-6*2)+(div.row>div.col-4*3)
<div class="container">
	<div class="row">
		<div class="col-6"></div>
		<div class="col-6"></div>
	</div>
	<div class="row">
		<div class="col-4"></div>
		<div class="col-4"></div>
		<div class="col-4"></div>
	</div>
</div>

แน่นอนว่าเราสามารถใช้ร่วมกับ * ได้ด้วยเช่นกัน  อย่างในตัวอย่างนี้ กลุ่ม ( ) แรกจะมี *2 ติดอยู่  แล้วค่อย + ตามด้วย ( ) กลุ่มหลัง

div.container>(div.row>div.col-6*2)*2+(div.row>div.col-4*3)
<div class="container">
	<div class="row">
		<div class="col-6"></div>
		<div class="col-6"></div>
	</div>
	<div class="row">
		<div class="col-6"></div>
		<div class="col-6"></div>
	</div>
	<div class="row">
		<div class="col-4"></div>
		<div class="col-4"></div>
		<div class="col-4"></div>
	</div>
</div>

ตัวอย่างยาวๆ สักชิ้น

สำหรับใครที่บ้าพลัง  อยากลองเขียน HTML ด้วย Emmet แบบยาวๆ ประมาณนี้

  • เปิด .container มี .row สองอัน  แบ่งใส่กลุ่ม ( ) ไว้
  • .row แรกเป็น slider เข้าไปมี div อันนึง  จากนั้น ul>li เป็นภาพแต่ละภาพ  กำหนดคลาสรันตามลำดับ
  • .row ที่สอง  แบ่งเป็นสองคอลัมน์  คอลัมน์แรกมี h1 พร้อมข้อความ Hello World ตามด้วย ul>li ที่มีลิงค์ข้างในทั้งหมด 5 อัน
  • .row ที่สอง  มีคอลัมน์เปล่าๆ ขนาด col-3 อีกสองคอลัมน์

ซึ่งแน่นอนว่ามันจะเป็นโค้ด HTML ที่ยาวจนพิมพ์กันมือหงิก  แต่ถ้าเราเขียนด้วย Emmet จากข้างต้นจะได้นิพจน์คำสั่งหน้าตางงๆ แบบนี้

div.container>(div.row>div.col>div#slider[data-driver="slider"]>ul>li.image-$*5>img.slide-item)(div.row>(div.col-6>h1{Caption}+ul>li*5>a[href="view.php?id=$"]{View item $})+(div.col-3*2))

และเมื่อกด Tab ก็จะได้ HTML ออกมาแบบนี้

<div class="container">
	<div class="row">
		<div class="col">
			<div id="slider" data-driver="slider">
				<ul>
					<li class="image-1"><img src="" alt="" class="slide-item"></li>
					<li class="image-2"><img src="" alt="" class="slide-item"></li>
					<li class="image-3"><img src="" alt="" class="slide-item"></li>
					<li class="image-4"><img src="" alt="" class="slide-item"></li>
					<li class="image-5"><img src="" alt="" class="slide-item"></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-6">
			<h1>Caption</h1>
			<ul>
				<li><a href="view.php?id=1">View item 1</a></li>
				<li><a href="view.php?id=2">View item 2</a></li>
				<li><a href="view.php?id=3">View item 3</a></li>
				<li><a href="view.php?id=4">View item 4</a></li>
				<li><a href="view.php?id=5">View item 5</a></li>
			</ul>
		</div>
		<div class="col-3"></div>
		<div class="col-3"></div>
	</div>
</div>

สะดวกป่ะล่ะ!

พิเศษกับ Lorem Ipsum

สำหรับใครที่ยังไม่รู้จักว่า Lorem Ipsum คืออะไร  ลองไปอ่านได้จากเว็บ Designil

Emmet จะรองรับการสร้าง Lorem Ipsum ในตัวด้วย (อย่างน้อยๆ ก็ใช้ VSCode ตัวอื่นยังไม่ได้ลองครับ) ง่ายๆ เพียงแค่พิมพ์ lorem แล้วกด Tab ก็จะได้ Lorem Ipsum ออกมาให้หนึ่งย่อหน้า!

lorem
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus soluta iure sequi temporibus quidem deserunt blanditiis non! Nam vero et neque exercitationem temporibus nisi corrupti dolore tempore, vel ipsum.

นอกจากนี้เราสามารถกำหนดความยาวให้กับ Lorem ของเราได้ด้วยการใส่ จำนวนคำ ลงไป  เช่น

lorem5
Lorem ipsum dolor sit amet.

แน่นอนว่า * ก็ใช้ได้ด้วย  ถ้าเราต้องการ Lorem Ipsum จำนวน 10 บรรทัด (หรือ 10 ย่อหน้า  แล้วแต่จะกำหนดความยาว) ก็ใช้ * ต่อท้ายเข้าไป

lorem5*10
Lorem ipsum dolor sit amet.
Autem minima optio adipisci illum!
Vero reiciendis animi beatae quod!
Officiis ratione tempora temporibus quo.
Facilis quia tenetur eaque mollitia.
Molestiae ut consequuntur qui sunt.
Magni facilis eaque id quia?
Enim quia explicabo natus inventore?
Animi sequi earum repellat illum.
Nulla possimus nihil soluta eveniet?

แน่นอนว่ามันสามารถเอาไปใช้ร่วมกับคำสั่งอื่นๆ ได้ด้วย  เช่นเราจะทำ li ที่มี lorem อยู่ข้างในจำนวน 5 อัน  ก็ใช้คำสั่งดังนี้

ul>lorem10*5
<ul>
	<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, quam.</li>
	<li>Nemo perspiciatis cupiditate, nihil iste qui fugit. Necessitatibus, excepturi corrupti.</li>
	<li>Optio dicta dolorum sint magni cum officia tempora, distinctio voluptas?</li>
	<li>Officiis soluta assumenda, accusantium repellendus quas nisi delectus quis sunt.</li>
	<li>Repellendus consectetur eligendi eum neque. Cumque incidunt unde necessitatibus reprehenderit.</li>
</ul>

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

ทีนี้ก็ขอให้สนุกกับการเขียน HTML ด้วย Emmet ครับ

อ้อ  ใครอยากดูคำสั่งอื่นๆ ของ Emmet (เช่น input ประเภทต่างๆ) สามารถเข้าไปดูได้ใน Emmet Cheat Sheet นี้

Posted by Jirayu

WordPress Developer ที่พอมีประสบการณ์อยู่บ้าง วันไหนไม่ทำงานอยู่บ้านว่างๆ ก็นั่งเลี้ยงแมว

Comments