บทความ IT เจ๋งๆ
9 VSCode Extensions มีประโยชน์สำหรับ Frontend Developers ในปี 2022
11-มี.ค.-22
คัมภีร์เทพ IT
Visual Studio Code หรือ VSCode ถือเป็นหนึ่งใน Code Editor ที่ได้รับความนิยมอย่างมาก และถูก Programmers/Developers ใช้งานมากที่สุดเครื่องมือหนึ่ง สิ่งที่ทำให้ VSCode ได้รับความนิยมก็คือ Extensions และในบทความนี้จะมาแนะนำ 9 VSCode Extensions มีประโยชน์สำหรับ Frontend Developers ในปี 2022
หากคุณต้องการทราบวิธีการติดตั้ง VSCode Extensions สามารถตรวจสอบ Official Documentation ได้ที่นี่
1. Quokka.js
Quokka เป็น VSCode Extension ที่ยอดเยี่ยมและมีประโยชน์มาก มันเป็นเครื่องมือที่ช่วยเพิ่มประสิทธิภาพการทำงานของ Developer สำหรับการสร้าง Prototype ของ JavaScript / TypeScript อย่างรวดเร็ว ค่า Runtime จะได้รับการ Update และแสดงใน IDE ของคุณถัดจาก Code ขณะที่คุณกำลังพิมพ์
เมื่อคุณเขียน Code อะไรก็ตาม มันจะแสดงผลออกมาทันที:
หลังจากติดตั้ง Extension แล้ว ให้กด Ctrl/Cmd + Shift + P เพื่อแสดง Command Palette ของตัว Editor จากนั้นพิมพ์ Quokka เพื่อดู ศรหะ ของคำสั่งที่มีอยู่ จากนั้น Select และ Run คำสั่ง New JavaScript File หรือ Start on Current File
ณ ตอนนี้คุณก็พร้อมใช้งานแล้ว เพียงเริ่มพิมพ์ Code ใน Editor ของคุณ แล้วดูว่าเกิดอะไรขึ้น
2. Code Runner
Code Runner จะ Run Code Snippets หรือ Code File สำหรับหลายภาษา Programming รวมทั้ง JavaScript
มันค่อนข้างคล้ายกับ Quokka แต่รองรับหลาย ๆ ภาษา Programming และความสามารถ Run Code Snippet เพียงตัวเดียว
3. Import Cost
Extension นี้จะแสดงขนาดของ Package ที่ถูก Import ในบรรทัดเดียวกันของ Editor ในฐานะของ Front-end Developer เราควรให้ความสำคัญกับปริมาณของ Package ที่ถูก Import ด้วย เนื่องจากมันมีผลในเรื่อง Performance
4. REST Client
ในฐานะของ Web Developer เรามักจะต้องทำ HTTP Requests ด้วย REST API สำหรับการตรวจสอบ API และตรวจสอบ Responses เรามักจะใช้เครื่องมืออย่าง Postman แต่คำถามที่น่าสนใจคือ แล้วทำไมเราต้องใช้ App อื่น ในเมื่อ Editor ของคุณสามารถทำในสิ่งเดียวกันได้อย่างง่ายดาย REST Client จะช่วยให้เราสามารถส่ง HTTP Requests และดู Response ใน Visual Studio Code ได้โดยตรง
5. Live Server
หากคุณต้องการดูตัวอย่าง HTML Page ก่อน คุณอาจเปิดไฟล์ HTML ใน Browser ของคุณได้โดยตรง
แต่วิธีนี้ ก็มีข้อเสียอยู่ 2 เรื่อง:
- การเปิดไฟล์ HTML โดยตรง หมายถึง เปิดผ่าน File Protocol จากนั้น JS Runtime Environment จะแตกต่างไปจากไฟล์ที่ Load ผ่าน HTTP Protocol
- หลังจากที่คุณแก้ไขไฟล์ HTML แล้ว Page จะไม่ Refresh ให้โดยอัตโนมัติ
ในกรณีนี้ Live Server สามารถช่วยเราได้ มันสามารถ Launch Local Development Server ด้วย Live Reload Feature สำหรับ Static & Dynamic Pages นี่อาจเป็น Extension ที่หลาย ๆ คนมักใช้งานอยู่เป็นประจำ
6. Image preview
เมื่อเรา Import รูปภาพใน HTML หรือ CSS รูปภาพนั้นจะแสดงใน Sidebar ด้วย Feature นี้ จะทำให้เราสามารถสังเกตได้อย่างรวดเร็วว่า เราเขียน Code ถูกต้องหรือไม่
7. JSON to TS
Type Definitions ของ TypeScript ใน Project มักจะต้องสอดคล้องกับ Format ของ JSON Data มันสามารถช่วยเรา Convert JSON Objects เป็น Typescript Interfaces
คุณสามารถ Convert จากการ Select (Shift + Ctrl + Alt + S):
8. Tabnine
Tabnine เป็น AI Code Completion Assistant เพื่อช่วยเพิ่มความแม่นยำในการเขียน Code และเป็นการช่วยเพิ่มประสิทธิภาพอีกด้วย
หลังจากที่ติดตั้งแล้ว คุณจะพบว่ามันมีประสิทธิภาพมากกว่าที่คิดไว้
9. Hexdump
Extension นี้ สามารถแสดงไฟล์ที่ต้องการเป็นเลขฐานสิบหก (Hexadecimal)
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด