armno.in.th logo

เพิ่ม Code Snippet ให้ Sublime Text 2

Armno's avatar
Published on November 19th, 2011
By Armno P.

หลังจากใช้งาน Sublime Text 2 มาได้สักพัก พอคุ้นเคยแล้วก็จะเริ่มหาวิธีการเพิ่ม code snippet ไว้ใช้เอง (แบบที่เคยทำบน NetBeans) เพื่อช่วยให้การเขียนโค้ดนั้นสะดวกรวดเร็วยิ่งขึ้นครับ

สำหรับการเพิ่ม code snippet ให้กับ Sublime Text 2 นั้นก็ง่ายๆ เลย เริ่มจากไปที่เมนู Tools > New Snippet ก็จะเจอหน้าจอ default ตามรูปข้างล่างครับ

default snippet

ดูลักษณะแล้วเป็น markup คล้ายๆ XML ประกอบด้วย 3 อวัยวะด้วยกันคือ content, tabTrigger, และก็ scope

ตัวอย่างการใช้งาน

สมมุติว่าผมไปเจอตัวสร้าง dummy text น่ารักๆ อย่าง CupcakeIpsum แล้วถูกใจ อยากสร้าง snippet เก็บไว้ใช้เอง ผมก็ไปสร้าง dummy text จากในเว็บ แล้วก็ก๊อปปี้มาวางอย่างในรูป พร้อมกำหนด tabTricker ให้เป็นคำว่า cupsum .. นั่นหมายความว่า ถ้าผมพิมพ์แค่ cupsum แล้วกด tab มันก็จะยืดๆ เป็นข้อความยาวๆ ให้อัตโนมัติ .. สำคัญก็คือ วางข้อความระหว่าง <![CDATA[ กับ ]] นะครับ

เพิ่มโค้ด snippet ใน Sublime Text

จากนั้นก็เซฟ (Ctrl + s) ตั้งชื่อไฟล์เป็นอะไรก็ได้ แต่นามสกุลไฟล์ต้องเป็น .sublime-snippet นะครับ

Save snippet

เรียบร้อยแล้ว เพียงเท่านี้เราก็จะมี snippet ประจำตัวอย่างง่ายๆ กับเขาแล้ว

ใส่ตัวแปรให้กับ snippet

ในส่วน content นอกจากเราจะใส่เป็นข้อความธรรมดาได้แล้ว เรายังสามารถกำหนดให้มันรับค่าจากเราได้อีกตัว (เหมือนเป็นตัวแปร) ส่วนนี้ก็คล้ายๆ แบบที่ Netbeans ทำได้ครับ .. ตัวอย่างเช่นผมอยากได้ snippet สำหรับเป็นเมนู navigation ในเว็บไซต์ง่ายๆ (จริงๆ โค้ดแบบนี้ใช้ Zen Coding น่าจะไวกว่า)

ใส่ตัวแปรใน snippet

ตัวแปรใน content จะมี pattern เป็นแบบ ${ตัวเลข:ข้อความ default} โดยที่เรากด tab ตัว cursor มันก็จะเลื่อนไปเรื่อยๆ ตามตัวเลขครับ นอกจากนี้ เรายังใส่ตัวแปรซ้ำกันหลายๆ ที่ เพื่อให้ไม่ต้องพิมพ์หลายครั้งก็ได้นะครับ

ใส่ตัวแปรใน snippet

แค่นี้เราก็จะได้ code snippet มาช่วยให้เราเขียนโค้ดไวขึ้นแล้วล่ะครับ

เพิ่มเติม

Tags:

Related posts