10 Visual Studio Code Extensions ที่จะช่วยให้การเขียนโค้ดสะดวกยิ่งขึ้น

ลงเถอะ แนะนำ…

กลายเป็น editor ยอดนิยมไปแล้วกับ Visual Studio Code ของทาง Microsoft ด้วยความที่ทั้งเร็ว และมีลูกเล่นให้เล่นค่อนข้างเยอะ วันนี้ก็เลยจะมาแนะนำ 10 extensions ที่จะช่วยให้การเขียนโค้ดของเรานั้นสะดวกและรวดเร็วยิ่งขึ้นครับ

1. Import Cost

มาเริ่มที่ตัวแรกกันเลยกับ Import cost ซึ่งเป็น extension ที่จะคอยแสดงขนาดไฟล์ของ package ที่เรา import เข้ามา โดยจะแสดงให้เห็นทันทีว่า package ตัวไหนอ้วนเกินไป

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

2. GitLens — Git supercharged

ถึงแม้ว่า Visual Studio Code จะมีการฝัง Git เข้ามาในตัว editor อยู่แล้ว แต่เราสามารถที่จะเพิ่มพลังให้มันได้อีกด้วย GiteLens โดยเมื่อเราเอา cursor ไปวางไว้ที่โค้ด ก็จะเห็นได้เลยว่าใครเป็นคน commit โค้ดส่วนนั้นขึ้นไป เมื่อไหร่ แถมยังดู changes ย้อนหลังได้อีกด้วย เรียกว่าควรมีติดไว้จริงๆ สำหรับโปรเจคที่ทำกันหลายคน

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

3. Better Comments

บางทีการเขียน TODO ก็อาจจะกลืนไปกับ comment ทั่วไปมากเกินไปจนแยกไม่ออกว่า อันไหนคือ comment อันไหนคือ TODO แต่ Better Comments จะช่วยแยกสีให้เราอย่างชัดเจน ทำให้ไม่ต้องไปนั่งไล่หาว่าอะไรเป็นอะไร มองปุ๊บ รู้ปั๊บ

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

4. Auto Close Tag

เวลาเราเขียนโค้ดบางทีเราก็อยากทำงานเร็วๆ เขียนแค่ tag เปิดก็พอ ขี้เกียจเขียน tag ปิด เราก็เลยควรที่จะลง Auto Close Tag ไว้ให้ editor ทำการปิด tag ให้เรา จะได้ลดเวลาในการเขียนไปได้อีกนิดนึง

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

5. Relative Path

แน่นอนว่าการเขียนโปรเจคใหญ่ๆ ที่มี folders และ files เยอะๆ จะทำให้เราพบกับปัญหาการ import file ให้ถูก path แต่ไม่ต้องกลัวครับ เพราะเรามีตัวช่วยอย่าง Relative Path จะช่วย import file ให้เราแบบสะดวก รวดเร็ว ถูกต้อง แม่นยำ ไม่หลงทาง

https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath

6. Auto Rename Tag

ใครที่เขียน React หรือ Vue บ่อยๆ ก็มักจะต้องคอยเปลี่ยนชื่อ component tag เปิด และ ปิด ให้ตรงกันอยู่เสมอ ซึ่งเราก็มีตัวช่วยอย่าง Auto Rename Tag ที่จะคอยจับคู่ tag เปิด/ปิด ทำให้เราสามารถแก้ไขชื่อ tag แค่ที่เดียวพอ ไม่ต้องเปลี่ยนเยอะ

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

7. npm intellisense

ใครที่เขียน JavaScript ก็คงจะต้องมีการเรียกใช้งาน npm packages อย่างแน่นอน โดยการ import/require npm package แต่ละทีก็ต้อง import/require ชื่อ package ให้ถูก ซึ่งตัว npm intellisense จะช่วย autocomplete ชื่อ package ให้เรา ทำให้สามารถทำงานต่อได้อย่างรวดเร็ว

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

8. Bracket Pair Colorizer

เชื่อว่าหลายๆ คนมักจะเจอปัญหาว่า ลืมใส่วงเล็บ หรือมีปีกกาเกินมา อยู่เป็นประจำ แถมบางทีก็ดูไม่ค่อยออกว่าอะไรจับคู่กับอะไรอยู่ แต่เจ้า Bracket Pair Colorizer จะช่วยให้เรามองภาพออกได้เป็นแบบสีรุ้งเลย ทำให้เราเห็นชัดเจนมากขึ้นว่าตัวไหนขาดหรือตัวไหนเกิน โลกนี้สดใสขึ้นมาทันที

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

9. Quokka.js

Quokka.js เป็นของเล่นที่จะทำให้เหล่านักพัฒนา JavaScript ทำการเขียนโค้ดได้สนุกมากยิ่งขึ้น เพราะเราสามารถที่จะดูผลลัพธ์ได้ทันทีว่า function นี้ return ค่าอะไรออกมา หรือจะดูค่าของ array หรือ object ก็ยังได้ ไม่ง้อ console.log() แถมยังมีการเช็ค performance ของ function แบบ real-time ได้อีกด้วย… แต่ว่าต้องจ่ายตังค์เพิ่มนะถ้าจะใช้แบบ full features

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

10. Settings Sync

คนที่ทำงานในคอมหลายๆ เครื่อง มักจะต้องเสียเวลาคอยตั้งค่าให้ Visual Studio Code นั้นมีหน้าตาและการตั้งค่าที่เหมือนๆ กัน แต่จะง่ายกว่ามั้ยถ้าเราตั้งค่าที่เครื่องเดียว แล้วให้อีกเครื่องนั้นเปลี่ยนตามไปด้วย? ก็ง่ายสิ!! และง่ายมากๆ ด้วยถ้าเราใช้ Settings Sync เพราะว่ามันจะช่วยอัพโหลดการตั้งค่าต่างๆ ของเราขึ้น GitHub ทำให้เราสามารถไปดาวน์โหลดการตั้งค่าของเราไปใช้ในคอมเครื่องอื่นๆ ได้อย่างสะดวกสบายนั่นเอง

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

ถ้าเพื่อนๆ คนไหนมี extensions อื่นๆ ที่น่าสนใจ หรือใช้แล้วชอบ อยากให้คนอื่นได้ใช้บ้าง ก็บอกได้เลยครับ

Like what you read? Give Win Eiwwongcharoen a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.