VS Code Snippet Generator: เปลี่ยนโค้ดที่วางแปะให้เป็น snippet ที่ใช้ซ้ำได้ด้วย tabstop และ placeholder

นักพัฒนาทุกคนมีโค้ดบล็อกหนึ่งที่พิมพ์ได้โดยไม่ต้องคิด ไม่ว่าจะเป็น scaffold สำหรับ test สิบห้าบรรทัดที่มีทั้งบรรทัด setup, assertion และ cleanup ที่มักถูกลืมเสมอ พิมพ์วันละครั้งยังพอไหว แต่พิมพ์วันละห้าครั้งคือ productivity ที่รั่วไหล และเป็นความซ้ำซ้อนแบบเดียวกับที่ snippet ถูกสร้างขึ้นมาเพื่อกำจัด VS Code Snippet Generator รับโค้ดที่คุณวางแปะอยู่แล้ว แล้วคืน snippet ที่พร้อมใช้งานพร้อม tabstop, placeholder และ choices ในตัว

ระบบ snippet ของ VS Code ทรงพลังแต่ไม่เป็นมิตรกับคนเขียน เพราะ body ของ snippet ต้องอยู่ใน JSON array ทุก double quote ต้อง escape และไวยากรณ์ของ snippet เองที่ใช้ dollar sign กับวงเล็บปีกกาก็ชนกับโค้ดที่คุณกำลังห่อหุ้มอยู่ แค่ลืม escape จุดเดียว snippet ก็เงียบไปเลยหรือขยายออกมาเพี้ยน generator กลับ workflow ให้เป็น: วางโค้ดจริง ทำเครื่องหมายส่วนที่เปลี่ยนไป แล้วรับ JSON ของ .code-snippets ที่ถูกต้อง เอาไปวางลง editor ได้ทันที

ทุกอย่างทำงานฝั่ง client 100% ในเบราว์เซอร์ของคุณ โค้ดที่วางแปะไม่มีทางไปแตะ server ไม่ต้องมีบัญชี และหน้าเว็บใช้งาน offline ได้เมื่อโหลดแล้ว คู่มือนี้ครอบคลุมไวยากรณ์ของ snippet กับดักเรื่องการ escape ที่ทำให้ snippet ที่เขียนมือพังมากที่สุด ตำแหน่งที่ไฟล์ควรอยู่ และตัวอย่างการใช้งานจริง

ทำไมต้องใช้ VS Code Snippet Generator?

• เลิกพิมพ์ boilerplate ซ้ำ ๆ scaffold ของ test, โครงของ component, บรรทัด log และ header ของไฟล์คือความซ้ำล้วน ๆ prefix สั้น ๆ กับการกด Tab หนึ่งครั้งแทนสิบห้าบรรทัดได้ด้วยสี่ตัวอักษร
• JSON ของ snippet ที่เขียนมือพังง่าย การ escape quote, brace และ backslash ภายใน JSON array คือสาเหตุอันดับหนึ่งของ snippet ที่พัง generator ปล่อย JSON ที่ถูกต้องออกมาทุกครั้ง
• Tabstop ทำให้คุณไม่หลุดจาก flow marker อย่าง $1 และ $2 พา cursor เดินผ่านจุดปรับแต่งทีละจุด คุณจึงไม่ต้องลากเมาส์หาตำแหน่งที่ถูกต้องอีก
• Placeholder อธิบายตัวเองได้ ${1:default} แสดงค่าที่สมเหตุสมผลให้ดู inline เขียนทับหรือกด Tab ข้ามไปก็ได้ และหกเดือนผ่านไป snippet ยังอ่านรู้เรื่องอยู่
• Choices ตัด micro-decision ทิ้ง ${1|info,debug,warn|} เปิด picklist ให้เลือกตอนขยาย snippet ทำให้ log level และค่าแบบ variant อื่น ๆ คงความสม่ำเสมอ
• เป็นส่วนตัวตั้งแต่การออกแบบ ฟรี ไม่ต้องสมัคร และทำงานฝั่ง client ทั้งหมด โค้ด proprietary ที่คุณวางแปะไม่มีทางออกจากอุปกรณ์ของคุณ

