มาเขียน Snippet ใช้เองกัน!!

สวัสดีครับ วันนี้ผมจะมาสอนการสร้าง code snippet บน VSCode ที่จะช่วยเพิ่ม Productivity ในการ Implement code นั้นเอง
ก่อนที่จะเริ่มเรามารู้จักเจ้า Code snippet กันก่อนดีกว่า

Code snippet คืออะไร Code snippet เป็นการสร้างชุดโค้ดจากการเขียนสั้นๆ
ยกตัวอย่างเช่น การพิมพ์ clg ถ้าหาก เรากด tab หรือ enter เพื่อ confirm ในการใช้ snippet นั้นจะเป็นการสร้าง console.log() ขึ้นมา

ทำไมเราถึงต้องเขียน snippet เอง เพราะว่า snippet ที่เราอยากได้นั้นมันอาจจะไม่มีใน Built-in หรือใน Marketplace หรือถึงจะมีก็ออกจะหายากไปหน่อย
เลยตัดสินใจว่า เขียนเองเลยดีกว่าพอตอนเขียนก็รู้สึกว่าไม่ยากเกินไปเลยอยากจะมาแชร์ให้เพื่อนๆ

โดยเจ้า Code snippet สามารถได้มาจาก 3 อย่างตามนี้

1. Built-in VS Code

2. VSCode snippets Marketplace ที่ได้มาจาก Plugin ที่เรา install นั้นเอง

3. Create own snippets หรือ snippet ที่เราเขียนขึ้นมาเองนั้นเอง

วิธีการสร้าง Snippet บน VSCode

1. เปิด Command Pallet ขึ้นแล้วพิมพ์คำว่า Preferences: Configure User Snippets ( Shortcuts => Window: Ctrl + Shift + P, Mac: CMD + Shift + P)

1. เราสามารถเลือกได้ว่าจะเพิ่ม snippet ลงไฟล์ที่เป็นของเราเลย หรือ จะเพิ่มลงใน snippet ของแต่ละภาษาของ VS Code วันนี้เราจะมาเพิ่ม snippet ลงในไฟล์ VS Code กัน

ตัวอย่างที่จะเราจะเขียน Snippet วันนี้ขอเป็น ภาษา javascript ก็แล้วกัน

    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log to the console"
    }

โดยผมจะอธิบายจากตัวอย่างด้านบนจะเป็น snippet การสร้าง console.log()
จะสังเกตว่า มันเป็นลักษณะของ Json file format

• บรรดทัดแรกเป็น key ของ snippet
• prefix คือ snippet ของเราว่าจะใช้ชื่ออะไร
• body ตัวคือสำคัญมากเพราะมันคือสิ่งที่เราอยากได้นั้นเอง เราเพิ่ม spacebar เข้าไปง่ายๆ หรือ การสร้างหลายๆบรรทัดโดยไม่ต้องใช้สัญลักษณ์พิเศษ
• description คือคำอธิบายว่า snippet ที่เรากำลังใช้งานนั้นเป็น snippet ของไฟล์ไหน อย่างเช่นตัวอย่างคือ Log to the console ที่จะอยู่ทางด้านขวามือ

โดยเมื่อเราเรียกใช้เสร็จแล้ว editor cursor จะถูกไปวางในวงเล็บ เพื่อที่หลังจากเรา สร้าง snippet เราสามารถพิมพ์ด้านในวงเล็บได้เลย
ทำให้เราไม่ต้องเลื่อน editor cursor เอง แล้วหลังจากที่เรากด Tab มันจะเป็นการเอา editor cursor ไปบรรทัดถัดนั้นเอง โดยสิ่งนี้เรียกว่า Tabstops หนึ่งใน Snippet Syntax

Snippet Syntax ของ body มีอยู่ 4 อย่าง ( เรียงจากความบ่อยในการเรียกใช้ )

• Tabstops: tabstops คือการเลื่อนตัว editor cursor ใน snippet code ที่เราสร้างขึ้นมานั้นเอง โดยการใช้ tabstops นั้นจะต้องพิมพ์ $ แล้วตามด้วยตัวเลขอย่างเช่น $1, $2, ... tabstops จะเริ่มจากเลข 1 แล้ว ตัวสุดท้ายคือเลข 0
  เราสามารถใข้ เลขเดียวซ้ำกันได้ ถ้าหากเราต้องการที่จะแก้ไขหลายๆจุดพร้อมกัน

