เครื่องมือแปลงโค้ดเป็นสไนปเป็ตออนไลน์ รองรับ JavaScript / TypeScript / React / JSX / TSX      

กรุณาใส่ชื่อสไนปเป็ต (name)
กรุณาใส่คำนำหน้าสั้นๆ (prefix)
กรุณาใส่คำอธิบายสั้นๆ (description)
กรุณากรอกรหัสข้อความ (code body)
ประเภทรุ่น
ผลลัพธ์ที่สร้างขึ้นโดย Snippet

VSCode วิธีการใช้ชิ้นส่วนโค้ด


Snippets in Visual Studio Code
สไนปเป็ตของ VS Code เป็นวิธีที่มีประสิทธิภาพในการเพิ่มประสิทธิภาพการเขียนโค้ดของคุณโดยทำให้การแทรกบล็อกโค้ดที่ใช้กันทั่วไปเป็นแบบอัตโนมัติ อาจเป็นการขยายข้อความแบบง่ายๆ หรือเทมเพลตที่ซับซ้อนกว่าพร้อมตัวแทนและตัวแปร วิธีใช้ประโยชน์จากสไนปเป็ตมีดังนี้:

การสร้างสไนปเป็ต:

เข้าถึงการตั้งค่าสไนปเป็ต: ไปที่ไฟล์ > การตั้งค่า > สไนปเป็ตของผู้ใช้ (โค้ด > การตั้งค่า > สไนปเป็ตของผู้ใช้ บน macOS) หรือใช้พาเล็ตคำสั่ง (Ctrl+Shift+P หรือ Cmd+Shift+P) แล้วพิมพ์ "การตั้งค่า: กำหนดค่าสไนปเป็ตของผู้ใช้"

เลือกภาษา: คุณจะได้รับแจ้งให้เลือกภาษาสำหรับสไนปเป็ตของคุณ (เช่น javascript.json, python.json เป็นต้น) วิธีนี้จะช่วยให้สไนปเป็ตพร้อมใช้งานเฉพาะในภาษานั้นเท่านั้น คุณยังสามารถสร้างไฟล์ "สไนปเป็ตทั่วโลก" ได้หากคุณต้องการให้สไนปเป็ตสามารถเข้าถึงได้ในทุกภาษา

กำหนดสไนปเป็ต: สไนปเป็ตถูกกำหนดในรูปแบบ JSON สไนปเป็ตแต่ละรายการจะมีชื่อ คำนำหน้า (ทางลัดที่คุณจะพิมพ์เพื่อเรียกใช้สไนปเป็ต) เนื้อหา (โค้ดที่จะแทรก) และคำอธิบายที่เป็นทางเลือก

ตัวอย่าง (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
ในตัวอย่างนี้:

"For Loop": ชื่อของสไนปเป็ต (สำหรับการอ้างอิงของคุณ)
"forl": คำนำหน้า การพิมพ์ "forl" และกด Tab จะแทรกสไนปเป็ต
"body": รหัสที่จะแทรก $1, $2 เป็นต้น คือแท็บสต็อป (ตัวแทน) $0 คือตำแหน่งเคอร์เซอร์สุดท้าย
"description": คำอธิบายเพิ่มเติมที่แสดงในคำแนะนำของ IntelliSense
การใช้สไนปเป็ต:

พิมพ์คำนำหน้า: ในไฟล์ที่มีประเภทภาษาที่ถูกต้อง ให้เริ่มพิมพ์คำนำหน้าที่คุณกำหนดไว้ (เช่น forl)

เลือกสไนปเป็ต: IntelliSense ของ VS Code จะแนะนำสไนปเป็ต เลือกสไนปเป็ตด้วยปุ่มลูกศรหรือคลิก

ใช้แท็บสต็อป: กด Tab เพื่อเลื่อนไปมาระหว่างแท็บสต็อป ($1, $2 เป็นต้น) และกรอกค่า

ตัวแปร:

สไนปเป็ตยังใช้ตัวแปรเช่น $TM_FILENAME, $CURRENT_YEAR เป็นต้นได้ สำหรับรายการทั้งหมด โปรดดูเอกสารประกอบของ VS Code

ตัวอย่างตัวแปร (Python):
{
  "New Python File": {
    "prefix": "newpy",
    "body": [
      "#!/usr/bin/env python3",
      "# -*- coding: utf-8 -*-",
      "",
      "# ${TM_FILENAME}",
      "# Created by: ${USER} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ]
  }
}
การฝึกฝนการใช้สไนปเป็ตจะช่วยลดการพิมพ์ซ้ำๆ ได้อย่างมาก และช่วยให้โค้ดของคุณมีความสม่ำเสมอ ลองสร้างสไนปเป็ตของคุณเองสำหรับรูปแบบโค้ดที่ใช้กันทั่วไป แล้วดูประสิทธิภาพในการเขียนโค้ดของคุณพุ่งสูงขึ้น