มาสร้าง Extension Snippet C# ใช้เองกันเถอะ…

คุณเบื่อไหมที่จะต้องมาเขียน Code เดิมๆ ซ้ำๆ ไม่มีรูปแบบ และใช้เวลาน๊าน นานนนเขียนทีไรไม่ถูกต้องตาม Standard ของทีมสักที หากคุณพบปัญหาเหล่านี้เราขอแนะนำ Snippet Extension !!!!!

Snippet คืออะไร ?

Snippet คือ Auto Complete ที่ทำให้เราเขียน Code ได้เร็วขึ้น เป็น Pattern มากขึ้น ใครที่ต้องเขียน Code ซ้ำๆ Snippet สามารถตอบโจทย์การทำงานของคุณได้เป็นอย่างดี

ยกตัวอย่างเช่น เราต้องการจะสร้าง code try catch เพียงแค่พิมพ์ชุดคำสั่ง try ตัว Editor ก็จะสร้าง Code try catch ให้เราอัตโนมัติ ดังตัวอย่างด้านล่าง

ตัวอย่าง Snippet (Visual Code จะต้องกด Tab 2 ครั้ง)

ทำไมต้องเขียน Snippet ใช้เอง?

• เพราะการทำงานจริง ๆ อาจมี Snippet ที่เราต้องสร้างเพิ่ม เช่นการทำงานเป็นทีมจำเป็นต้องมี Code Standard ทำให้มี Code บางส่วนที่ต้องเขียนคล้าย ๆ กัน

และปกติแล้วเวลาที่เราสร้าง Snippet ไว้เราจะใช้แค่ในเครื่องหรือถ้าเราอยากให้คนในทีมใช้หรือคนอื่น ๆ ใช้เราจะต้องคัดลอกไฟล์นั้น ๆ ไปติดตั้งในเครื่อง จึงเป็นที่มาของการเขียนบทความนี้เพื่อที่จะสร้าง Snippet ให้กลายเป็น Extension เพื่อให้คนในทีมดาวน์โหลดและติดตั้ง Extension นี้แล้วสามารถใช้ Snippet ได้เลย หรือเราจะเผยแพร่สู่สาธารณะก็ได้เช่นกันในที่นี้จะสร้างเป็น Extension Visual Studio มาเริ่มกันเลย

1. สร้างไฟล์ Snippet

2. สร้างโปรเจค และติดตั้ง Extension VSIX on Visual Studio

3. Build and Test

สร้าง File Snippet

ก่อนอื่นเราจะต้องมีไฟล์ Snippet ของเราก่อน ให้สร้างไฟล์ .snippet (สร้างใน Editor ทั่วไปเช่น VS Code, Notepad )ในที่นี้เราจะสร้าง Snippet ตรวจสอบค่าที่เป็น null หรือ whitespace ดูตัวอย่างการสร้าง snippet เพิ่มเติมได้ที่นี่

Snippets Schema จะแบ่งออกเป็น 2 ส่วนหลัก ๆ คือ

1. Header คือส่วนกำหนดข้อมูลพื้นฐานต่างๆ เช่น Shortcut คำที่พิมพ์ในการสร้าง Snippet Code ของเรา ณ ที่นี้กำหนดให้เป็น isnull
2. Snippet คือส่วนที่กำหนดข้อมูลในการสร้าง Code ของเรา ในที่นี้จะกำหนดเป็น Code ตรวจสอบค่า null หรือ whitespace

นั้นหมายความว่าหากมีการพิมพ์ isnull ระบบก็จะสร้าง Code ตรวจสอบค่า null หรือ whitespace ให้เราอัตโนมัติ ซึ่งตัว Snippets Schema ยังมีความสามารถอีกมากมาย ศึกษาเพิ่มเติมได้ที่นี่

ทำไมต้องสร้าง Extension VSIX ?

VSIX = Visual Studio Extensions

เพื่อที่จะนำไฟล์ Snippet ที่เราสร้างไปไว้ใน Extension และ Publish ให้เครื่องอื่นสามารถดาวน์โหลดและติดตั้งได้ และหากมีการเพิ่ม หรือเปลี่ยนแปลง Snippet ใหม่ เครื่องที่ติดตั้งก็แค่อัปเดตก็สามารถใช้งาน Snippet ใหม่ได้แล้ว โดยไม่ต้องโยนไฟล์ Snippet ให้กัน

ติดตั้ง Extension VSIX และ สร้างโปรเจค

1. ให้เปิดตัวติดตั้ง Visual Studio (ไฟล์ที่เราดาวน์โหลดมาเพื่อที่จะติดตั้ง Visual Studio ครั้งแรก ถ้าไม่มีก็สามารถโหลดได้ที่นี่) ให้เลือก Modify Visual Studio > เลือก Visual Studio extension development สำหรับสร้าง Extension

หน้าติดตั้ง Extension

2. สร้างโปรเจค หลังจากที่ติดตั้งเสร็จให้ทำการสร้างโปรเจค VSIX เลย เลือก VSIX Project C#

สร้างโปรเจค VSIX

3. สร้างโฟลเดอร์ หลังจากที่สร้างโปรเจคเสร็จแล้วให้ทำการสร้างโฟลเดอร์ที่เอาไว้เก็บไฟล์ Snippet ของเรา ในที่นี้จะใช้ชื่อว่า “SnippetsNTBX” ต่อไปเอาไฟล์ Snippet ที่ได้สร้างข้างต้นนำมาใส่ในโฟลเดอร์นี้

4. ตั้งค่าไฟล์ Snippet โดยตั้งค่า Properties Build Action = Content, Include in VSIX = True ถ้ามีหลาย ๆ ไฟล์ก็ทำแบบนี้ทุกไฟล์

5. สร้างไฟล์ snippets.pkgdef ไฟล์นี้มีหน้าที่ชี้บอกว่าไฟล์ Snippet ของเราอยู่ที่ โฟลเดอร์ “SnippetsNTBX”

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

// C#
[$RootKey$\Languages\CodeExpansions\CSharp\Paths] "SnippetsNTBX"="$PackageFolder$"

6. เพิ่มไฟล์ snippets.pkgdef เข้าไปยัง VSIX Package โดยให้เปิด Manifest Designer ด้วยการดับเบิลคลิกที่ source.extension.vsixmanifest หลังจากนั้นให้คลิกที่ Tab Assets และกดที่ New จะมีให้เราเพิ่มไฟล์ .pkgdef ที่เราสร้างไว้ก่อนหน้านี้ (อย่าลืม Save ด้วย)

Browse ไปยังไฟล์ .pkgdef

Build and Test

หลังจากที่เราได้ทำตามขั้นตอนก่อนหน้าทั้งหมดแล้ว ก็จะเข้าสู่การนำออกไปใช้งานโดยการ กด Build > Build Solution (ในที่นี้เลือกเป็น Release) จะได้ไฟล์ .vsix ออกมาดังรูปด้านล่าง ให้เข้าไปที่ Path นั้นและทำการติดตั้งไฟล์ .vsix

เข้าไปยัง Path ที่แสดงด้านบน และทำการติดตั้งไฟล์ .vsix

ตรวจสอบว่า Extension ที่เราติดตั้งได้เพิ่มเข้าไปยัง Visual Studio แล้ว โดนเข้าไปที่ Extension > Manage Extension

ทดสอบการทำงานของ Snippet

Note. ทดสอบกด Tab 2 ครั้ง

แค่นี้เราก็ได้ Extension Snippet ไว้ใช้แล้ว

พร้อมที่จะนำขึ้นไปยัง Extension Marketplace