ฟีเจอร์เด่น

• body รักษาสไตล์ indentation ของคุณ ผลที่ขยายออกจึงดูเป็นส่วนหนึ่งของไฟล์ที่มันถูกวางลงไป
• ไวยากรณ์เดียวกันใช้ได้ทั่วตระกูล editor ของ VS Code รวมถึง Cursor และ VSCodium

วิธีใช้งาน

1. เปิดเครื่องมือ ที่ VS Code Snippet Generator โหลดขึ้นมาในเบราว์เซอร์ทันที ไม่ต้องติดตั้ง ไม่ต้องมีบัญชี
2. วางโค้ดของคุณ ใช้บล็อกจริงที่คุณพิมพ์บ่อยที่สุด รวมถึงบรรทัด log ที่คุณต้องเติมมือทุกครั้ง
3. ทำเครื่องหมายส่วนที่เปลี่ยนไป เติม tabstop $1, $2 ตรงที่เนื้อหาเปลี่ยน ${1:default} สำหรับค่าที่เติมไว้ ${1|a,b|} สำหรับ picklist และ $CLIPBOARD หรือ $TM_FILENAME ตรงที่เนื้อหาแบบ dynamic ช่วยได้
4. ตั้ง prefix, ชื่อ และ description ให้ prefix สั้นและจำง่าย ส่วน description คือสิ่งที่ IntelliSense แสดงข้าง ๆ มัน
5. คัดลอก JSON ที่สร้างได้ ลงไฟล์ .code-snippets ที่ถูกต้อง บันทึก แล้วทดสอบโดยพิมพ์ prefix ในไฟล์ภาษาที่ตรงกันและกด Tab

ไวยากรณ์ snippet: Tabstop, Placeholder และ Choices

ไวยากรณ์ของ snippet เล็กนิดเดียว สี่โครงสร้างครอบคลุมแทบทุกอย่าง แต่แต่ละตัวมีกฎที่ควรรู้ก่อนพึ่งพามันทุกวัน

Tabstop คือ marker เป็น dollar sign กับตัวเลขเปล่า ๆ $1 คือจุดที่ cursor ตกลงเมื่อ snippet ขยายออก แล้ว Tab พาไป $2 ต่อไป $3 การใช้เลขเดิมซ้ำจะ mirror การแก้ไขของคุณไปทุกตำแหน่ง เหมาะกับชื่อที่ต้องตรงกันทั้งใน function signature และบรรทัด log

Placeholder คือ tabstop ที่มีเนื้อหา ${1:user} วาง cursor ไว้ตรงนั้นพร้อมคำว่า user เติมไว้แล้ว เขียนทับได้ หรือกด Tab เก็บค่า default แล้วเดินต่อ placeholder ที่ซ้อนกันทำได้ แต่มักไม่คุ้มกับความงงที่ตามมา

Choices เติม picklist ให้ tabstop ${1|info,debug,warn|} แสดงตัวเลือกเหล่านี้ตอนขยาย ใช้ได้ทุกที่ที่ค่ามาจากชุดตายตัว log level, HTTP method, ชนิดของ import ซึ่งค่าที่เลือกสะกดผิดไม่ได้

Variables resolve ตอนขยาย snippet $CLIPBOARD วางข้อความล่าสุดที่คุณคัดลอกไว้ ใช้ห่อค่าที่คัดลอกมาจาก stack trace ได้แสนสะดวก ส่วน $TM_FILENAME แทรกชื่อไฟล์ปัจจุบัน นี่คือเหตุผลที่ header snippet ยังถูกต้องในทุกไฟล์ที่มันถูกใช้

จุดอ่อนของไวยากรณ์นี้คือการชนกัน เพราะโค้ดที่คุณวางแปะก็มีทั้ง dollar sign และวงเล็บปีกกาปิด template literal อย่าง `${value}` ภายใน body จะถูก parse เป็นไวยากรณ์ snippet ถ้าไม่ escape นี่คือสาเหตุอันดับหนึ่งของ snippet ที่พัง ให้ escape dollar sign ตัวจริงเป็น \\$ และวงเล็บปีกกาปิดตัวจริงเป็น \\}:

