การสร้าง Code Snippet บน ATOM Text Editor

เวลาเขียนโปรแกรมเราก็มักจะมีคำสั่งที่ต้องพิมพ์บ่อยๆ ซึ่งก็มักจะหลายๆ บรรทัด ครั้นจะให้เปิดไฟล์เก่าขึ้นมาเพื่อ copy ก็ยังไงอยู่ บางทีก็หาโค้ดเก่าๆ ไม่เจอก็มี บน Text Editor ที่ใช้สำหรับเขียนโปรแกรมส่วนใหญ่ก็มักจะมีฟังชั่นให้เราสร้าง snippet ซึ่งก็คือการสร้างคำสั่งลัดเอาไว้ใช้งาน ผมเรียกถูกหรือเปล่าไม่แน่ใจ แต่ก็ประมาณว่าถ้าเราพิมพ์ keyword ที่กำหนดไว้มันก็จะสร้างโค้ดที่กำหนดไว้ขึ้นมาให้เราเลย บน ATOM Text Editor ก็มีฟังชั่นนี้ให้ใช้งานเช่นกัน อธิบายอาจจะไม่เห็นภาพ ไปลองทำกันจริงๆ เลยดีกว่า

ถ้ายังไม่ได้ติดตั้ง ATOM หรือยังไม่เคยลองใช้ก็ติดตั้งและลองเล่นสักพักหนึ่งก่อนนะครับ https://atom.io/ ผมเองเคยใช้มาทั้ง Edit Plus, Sublime และตอนนี้มาจบที่ ATOM เหตผลเพราะมัน Open Source เลยอยากแนะนำให้ทุกๆ คนลองใช้ดู

มาเริ่มสร้าง code snippet ของเรากันต่อ ให้เลือกไปที่เมนู File -> Snippets (ถ้าเมนูไม่ขึ้นให้กด ALT ข้างไว้นะครับ)

ATOM จะเปิดไฟล์ snippets.cson ขึ้นมาให้เราแก้ไข โดยรูปแบบการเขียนจะเป็น CoffeeScript Object Notation (CSON) คล้ายๆ กับ JSON แต่ไม่มีวงเล็บเปิดปิด ใช้ tab อย่างเดียว แต่เราก็ไม่ต้องสนใจอะไรมาก เราใช้อยู่ไม่กี่คำสั่งครับ

ตรง comment ด้านบนที่เขาให้มาด้วย เขาแนะนำว่าถ้าเราจะสร้าง snippet ของตัวเองได้โดยแค่พิมพ์ snip แล้วกด tab เดียวมันจะสร้าง template ขึ้นมาให้เรา ซึ่งจะได้ code ออกมาประมาณนี้ ซึ่งเป็นตัวอย่างของการทำ snippet สำหรับไฟล์ .js โดย Snippet name คือชื่อคำอธิบายที่จะแสดงตอนที่มีคำสั่งขึ้นมาให้เลือก ส่วน prefix คือ keyword ที่เรากำหนดว่าเมื่อพิมพ์คำนี้แล้วให้แสดง snippet ตัวนี้ขึ้นมา และ body คือส่วนของโค้ดที่เราต้องการ จะเห็นว่าส่วนของ boby ถ้าเราใส่แค่บรรทัดเดียว ให้ใส่เครื่องหมาย ‘ ครอบคำสั่งได้ แต่ถ้ามีหลายๆ บรรทัดเราต้องใช้ “”” ครอบคำสั่งแทน และเราสามารถใส่ $1 เพื่อกำหนดตำแหน่งของ cursor ได้ เดียวเราลองดูจากตัวอย่างหละกัน จะได้เห็นภาพ

1
2
3
4

'.source.js':
  'Snippet Name':
    'prefix': 'Snippet Trigger'
    'body': 'Hello World!'

แต่ของเรา เราจะสร้าง snippet สำหรับ php และเพิ่ม snippet เข้าไปสัก 2 ตัว ให้แก้ตามตัวอย่างนี้ครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

'.source.php':
  'Copyright by LookHin':
    'prefix': 'lookhin'
    'body': '//Copyright by LookHin [email protected]$1'
 
  'MySQL Select':
    'prefix': 'sqls'
    'body': """
    //Select Data
    $query = "SELECT * FROM `table_name` ORDER BY `ID` ASC";$1
    $result = mysql_query($query);
    while($line = mysql_fetch_array($result)){
      echo $line['ID'];
    }
    """

หลังจากสร้าง snippet เสร็จแล้ว ให้ลองสร้างไฟล์ test.php และใช้ ATOM เปิดไฟล์นี้ขึ้นมา จากนั้นพิมพ์คำว่า sqls เราจะเห็นว่ามี snippet ของเราขึ้นมาให้ใช้งานแล้วครับ