มาเขียน Snippet ใช้เองกัน!!
Tags: vscode, javascript, productivity, improvement
Published: 2021-09-05 09:27:29

สวัสดีครับ วันนี้ผมจะมาสอนการสร้าง code snippet บน VSCode ที่จะช่วยเพิ่ม Productivity ในการ Implement code นั้นเอง 
ก่อนที่จะเริ่มเรามารู้จักเจ้า Code snippet กันก่อนดีกว่า

Code snippet คืออะไร **Code snippet เป็นการสร้างชุดโค้ดจากการเขียนสั้นๆ** 
ยกตัวอย่างเช่น การพิมพ์ `clg` ถ้าหาก เรากด tab หรือ enter เพื่อ confirm ในการใช้ snippet นั้นจะเป็นการสร้าง `console.log()` ขึ้นมา 

ทำไมเราถึงต้องเขียน snippet เอง เพราะว่า snippet ที่เราอยากได้นั้นมันอาจจะไม่มีใน Built-in หรือใน Marketplace หรือถึงจะมีก็ออกจะหายากไปหน่อย
เลยตัดสินใจว่า เขียนเองเลยดีกว่าพอตอนเขียนก็รู้สึกว่าไม่ยากเกินไปเลยอยากจะมาแชร์ให้เพื่อนๆ


โดยเจ้า Code snippet สามารถได้มาจาก 3 อย่างตามนี้

1. Built-in VS Code

2. VSCode snippets Marketplace ที่ได้มาจาก Plugin ที่เรา install นั้นเอง

3. Create own snippets หรือ snippet ที่เราเขียนขึ้นมาเองนั้นเอง


####วิธีการสร้าง Snippet บน VSCode

1. เปิด Command Pallet ขึ้นแล้วพิมพ์คำว่า `Preferences: Configure User Snippets` ( Shortcuts => Window: Ctrl + Shift + P, Mac: CMD + Shift + P)

![Configure User Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vltk3ti1b6is9it8433e.png)


2. เราสามารถเลือกได้ว่าจะเพิ่ม snippet ลงไฟล์ที่เป็นของเราเลย หรือ จะเพิ่มลงใน snippet ของแต่ละภาษาของ VS Code วันนี้เราจะมาเพิ่ม snippet ลงในไฟล์ VS Code กัน

![Select Snippet File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/he4zcnezwzdfmhstlzb5.png)


ตัวอย่างที่จะเราจะเขียน Snippet วันนี้ขอเป็น ภาษา javascript ก็แล้วกัน


```
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log to the console"
	}
```

โดยผมจะอธิบายจากตัวอย่างด้านบนจะเป็น snippet การสร้าง console.log()
จะสังเกตว่า มันเป็นลักษณะของ Json file format 

* บรรดทัดแรกเป็น key ของ snippet
* prefix คือ snippet ของเราว่าจะใช้ชื่ออะไร
* body ตัวคือสำคัญมากเพราะมันคือสิ่งที่เราอยากได้นั้นเอง เราเพิ่ม spacebar เข้าไปง่ายๆ หรือ การสร้างหลายๆบรรทัดโดยไม่ต้องใช้สัญลักษณ์พิเศษ 
* description คือคำอธิบายว่า snippet ที่เรากำลังใช้งานนั้นเป็น snippet ของไฟล์ไหน อย่างเช่นตัวอย่างคือ Log to the console ที่จะอยู่ทางด้านขวามือ

![Snippet Description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlrecj17epyf2nemg7o4.png)


โดยเมื่อเราเรียกใช้เสร็จแล้ว editor cursor จะถูกไปวางในวงเล็บ เพื่อที่หลังจากเรา สร้าง snippet เราสามารถพิมพ์ด้านในวงเล็บได้เลย
ทำให้เราไม่ต้องเลื่อน editor cursor เอง แล้วหลังจากที่เรากด Tab มันจะเป็นการเอา editor cursor ไปบรรทัดถัดนั้นเอง โดยสิ่งนี้เรียกว่า Tabstops หนึ่งใน Snippet Syntax

####Snippet Syntax ของ body มีอยู่ 4 อย่าง ( เรียงจากความบ่อยในการเรียกใช้ )


* Tabstops: tabstops คือการเลื่อนตัว editor cursor ใน snippet code ที่เราสร้างขึ้นมานั้นเอง โดยการใช้ tabstops นั้นจะต้องพิมพ์ $ แล้วตามด้วยตัวเลขอย่างเช่น $1, $2, ...   tabstops จะเริ่มจากเลข 1 แล้ว ตัวสุดท้ายคือเลข 0
เราสามารถใข้ เลขเดียวซ้ำกันได้ ถ้าหากเราต้องการที่จะแก้ไขหลายๆจุดพร้อมกัน


