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

Published on October 20th, 2010

By Armno P.

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

Zen Coding Project Homepage
Zen Coding: A Speedy Way to Write HTML/CSS Code(Smashingmagazine)
Learn how to write lightnigh-fast code in 4 minutes (วิดีโอ, Nettuts)

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

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

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

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