รู้จักกับ Code snippet

คำว่า snippet แปลว่าเศษชิ้นส่วนของอะไรบางอย่าง Code snippet จึงหมายถึง เศษชิ้นส่วนของโค้ด หรือ ชุดของโค้ดนั่นเอง แล้วหน้าตาของไอ Code snippet ใน Sublime Text 2 มันเป็นยังไงล่ะ?  ลองดูรูปด้านล่างครับ

code snippet

จะพบว่าเมื่อลง Sublime Text 2 แล้วจะมีชุดของ Snippet พื้นฐานติดตั้งมาด้วย ดังแสดงในภาพข้างต้นเลยครับ

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

ตัว Snippet (จากนี้จะแทนชุดของโค้ดว่า Snippet นะครับ) ที่ Sublime แนะนำ จะขึ้นกับนามสกุลของไฟล์ด้วย เช่น ถ้าเป็นไฟล์ html ก็จะมี Snippet: html ซึ่งใช้สำหรับสร้าง tag พื้นฐานของการเขียนเว็บ ถ้าเป็นไฟล์ php ก็จะมี Snippet: if else สำหรับการสร้าง condition if-else ครับ

การเรียกดู Snippet ทั้งหมดของ Sublime ทำได้โดยการกดเมนู Tools > Snippets… จะขึ้นหน้าต่างดังภาพด้านล่างสำหรับใช้ค้นหา snippet ครับ ด้านซ้ายจะเป็นชื่อของ Snippet ด้านขวาของหน้าต่างจะเป็นวิธีเรียกใช้แต่ละ snippet

snippet

ทดลองใช้ Snippet: html ด้วยการพิม html แล้วกด tab จะได้ชุดของโค้ดตามรูปด้านล่างครับ

html snippet

สร้าง Code Snippet ใช้เอง

เพื่อความสะดวกสบายขั้นสูงสุดในการเขียนโค้ด เราจะทำการสร้าง Snippet ให้กับบางคำสั่งหรือบางชุดของโค้ดที่เราจำเป็นต้องเรียกใช้งานบ่อยๆ ตัวอย่างเช่น ผู้แต่งเขียนเว็บด้วย bootstrap เป็นหลัก จึงต้องการสร้าง Snippet ของคลาส container (เป็นคลาสสำหรับกำหนดความกว้างสูงสุดของแต่ละขนาดหน้าจอ) มีขั้นตอนดังต่อไปนี้ครับ

เตรียมชุดโค้ดที่ต้องการ เตรียมชุดของโค้ดที่เราต้องการนำมาสร้างเป็น Snippet ในที่นี้ผู้แต่งต้องการโค้ดด้านล่างครับ

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

สร้างไฟล์ Snippet ไปที่เมนู Tools > New Snippet… จะเป็นการสร้างไฟล์ Snippet ใหม่ ตอนแรกจะมีหน้าตาแบบนี้ครับ

snippet

การแก้ไขไฟล์ Snippet ไฟล์ Snippet ที่เราสร้างขึ้นมาใหม่จะมี format คล้ายๆไฟล์ xml (xml คืออะไร) tag ด้านนอกสุดจะเป็น <snippet> ด้านในจะมีแท็กต่างๆสำหรับกำหนดคุณสมบัติของ Snippet ดังนี้

Content

<content> เป็นแท็กที่เก็บข้อมูล output (ชุดโค้ดที่เราต้องการ) โดยชุดโค้ดของเราต้องอยู่ใน <![CDATA[ชุดโค้ดของเรา]]> ในทีนี้เราจะได้

<content><![CDATA[<div class="container">${1}</div>]]></content>

*Note: ${1} ${2} ใช้สำหรับการกำหนดตำแหน่งที่ cursor โฟกัสหลังจากสร้าง Snippet (เปลี่ยนตำแหน่งโดยการกด tab) จากตัวอย่างคือเราต้องการเพิ่มโค้ดในแท็ก container เราจึงสร้าง ${1} ไว้ด้านใน <div class=”container> แท็ก

tabTrigger

<tabTrigger> เป็นแท็กที่กำหนดชุดสตริงที่ใช้เรียกใช้ชุดโค้ด snippet ของเรา เช่น จากตัวอย่าง ผู้แต่งต้องการให้แนะนำ Snippet ดังกล่าวด้วยการพิมว่า “container” ก็จะได้

<tabTrigger>container</tabTrigger>
scope

<scope> เป็นแท็กที่ใช้กำหนดนามสกุลไฟล์ ที่จะให้แนะนำชุดโค้ด Snippet เช่น จากตัวอย่าง ผู้แต่งต้องการให้แนะนำ Snippet ดังกล่าวในไฟล์นามสกุล .html เท่านั้น ก็จะได้

<scope>text.html</scope>

*Note: หากเราไม่กำหนดแท็กนี้ ชุดโค้ด Snippet ของเราจะถูกแนะนำในทุกภาษาเวลาเราพิม keyword ในที่นี้คือคำว่า “container”

หลังจากปรับแต่งไฟล์ Snippet เรียบร้อยแล้ว จะได้ไฟล์หน้าตาแบบนี้ครับ

<snippet>
  <content><![CDATA[<div class="container">${1}</div>]]></content>
  <tabTrigger>container</tabTrigger>
  <scope>text.html</scope>
</snippet>

การบันทึกไฟล์ Snippet หลังจากสร้างไฟล์ Snippet ที่ต้องการเรียบร้อยแล้ว ให้เราบันทึกโดยการกดที่เมนู Preferences > Browse Packages… เพื่อหา directory ที่เก็บ package ต่างๆของตัว Sublime

snippet

ทำการบันทึก Snippet ของเราในโฟลเดอร์ Packages > User (หากไม่มีให้สร้างขึ้นมาใหม่) ชื่อของ Snippet ให้บันทึกด้วย format ดังนี้ “ชื่อsnippet.sublime-snippet” อย่าลืมว่านามสกุลของไฟล์ต้องเป็น “.sublime-snippet” นะครับ

เปิด-ปิด Sublime ใหม่อีกครั้งหาก Snippet ที่เราสร้างยังไม่ถูกแนะนำ หลังจากเปิดปิด จะขึ้น Snippet แนะนำตามรูปครับ

snippet

รายละเอียดการใช้งานเพิ่มเติม ลองดูที่ลิงก์นี้นะครับ คู่มือการใช้งาน Snippet

บทสรุป

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