ลดเวลาการเขียนโค้ด ด้วย Snippets ใน Visual studio code

สวัสดีครับ พอดีได้มีโอกาสในการอ่านบทความว่า visual studio สามารถสร้าง extension snippets (สามารถอ่านได้ที่นี่)เพื่อช่วยให้ลดการเขียนโค้ดเวลาที่ต้องเขียนคำสั่งเดิมซ้ำ

แล้วจึงเกิดคำถามว่า visual studio code จะเขียนได้ไหม ?

ถ้าเราสามารถลดเวลาได้ครั้งละ 5 วินาที หลายๆครั้ง เราจะมีเวลาได้กลับมาเท่าไหล่ ?

แล้วก็ได้พบกับว่า จริงๆแล้ว visual studio code ก็สามารถที่จะสร้าง snippets ของตัวเองได้เช่นเดียวกัน ด้วยความที่เป็นคนที่ค่อนข้างจะไม่อยากทำอะไรซ้ำๆอยู่แล้วนั้น จึงรีบเข้าไปหาข้อมูลเพิ่มเติม โดยสามารถเข้าไปอ่านได้ที่ official ของทาง visual studio code หรือทาง blog ของท่านอื่นเพิ่มเติม (สามารถดูเพิ่มเติมได้ด้านล่าง)

วิธีสร้าง Snippets

1. คลิกที่ เมนู File
2. เลือก Preferences => User snippets

ขั้นตอนที่ 1 และ 2

3.เลือกภาษาที่ต้องการ (ในตัวอย่างจะเขียนด้วยภาษา Java)

ขั้นตอนที่ 3

4. เริ่มเขียน Snippets กัน ก่อนที่เราจะเริ่มเขียน เราจะมาเรียนรู้ตัวอย่างพื้นฐานกันก่อน ซึ่งเป็นตัวอย่างที่สามารถอ่านได้จาก official นั่นเอง

ตัวอย่างการเขียนเบื้องต้น

จากภาพ จะสามารถแบ่งได้เป็น 3 ส่วน คือ

1. Prefix คือ ส่วนที่ใช้ในการที่เราต้องการเรียกส่วนนี้ขึ้นมา เช่น เมื่อเราพิมพ์คำว่า filter จะขึ้น list ของ snippets ตัวนี้ขึ้นมานั่นเอง

2. Body คือ ส่วนที่ใช้ในการกำหนดว่าเมื่อมีการเรียกใช้ snippets ตัวนี้นั่น จะให้ทำการแทนชุดคำสั่งใดลงไป เช่น ในตัวอย่างเป็นการแทนชุดคำสั่ง stream() และ filter() เพื่อที่จะช่วยในการทุ่นเวลาในการเขียนโค้ดทั้งหมด

3. Description คือ คำอธิบาย ส่วนนี้จะเป็นส่วนที่ผู้ใช้งานจะสามารถอ่านได้ ก่อนที่จะเรียกใช้ snippets ตัวนี้

ตัวอย่างการใช้งาน

ปล. เมื่อพิมพ์ไปได้สักพักอาจจะกด ctrl + space เพื่อที่ใช้ในการตรวจสอบว่าตรงกับชุดคำสั่งไหนไหม และจากตัวอย่างด้านบน ตัวเลข ${1:item} นั้นคือจุดที่เราต้องการให้เรียงลำดับ โดยสามารถใช้ tab เพื่อสลับไปในแต่ละตำแหน่งนั่นเอง

เพิ่มเติม

เมื่อเราอยากส่งต่อ snippets ของเราให้คนอื่นใช้งาน วิธีการเราอาจจะต้องทำ snippets ให้กลายเป็น extension โดยสามารถทำเพิ่มเติมได้ด้วยวิธีดังนี้

1. install yeoman : npm install -g yo generator-code
2. เริ่มสร้างตัวสำหรับสร้าง extension โดยใช้คำสั่ง : yo code แล้วเราสามารถที่จะเลือก new code snippets ได้เลย

ภาพการเรียกใช้ yo code

3. เปิดไฟล์ package.json เพื่อทำการแก้ไขตำแหน่งการเรียกของไฟล์ snippets

ตัวอย่างไฟล์ package.json

4. สร้าง token ใน azureDevops : https://dev.azure.com/ ->เลือก personal token

คลิกมุมขวา แล้วเลือก Personal access tokens

5. เข้าไปที่ marketplace เพื่อสร้าง publisher id : https://marketplace.visualstudio.com/

6. ใช้คำสั่ง vsce login <publisher name> เพื่อลงทะเบียน

7. ใช้คำสั่ง vsce package (สังเกตเมื่อเสร็จแล้วจะได้ไฟล์ .vsix ออกมา)

8. ctrl + shift + p => vsix (เลือกไฟล์ที่ได้จากการ สร้างในข้อ 7)

Install from VSIX

9.ใช้คำสั่ง vsce publish (สามารถตรวจสอบได้ใน marketplace)

ปล.ถ้าติด readme ให้แก้ส่วนด้านบนของไฟล์ , อย่าลืมใส่ชื่อ publishName ใน package.json

ตัวอย่าง extension ที่ได้รับการ publish

References :

• มาสร้าง Extension Snippet C# ใช้เองกันเถอะ… | by Montree Tathuwan | ntbx | Mar, 2021 | Medium
• Snippets in Visual Studio Code
• เขียน Snippet ใช้เองใน vscode กันเถอะ | by aofleejay | THiNKNET Engineering
• Publish Your VS Code Snippet Extension in 4 steps | by Makhmud Islamov Sunnatovich | Medium
• Publish your snippet to the Marketplace · VS Code — tips and tricks (gitbooks.io)
• Publishing Extensions | Visual Studio Code Extension API