* Placeholder : placeholder คือค่าการแทนค่าใน tabstops ด้วยค่า Default ของมัน ( placeholder)
โดยการเขียน placehoder จะเป็น $ ตามด้วย ปีกกา {} ด้านในจะใส่ตัวเลขของ tabstops แล้วต่อด้วย placehoder คั้นด้วย : ( semi colon )
${1:placeholder} อย่างเช่นการสร้าง field ใน model เราอาจจะสร้าง snippet ขึ้นมาตัว body เราอาจจะเขียนแบบนี้
```
		"body": [
			"const $1: ${2:string} = $3",
			"$0"
		],
```
ซึ่งถ้าหากใน tabstops $2 เราอยากให้เป็น string เราก็แค่กด tab ไปมันจะใส่คำว่า string ให้เราเองเลยนี้คือข้อดีของ placeholder



* Choice: choice อีก syntax ที่มีประโยชน์แต่อาจจะใช้ได้น้อยสถานการณ์ choice เหมือน dropdown ที่มีตัวเลือกให้เราเลือก ถ้าหากสิ่งที่เราต้องการไม่มีอยู่ในตัวเลือกเราสามารถพิมพ์ได้ แต่อาจจะต้องกดออกจาก snippet edit process ด้วยการกด esc ก่อน
```
		"body": [
			"const $1: ${2|string, number, boolean|} = $3",
			"$0"
		],
```

* Variables: การใช้ variables นั้นเราสามารถใช้ได้ด้วยการ $variableName หรือ ${variableName:default}
ซึ่งถ้า default ไม่มีค่าจะแทนที่ด้วย empty string ตัวอย่างของเราจะใช้ variableName ที่ชื่่อว่า random
ไอ่ตัว random จะเป็นการสุ่ม เลข 6 หลัก ฐาน10 ขึ้นมาให้เรา
"const $1 = $RANDOM ",
variableตัวอื่นที่สามารถใช้ได้สามารถดูได้จาก [link](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables) นี้เลย
```
		"body": [
			"const $1: ${2|string, number, boolean|} = $RANDOM",
			"$0"
		],
```

###สรุป

####ข้อดีของการเขียน Snippets เอง
* ทำให้เราสามารถลดเวลาจากการเขียนโค้ดที่มีหน้าตาเหมือนๆกันได้
* code style จะออกมาใกล้เคียงกันเพราะสร้างมาจาก template snippet เดียวกัน

####แล้วข้อเสียหละ
* Code snippet จะอาจจะซ้ำกันได้ในหลายไฟล์ อย่างเช่น log อาจจะมาจาก Built-in, Marketplace plugin หรือว่ามาจากที่เราเขียน
ดังนั้นเราต้องเขียน description ให้เข้าใจง่ายเพื่อที่จะสามารถเรียกใช้ snippet ที่ถูกต้อง
* ใช้เวลาเขียน snippet file เพราะถ้าอยากได้ snippet ดีๆอาจจะต้องมีการ refactor หลายรอบ

####ข้อจำกัด
* Code snippet ไม่สามารถใช้ในได้ใน Code snippet ถ้ายังอยู่ใน snippet edit process

####ของแถม

อันนี้เป็นตัวอย่าง Snippets ที่ผมใช้จริงๆในฝั่ง Javascript นะครับ
อันแรกจเป็นการสร้าง Arrow Function ขึ้นมาแบบมี Return value
```
"Create Arrow Function":{
	   "prefix":"cf",
	   "body":[
		  "const $1 = (($2) => {",
		  "",
		  "\t $0",
		  "\treturn",
		  "})"
	   ],
	   "description":"Create Arrow function"
	},
```

ส่วนอันที่สองก็เป็นการสร้าง Arrow Function เหมือนกันแต่ไม่มี Return value
```
"Create Arrow Function without return": {
	   "prefix":"cfn",
	   "body":[
		  "const $1 = (($2) =>{",
		  "",
		  "\t $0",
		  "})"
	   ],
	   "description":"Create Arrow function without return"
	},
```


ก่อนจากกันนี้ก็เป็นโพสต์แรกของผม ภาษาในการเขียนอาจจะยังเข้าใจยาก ถ้าหากมีตำแนะนำติชม คอมเมนต์กันมาเลยนะครับ แล้วเจอกันใหม่ในบทความหน้าครับผม : )