10 Visual Studio Code Extensions ที่จะช่วยให้การเขียนโค้ดสะดวกยิ่งขึ้น
ลงเถอะ แนะนำ…
กลายเป็น editor ยอดนิยมไปแล้วกับ Visual Studio Code ของทาง Microsoft ด้วยความที่ทั้งเร็ว และมีลูกเล่นให้เล่นค่อนข้างเยอะ วันนี้ก็เลยจะมาแนะนำ 10 extensions ที่จะช่วยให้การเขียนโค้ดของเรานั้นสะดวกและรวดเร็วยิ่งขึ้นครับ
1. Import Cost
มาเริ่มที่ตัวแรกกันเลยกับ Import cost ซึ่งเป็น extension ที่จะคอยแสดงขนาดไฟล์ของ package ที่เรา import เข้ามา โดยจะแสดงให้เห็นทันทีว่า package ตัวไหนอ้วนเกินไป
2. GitLens — Git supercharged
ถึงแม้ว่า Visual Studio Code จะมีการฝัง Git เข้ามาในตัว editor อยู่แล้ว แต่เราสามารถที่จะเพิ่มพลังให้มันได้อีกด้วย GiteLens โดยเมื่อเราเอา cursor ไปวางไว้ที่โค้ด ก็จะเห็นได้เลยว่าใครเป็นคน commit โค้ดส่วนนั้นขึ้นไป เมื่อไหร่ แถมยังดู changes ย้อนหลังได้อีกด้วย เรียกว่าควรมีติดไว้จริงๆ สำหรับโปรเจคที่ทำกันหลายคน
3. Better Comments
บางทีการเขียน TODO ก็อาจจะกลืนไปกับ comment ทั่วไปมากเกินไปจนแยกไม่ออกว่า อันไหนคือ comment อันไหนคือ TODO แต่ Better Comments จะช่วยแยกสีให้เราอย่างชัดเจน ทำให้ไม่ต้องไปนั่งไล่หาว่าอะไรเป็นอะไร มองปุ๊บ รู้ปั๊บ
4. Auto Close Tag
เวลาเราเขียนโค้ดบางทีเราก็อยากทำงานเร็วๆ เขียนแค่ tag เปิดก็พอ ขี้เกียจเขียน tag ปิด เราก็เลยควรที่จะลง Auto Close Tag ไว้ให้ editor ทำการปิด tag ให้เรา จะได้ลดเวลาในการเขียนไปได้อีกนิดนึง
5. Relative Path
แน่นอนว่าการเขียนโปรเจคใหญ่ๆ ที่มี folders และ files เยอะๆ จะทำให้เราพบกับปัญหาการ import file ให้ถูก path แต่ไม่ต้องกลัวครับ เพราะเรามีตัวช่วยอย่าง Relative Path จะช่วย import file ให้เราแบบสะดวก รวดเร็ว ถูกต้อง แม่นยำ ไม่หลงทาง
6. Auto Rename Tag
ใครที่เขียน React หรือ Vue บ่อยๆ ก็มักจะต้องคอยเปลี่ยนชื่อ component tag เปิด และ ปิด ให้ตรงกันอยู่เสมอ ซึ่งเราก็มีตัวช่วยอย่าง Auto Rename Tag ที่จะคอยจับคู่ tag เปิด/ปิด ทำให้เราสามารถแก้ไขชื่อ tag แค่ที่เดียวพอ ไม่ต้องเปลี่ยนเยอะ
7. npm intellisense
ใครที่เขียน JavaScript ก็คงจะต้องมีการเรียกใช้งาน npm packages อย่างแน่นอน โดยการ import/require npm package แต่ละทีก็ต้อง import/require ชื่อ package ให้ถูก ซึ่งตัว npm intellisense จะช่วย autocomplete ชื่อ package ให้เรา ทำให้สามารถทำงานต่อได้อย่างรวดเร็ว
8. Bracket Pair Colorizer
เชื่อว่าหลายๆ คนมักจะเจอปัญหาว่า ลืมใส่วงเล็บ หรือมีปีกกาเกินมา อยู่เป็นประจำ แถมบางทีก็ดูไม่ค่อยออกว่าอะไรจับคู่กับอะไรอยู่ แต่เจ้า Bracket Pair Colorizer จะช่วยให้เรามองภาพออกได้เป็นแบบสีรุ้งเลย ทำให้เราเห็นชัดเจนมากขึ้นว่าตัวไหนขาดหรือตัวไหนเกิน โลกนี้สดใสขึ้นมาทันที
9. Quokka.js
Quokka.js เป็นของเล่นที่จะทำให้เหล่านักพัฒนา JavaScript ทำการเขียนโค้ดได้สนุกมากยิ่งขึ้น เพราะเราสามารถที่จะดูผลลัพธ์ได้ทันทีว่า function นี้ return ค่าอะไรออกมา หรือจะดูค่าของ array หรือ object ก็ยังได้ ไม่ง้อ console.log() แถมยังมีการเช็ค performance ของ function แบบ real-time ได้อีกด้วย… แต่ว่าต้องจ่ายตังค์เพิ่มนะถ้าจะใช้แบบ full features
10. Settings Sync
คนที่ทำงานในคอมหลายๆ เครื่อง มักจะต้องเสียเวลาคอยตั้งค่าให้ Visual Studio Code นั้นมีหน้าตาและการตั้งค่าที่เหมือนๆ กัน แต่จะง่ายกว่ามั้ยถ้าเราตั้งค่าที่เครื่องเดียว แล้วให้อีกเครื่องนั้นเปลี่ยนตามไปด้วย? ก็ง่ายสิ!! และง่ายมากๆ ด้วยถ้าเราใช้ Settings Sync เพราะว่ามันจะช่วยอัพโหลดการตั้งค่าต่างๆ ของเราขึ้น GitHub ทำให้เราสามารถไปดาวน์โหลดการตั้งค่าของเราไปใช้ในคอมเครื่องอื่นๆ ได้อย่างสะดวกสบายนั่นเอง
ถ้าเพื่อนๆ คนไหนมี extensions อื่นๆ ที่น่าสนใจ หรือใช้แล้วชอบ อยากให้คนอื่นได้ใช้บ้าง ก็บอกได้เลยครับ
