ตัวสร้าง VS Code Snippet
สร้าง VS Code snippet จากโค้ดที่วาง พร้อม tabstop, placeholder, choice และตัวแปร ได้ไฟล์ .code-snippets JSON ที่ถูกต้อง ทำงานในเบราว์เซอร์ ฟรี ออฟไลน์
Loading tool...
ตัวสร้าง VS Code Snippet คืออะไร?
ตัวสร้าง VS Code Snippet เป็นเครื่องมือฟรีที่ทำงานในเบราว์เซอร์ แปลงโค้ดปกติให้เป็น snippet ของ Visual Studio Code ที่ใช้ซ้ำได้ แทนที่จะเขียน JSON เองแล้วต่อสู้กับกฎ escaping เพียงกรอกชื่อ กำหนด prefix แล้ววางโค้ด เครื่องสร้างจะออก .code-snippets definition ที่ถูกต้อง พร้อมแยกเนื้อหาเป็นรายบรรทัด ปรับ indentation ให้เป็นมาตรฐาน และ escape อักขระพิเศษ ปุ่มแทรก token ช่วยเพิ่ม tabstop, placeholder, choice และตัวแปรอย่างชื่อไฟล์ปัจจุบันหรือคลิปบอร์ด
ประโยชน์หลัก
- ตัดปัญหา syntax error ที่ทำให้ snippet ที่เขียนเองพังเงียบๆ
- escape อัตโนมัติ รักษา template literal และ regex ที่วางมาให้ครบถ้วน
- token palette ทำให้ไม่ต้องจำชื่อตัวแปรของ snippet
- dedent อัจฉริยะ ทำให้ snippet จากโค้ดซ้อนลึกแทรกได้สวยทุกที่
- ทำงานออฟไลน์ ไม่มีข้อมูลออกจากเบราว์เซอร์ของคุณ
กรณีการใช้งาน
- •สร้าง snippet พื้นฐานสำหรับ console logging, การจัดการ error หรือโครง test
- •ทำมาตรฐานรูปแบบโค้ดของทีมเป็นไฟล์ .code-snippets แชร์ใน repo
- •แปลงบล็อกที่วางบ่อย เช่น React component หรือ API wrapper ให้กลายเป็น trigger
- •สร้าง snippet เฉพาะภาษาอย่างรวดเร็วด้วยช่อง scope
- •เรียนรู้ syntax ของ snippet โดยทดลอง tabstop และตัวแปรแบบสด
วิธีใช้ตัวสร้าง VS Code Snippet
- วางโค้ดของคุณ: พิมพ์ชื่อ snippet และ prefix สำหรับเรียกใช้ แล้ววางโค้ดที่ต้องการใช้ซ้ำลงในช่องเนื้อหา
- เพิ่ม tabstop และตัวแปร: คลิกปุ่ม token เช่น placeholder, choice หรือ filename เพื่อแทรก snippet syntax ตรง cursor
- ตรวจสอบ JSON ที่สร้าง: ดูผลลัพธ์สดและแก้คำเตือนเรื่องข้อมูลไม่ครบหรือเครื่องหมายดอลลาร์ที่ยังไม่ escape
- ติดตั้ง snippet: คัดลอก JSON ไปใส่ไฟล์ snippet ของคุณ หรือดาวน์โหลดไฟล์ .code-snippets ไปวางใน .vscode/ หรือโฟลเดอร์ user snippets
คุณสมบัติหลัก
- สร้าง .code-snippets JSON ที่ถูกต้องแบบเรียลไทม์จากชื่อ, prefix, scope และเนื้อหา
- แทรก token tabstop, placeholder, choice และตัวแปรอย่าง TM_FILENAME ได้ในคลิกเดียว
- escape เครื่องหมายดอลลาร์และแบ็กสแลชอัตโนมัติ ให้โค้ดที่วางคงรูปเดิม
- ตัด indentation ร่วมสำหรับ snippet ที่คัดมาจากโค้ดซ้อนลึก
- คำเตือนสดๆ เมื่อกรอกไม่ครบหรือพบลำดับอักขระคล้าย tabstop ที่ยังไม่ escape
- คัดลอกไปคลิปบอร์ดหรือดาวน์โหลดไฟล์ .code-snippets พร้อมใช้ทันที
คำถามที่พบบ่อย
ต้องวางไฟล์ snippet ที่สร้างไว้ที่ไหน
ดาวน์โหลดไฟล์ .code-snippets ไปไว้ในโฟลเดอร์ .vscode ของโปรเจกต์เพื่อใช้เฉพาะงานนั้น หรือใช้ File > Preferences > Configure User Snippets เพื่อวางในโฟลเดอร์ user snippets ให้ใช้ได้ทั้งเครื่อง
ทำไมเครื่องหมายดอลลาร์ในโค้ดถึงเปลี่ยนไป
VS Code ตีความ $ และแบ็กสแลชเป็น syntax ของ snippet ตัวเลือก escape อัตโนมัติจะเขียนเป็น literal ที่ escape แล้ว ให้ template literal, regex และ shell script คงรูปเดิม ปิดได้เฉพาะเมื่อคุณตั้งใจพิมพ์ tabstop เอง
ช่อง scope ทำหน้าที่อะไร
scope จำกัด snippet ให้ใช้เฉพาะภาษาที่ระบุ เช่น typescript,javascript หรือ python ถ้าเว้นว่าง snippet จะใช้ได้ทุกภาษา
$0 กับ $1 ต่างกันอย่างไร
tabstop แบบมีเลข เช่น $1 และ $2 จะถูกเยี่ยมตามลำดับเมื่อกด Tab ส่วน $0 คือตำแหน่ง cursor สุดท้ายที่จบการแก้ไข snippet
โค้ดของฉันถูกอัปโหลดไปที่ไหนไหม
ไม่มี ตัวสร้างทำงานในเบราว์เซอร์ของคุณด้วย JavaScript ล้วนๆ โค้ดไม่ออกจากเครื่องของคุณเลย