"body": [
  "const msg = \\`total: \\${amount}\\`;"
]

ตำแหน่งของไฟล์ขึ้นอยู่กับ scope user snippets อยู่ใน user snippets directory ซึ่งเข้าถึงได้ผ่านคำสั่ง Preferences: Configure User Snippets ส่วน project snippets อยู่ที่ .vscode/*.code-snippets ใน root ของ repository ควร commit ไว้เพื่อให้ทีมทั้งทีมได้รับผ่าน pull request ปกติ และ field scope อย่าง "scope": "typescript,javascript" ช่วยกันไม่ให้ snippet โผล่ในภาษาที่ไม่เกี่ยวข้อง

ตัวอย่างการใช้งานจริง เริ่มจาก test function ที่วางแปะเข้ามา:

function saveUser(user) {
  const id = db.insert(user)
  log('info', 'saved', id)
  return id
}

ทำเครื่องหมายส่วนที่เปลี่ยนไป ทั้งชื่อ, entity และ level generator จะให้ผลลัพธ์:

"Save User": {
  "prefix": "svu",
  "scope": "typescript,javascript",
  "body": [
    "function saveUser(${1:user}) {",
    "  const id = db.insert($1)",
    "  log('${2|info,debug|}', $1)",
    "  return ${3:id}",
    "}"
  ]
}

พิมพ์ svu กด Tab function จะปรากฏขึ้นพร้อม cursor อยู่ที่ user picklist สำหรับ log level และจุดสุดท้ายที่ค่า return สิบห้าวินาทีของการตั้งค่า แทนบล็อกที่คุณพิมพ์อยู่ทุกวัน

กรณีการใช้งานจริง

Scaffold สำหรับ Test

กรณีคลาสสิก และเป็นเหตุผลที่ snippet ถูกสร้างขึ้น scaffold ที่มี tabstop สำหรับชื่อ test, บรรทัด arrangement และ assertion ทำให้การเขียน test ก่อนโค้ดเป็นเรื่อง reflex ทีมที่ commit ไฟล์ .code-snippets ร่วมกันได้โบนัสเพิ่ม ทุก test เริ่มด้วยโครงเดียวกัน review จึงโฟกัสที่ logic แทนรูปแบบ

Boilerplate ของ Component

โครงของ component ซ้ำเดิมทุกครั้ง ทั้ง import, props interface, element ครอบ และ export placeholder ${1:ComponentName} ที่ mirror ไปทุกจุดที่ชื่อปรากฏ ทำให้การตั้งชื่อสม่ำเสมอทั่ว codebase อย่างที่ copy-paste ไม่เคยทำได้

Log Statement

บรรทัด log คือที่ที่ choices เปล่งประกาย snippet log ที่มี ${1|info,debug,warn,error|} บังคับคำศัพท์ของ level ให้สม่ำเสมอ ขณะที่ $TM_FILENAME ประทับไฟล์ต้นทางลงทุกบรรทัด ซึ่งมีค่ามากเวลาอ่าน log ของ service ที่ไม่ได้แตะมาหลายเดือน

Header เอกสาร

header ของไฟล์ที่พิมพ์มือมักค้างสภาพเก่า header snippet ที่สร้างบน $TM_FILENAME (บวก $CLIPBOARD สำหรับวางหมายเลข ticket) ให้ header ที่ถูกต้องแบบฟรี ๆ และ field description ก็เตือนตัวคุณในอนาคตว่า prefix คืออะไร

แนวทางปฏิบัติที่ดีที่สุด

• เลือก prefix สั้น ๆ ที่คุณจำได้ สองถึงสี่ตัวอักษรที่ผูกกับสิ่งที่ทำ อย่าง svu, tst, cmp ชนะแบบอธิบายยาวที่ต้องเปิดดูทุกครั้ง
• ทำให้ default ของ placeholder เป็นโค้ดที่ใช้ได้ ${1:user} ขยายออกมาเป็นอะไรที่รันได้แม้ถูกข้าม default แบบ TODO เชิญ syntax error เข้าสู่ snippet ที่ขยายครึ่ง ๆ กลาง ๆ
• กำหนด scope ของ snippet แยกตามภาษา scope แบบ typescript,javascript กัน snippet ของ JS ออกจากคำแนะนำฝั่ง Python และทำให้รายการคำแนะนำของคุณสั้น
• Escape dollar sign และ brace ในโค้ดที่วางแปะ template literal คือฆาตกรเงียบคลาสสิก เช็กซ้ำทุกอย่างที่มี ${ หลังจากวางแปะ
• Commit project snippets ลง version control ไฟล์ .vscode/project.code-snippets แชร์ convention ของทีมผ่าน pull request เดียวกับโค้ดที่มันอธิบาย
• เลือก choices แทน free text ในจุดที่ค่ามีจำกัด เพราะ picklist สะกดผิดไม่ได้

ลองใช้เลย

Snippet คือห้านาทีที่ให้ผลตอบแทนสูงสุดเท่าที่คุณลงทุนกับการตั้งค่า editor ได้ เปิด VS Code Snippet Generator วางบล็อกที่คุณเพิ่งพิมพ์เป็นครั้งที่สามของสัปดาห์นี้ เติม tabstop และ prefix แล้วคัดลอก JSON ลงไฟล์ .code-snippets ของคุณ ฟรี เป็นส่วนตัว และอยู่ในเบราว์เซอร์ทั้งหมด

เครื่องมือที่เกี่ยวข้อง

• JSON Formatter — ตรวจสอบและจัดรูป JSON ของ .code-snippets ที่สร้างได้ก่อน commit
• Text Case Converter — แปลงชื่อเป็น camelCase, kebab-case หรือ CONSTANT_CASE ที่ prefix และ variable ของคุณต้องใช้
• Agents MD Generator — บันทึก convention ของ snippet คู่กับ build และ test command สำหรับ AI coding agent

ขอให้สนุกกับการ build และขอให้ prefix ของคุณนึกออกเสมอ

คำถามที่พบบ่อย

ถ: tabstop กับ placeholder ต่างกันอย่างไร?

ตอบ: tabstop ($1) คือตำแหน่ง cursor เปล่า ๆ ที่ cursor กระโดดไปเมื่อคุณกด Tab ส่วน placeholder (${1:user}) คือ tabstop ที่มีเนื้อหา default ติดมาด้วย cursor จะตกลงตรงนั้นพร้อมข้อความเติมไว้แล้ว คุณเขียนทับ หรือกด Tab ข้ามไปเพื่อเก็บค่า default ก็ได้

ถ: ควรบันทึก JSON ของ .code-snippets ที่สร้างไว้ที่ไหน?

ตอบ: ถ้าต้องการใช้ได้ทุกโปรเจกต์ ให้เก็บใน user snippets directory ผ่านคำสั่ง Preferences: Configure User Snippets ส่วน snippet ของทีม ให้บันทึกไฟล์ .code-snippets ไว้ในโฟลเดอร์ .vscode ของ repository แล้ว commit พร้อมเพิ่ม field scope เพื่อให้แต่ละ snippet แสดงเฉพาะในภาษาที่เกี่ยวข้อง

ถ: ทำไม snippet ของฉันพังเมื่อโค้ดที่วางแปะมี dollar sign?

ตอบ: dollar sign เป็นไวยากรณ์ของ snippet ดังนั้น ${value} ตัวจริงจาก template literal หรือคำสั่ง shell จะถูก parse เป็น placeholder dollar sign ตัวจริงต้อง escape เป็น \\$ (และวงเล็บปีกกาปิดเป็น \\}) ซึ่ง generator จัดการ escape ให้คุณเองแล้ว

ถ: เครื่องมืออัปโหลดโค้ดของฉันไปที่ไหนหรือเปล่า?

ตอบ: ไม่ generator ทำงานฝั่ง client 100% ในเบราว์เซอร์ โค้ดที่วางแปะถูกประมวลผลในเครื่อง ไม่มีการจัดเก็บหรือบันทึก log และหน้าเว็บยังใช้งาน offline ได้หลังจากโหลดแล้ว