• Placeholder : placeholder คือค่าการแทนค่าใน tabstops ด้วยค่า Default ของมัน ( placeholder)
  โดยการเขียน placehoder จะเป็น $ ตามด้วย ปีกกา {} ด้านในจะใส่ตัวเลขของ tabstops แล้วต่อด้วย placehoder คั้นด้วย : ( semi colon )
  ${1:placeholder} อย่างเช่นการสร้าง field ใน model เราอาจจะสร้าง snippet ขึ้นมาตัว body เราอาจจะเขียนแบบนี้
  

        "body": [
            "const $1: ${2:string} = $3",
            "$0"
        ],

ซึ่งถ้าหากใน tabstops $2 เราอยากให้เป็น string เราก็แค่กด tab ไปมันจะใส่คำว่า string ให้เราเองเลยนี้คือข้อดีของ placeholder

• Choice: choice อีก syntax ที่มีประโยชน์แต่อาจจะใช้ได้น้อยสถานการณ์ choice เหมือน dropdown ที่มีตัวเลือกให้เราเลือก ถ้าหากสิ่งที่เราต้องการไม่มีอยู่ในตัวเลือกเราสามารถพิมพ์ได้ แต่อาจจะต้องกดออกจาก snippet edit process ด้วยการกด esc ก่อน

        "body": [
            "const $1: ${2|string, number, boolean|} = $3",
            "$0"
        ],

• Variables: การใช้ variables นั้นเราสามารถใช้ได้ด้วยการ $variableName หรือ ${variableName:default} ซึ่งถ้า default ไม่มีค่าจะแทนที่ด้วย empty string ตัวอย่างของเราจะใช้ variableName ที่ชื่่อว่า random ไอ่ตัว random จะเป็นการสุ่ม เลข 6 หลัก ฐาน10 ขึ้นมาให้เรา "const $1 = $RANDOM ", variableตัวอื่นที่สามารถใช้ได้สามารถดูได้จาก link นี้เลย

        "body": [
            "const $1: ${2|string, number, boolean|} = $RANDOM",
            "$0"
        ],

สรุป

ข้อดีของการเขียน Snippets เอง

• ทำให้เราสามารถลดเวลาจากการเขียนโค้ดที่มีหน้าตาเหมือนๆกันได้
• code style จะออกมาใกล้เคียงกันเพราะสร้างมาจาก template snippet เดียวกัน

แล้วข้อเสียหละ

• Code snippet จะอาจจะซ้ำกันได้ในหลายไฟล์ อย่างเช่น log อาจจะมาจาก Built-in, Marketplace plugin หรือว่ามาจากที่เราเขียน ดังนั้นเราต้องเขียน description ให้เข้าใจง่ายเพื่อที่จะสามารถเรียกใช้ snippet ที่ถูกต้อง
• ใช้เวลาเขียน snippet file เพราะถ้าอยากได้ snippet ดีๆอาจจะต้องมีการ refactor หลายรอบ

ข้อจำกัด

• Code snippet ไม่สามารถใช้ในได้ใน Code snippet ถ้ายังอยู่ใน snippet edit process

ของแถม

อันนี้เป็นตัวอย่าง Snippets ที่ผมใช้จริงๆในฝั่ง Javascript นะครับ
อันแรกจเป็นการสร้าง Arrow Function ขึ้นมาแบบมี Return value

"Create Arrow Function":{
       "prefix":"cf",
       "body":[
          "const $1 = (($2) => {",
          "",
          "\t $0",
          "\treturn",
          "})"
       ],
       "description":"Create Arrow function"
    },

ส่วนอันที่สองก็เป็นการสร้าง Arrow Function เหมือนกันแต่ไม่มี Return value

"Create Arrow Function without return": {
       "prefix":"cfn",
       "body":[
          "const $1 = (($2) =>{",
          "",
          "\t $0",
          "})"
       ],
       "description":"Create Arrow function without return"
    },

ก่อนจากกันนี้ก็เป็นโพสต์แรกของผม ภาษาในการเขียนอาจจะยังเข้าใจยาก ถ้าหากมีตำแนะนำติชม คอมเมนต์กันมาเลยนะครับ แล้วเจอกันใหม่ในบทความหน้าครับผม : )