เขียน HTML ให้เร็วปรี๊ดด้วย Zen Coding สำหรับ NetBeans IDE

Published on

Zen Coding เป็นปลั๊กอินที่จะช่วยทำให้เราเขียนโค้ด HTML กับ CSS ได้เร็วขึ้น(มากๆ)ครับ ตอนนี้ก็มี IDE และ Editor หลายตัวที่รองรับ (ทั้งเต็มรูปแบบ และบางส่วน) .. รายละเอียดมากกว่านี้ รบกวนไปอ่านที่เว็บผู้พัฒนาเอาเองละกันครับ ผมก็ไม่รู้จะอธิบายยังไงเหมือนกัน ลองดูสักนิดแล้วจะรู้ว่ามันสุดยอดมาก

สำหรับ IDE ตัวโปรดของผมอย่าง Netbeans IDE ก็มีปลั๊กอินสำหรับ Zen Coding เหมือนกันครับ สามารถดาวน์โหลดได้ ที่นี่ ครับ

วิธีติดตั้งก็แค่ ไปที่เมนู Tools > Options > ปุ่ม Import (ล่างซ้าย) > กด browse เลือกไฟล์ที่เราโหลดมา (.zip) > กด OK แล้วก็รีสตาร์ท NetBeans ครับ

image

น่าเสียดายที่ Zen Coding สำหรับ NetBeans นั้น ไม่ได้รองรับ Expand Abbreviation (ฟีเจอร์เทพๆที่เห็นในวิดีโอนั่นแหละครับ) แต่ก็ทดแทนด้วย Code Templates ที่เยอะมากๆ ซึ่งจะช่วยให้เราใช้งานร่วมกันฟีเจอร์ auto-complete ได้อย่างสนุกสนานยิ่งขึ้น .. สามารถเข้าไปดู code templates ได้ที่ Options > Editor > Code Templates > เลือก Language เป็น HTML ครับ

image

ก็จะพบกับลิสต์ยาวเหยียดของ code template ที่มีให้ครับ ผมเองก็จำไม่หมดหรอกครับ .. วิธีใช้งานก็แสนง่าย แค่พิมพ์โค้ดในส่วน Abbreviation เจ้าตัว NetBeans ก็จะแปลงเป็น Expanded Text ให้อย่างรวดเร็ว ตัวอย่างผมพิมพ์ html:4s หมายถึง ต้องการสร้างไฟล์ html 4 ที่ประกาศ doctype แบบ strict ..

image

แล้วพอกด tab Netbeans ก็จะแปลงโค้ดให้เราทันที พร้อม cursor ก็ไปอยู่ในตำแหน่งที่อำนวยความสะดวกให้เราสุดๆ (กด tab เลื่อนๆไปเรื่อยๆได้)

image

หรืออย่าง link:css

image

กด tab ปุ๊ป .. พร้อมพิมพ์ชื่อไฟล์ได้ทันที Open-mouthed smile

image

เท่าที่ดู มีแท็ก html ให้เกือบครบ รวมถึง html5 ด้วย ถ้าจำได้เยอะๆ หรือฝึกใช้คล่อง คิดว่าจะทำให้เขียนโค้ด html ได้เร็วขึ้นมากๆเลยล่ะครับ Winking smile

And the last click (กับเขามั่ง)

Share

(Edit on GitHub)