บทความ IT เจ๋งๆ

15 VS Code Extensions ที่ช่วยเพิ่ม Productivity ของ Developer

11-ก.พ.-26

คัมภีร์เทพ IT

Visual Studio Code จะทรงพลังแค่ไหนก็ขึ้นอยู่กับ Extensions ที่คุณเลือกใช้ บทความนี้จึงได้รวบรวม 15 VS Code Extensions ที่ช่วยเพิ่ม Productivity ของ Developer ซึ่งจะช่วยลดความซับซ้อนของ Workflows, เขียน Code ได้ Clean ขึ้น และมีประสิทธิภาพมากขึ้น

1. GitLens

GitLens จะช่วยยกระดับประสบการณ์การใช้งาน Git ของคุณให้ดีมากขึ้นไปอีกขั้น

คุณสามารถเห็นได้ทันทีว่า Code ในแต่ละบรรทัด ถูกแก้ไขโดยใคร เมื่อไหร่ และด้วยเหตุผลอะไร โดยสามารถดูได้โดยตรงจาก Editor เมื่อเอา Mouse ไปวางบนบรรทัดที่ต้องการ ระบบจะแสดง Commit History, Author และ Link ไปยังการเปลี่ยนแปลงทั้งหมด นอกจากนี้ยังสามารถเปรียบเทียบ Branches และสำรวจประวัติของไฟล์ย้อนหลังได้โดยที่ไม่ต้องออกจาก VS Code ซึ่งเป็นสิ่งสำคัญมากในการทำความเข้าใจพัฒนาการของ Project และช่วยให้การทำงานร่วมกันในทีมมีประสิทธิภาพมากยิ่งขึ้น

2. Tabnine

Tabnine มีการใช้ AI ในการคาดเดา Code ที่คุณกำลังจะเขียนในบรรทัดถัดไป

มันจะเรียนรู้รูปแบบการเขียน Code ของคุณ จึงทำให้คำแนะนำที่ได้ มี Style ใกล้เคียงกับที่คุณใช้จริง ตัวอย่างเช่น สามารถ Autocomplete React Component พร้อม Props และ Logic ของ State หรือสร้าง Function Templates ทั้งชุดให้ได้ทันที ซึ่งสิ่งเหล่านี้จะช่วยลดงานที่ต้องทำซ้ำๆ และลดโอกาสเกิด Syntax Errors เล็กๆ น้อยๆ ทำให้ความเร็วในการเขียน Code โดยรวมดีขึ้นอย่างเห็นได้ชัด

3. Codeium

Codeium เป็น AI Code Assistant แบบฟรี ที่รองรับหลายภาษา Programming

คุณสามารถใช้มันสร้าง Functions, Classes หรือ Boilerplate Code ได้ทันที ตัวอย่างเช่น การสร้าง REST API Endpoint จะเร็วขึ้นมาก เพราะ Codeium สามารถแนะนำ Function Structure ที่พร้อมใช้งานได้ทันที มันเหมาะอย่างยิ่งสำหรับ Developer ที่ต้องการเพิ่ม Productivity ด้วย AI โดยที่ไม่ต้องเสียเงินเพื่อสมัคร Package

4. Prettier

Prettier จะช่วยให้ Code ของคุณ มีความ Clean และมีรูปแบบที่สอดคล้องกันทั้งหมด มันรองรับภาษา Programming ต่างๆ ไม่ว่าจะเป็น JavaScript, TypeScript, HTML, CSS, JSON และอื่นๆ

มันจะช่วยตัดปัญหาเรื่องการถกเถียงเกี่ยวกับ Space, Indentation หรือแม้แต่การขึ้นบรรทัดใหม่ ส่วนในเรื่องการทำงานเป็นทีมนั้น Prettier จะช่วยให้ทุกคนใช้ Coding Style เดียวกัน ซึ่งจะช่วยให้การ Review Code ทำได้ง่ายขึ้น และยังช่วยลดความขัดแย้งภายในทีมอีกด้วย

5. ESLint

ESLint ช่วยตรวจจับ Errors และบังคับใช้ Coding Standard ใน JavaScript และ TypeScript

แทนที่จะไปเจอปัญหาตอน Runtime, ESLint จะช่วยแจ้งเตือนปัญหาให้เห็นได้ทันทีในขณะที่พิมพ์ Code อยู่ ซึ่งจะช่วยให้คุณรักษาคุณภาพของ Code ให้อยู่ในระดับสูงได้ นอกจากนี้ยังสามารถกำหนด Rules เองได้ ทำให้สามารถปรับให้เข้ากับ Workflow ของทีม หรือ Style ส่วนตัวได้อย่างยืดหยุ่น

6. Live Server

Live Server จะ Refresh Browser ให้โดยอัตโนมัติทุกครั้งที่คุณทำการบันทึกไฟล์ HTML, CSS หรือ JavaScript

นี่คือ Extension ที่เข้ามาเปลี่ยนเกมของ Frontend Development เพราะคุณสามารถเห็นผลลัพธ์ของการแก้ไขได้ในทันที โดยที่ไม่ต้องกด Reload ด้วยตัวเอง อีกทั้งยังช่วยให้การทดสอบ UI และการปรับแก้งาน ทำได้รวดเร็วขึ้นมากอีกด้วย

7. REST Client

REST Client จะช่วยให้คุณส่ง HTTP Requests ได้โดยตรงจาก VS Code ผ่านไฟล์ .http

คุณสามารถทดสอบ Endpoints ได้ทั้งแบบ GET, POST, PUT หรือ DELETE ได้โดยที่ไม่ต้องออกจาก Editor สิ่งนี้จะช่วยลดความยุ่งยากในการสลับไปใช้เครื่องมือภายนอกอย่าง Postman และทำให้ Workflow ของการทดสอบ API มีความกระชับมากขึ้น

8. Docker

Docker Extension จะช่วยให้คุณ Build, Run และจัดการ Containers ได้โดยตรงจาก VS Code

คุณสามารถดู Logs, Run คำสั่ง และตรวจสอบ Images ต่างๆ ได้โดยไม่ต้องออกจาก Editor หาก Projects ของคุณต้องพึ่งพา Container เป็นหลัก Extension นี้จะช่วยให้ Workflow ง่ายขึ้น และลดการสลับ Context ระหว่างเครื่องมือ

9. GitHub Copilot

GitHub Copilot คือ AI Coding Assistant ที่ช่วยเขียนโค้ด สร้าง Test และแม้แต่แนะนำ Documentation

ต่างจาก Autocomplete แบบพื้นฐาน Copilot เข้าใจ Context ของทั้งโปรเจกต์ ตัวอย่างเช่น สามารถสร้าง Express.js Route พร้อม Error Handling ที่เหมาะสมได้ภายในไม่กี่วินาที ช่วยให้การพัฒนาโค้ดเร็วและลื่นไหลยิ่งขึ้น

10. Thunder Client

Thunder Client ถือเป็นทางเลือกที่รวดเร็วและมีน้ำหนักเบากว่า Postman โดยทำงานอยู่ภายใน VS Code

มันรองรับ Collections, Authentication และ Environment Variables และสำหรับ Backend Developer นี่คือ Extension ที่จะช่วยประหยัดเวลาในการทำงานได้ เพราะมันสามารถทดสอบ API ได้ทันทีโดยไม่ต้องออกจาก Editor

11. Tailwind CSS IntelliSense

Extension นี้จะช่วยเพิ่มความสามารถในการพัฒนา Tailwind CSS ด้วย Autocomplete, Syntax Highlighting และ Linting และแทนที่จะต้องจำ Utility Class นับร้อยๆ Classes, IntelliSense จะช่วยแนะนำ Classes ที่เหมาะสมให้ในขณะที่พิมพ์ ซึ่งจะช่วยเร่งความเร็วในการจัดการ Style ฝั่ง Frontend และลด Errors ลงได้มากพอสมควร

12. Path Intellisense

Path Intellisense จะช่วย Autocomplete Path ของไฟล์ในขณะที่พิมพ์ เพื่อรองรับการ Import หรือการเชื่อมโยงไฟล์ต่างๆ คุณไม่จำเป็นต้องเดาชื่อ Folder หรือค้นหา Directories ด้วยตนเอง โดยเฉพาะใน Projects ขนาดใหญ่ที่มีโครงสร้างซับซ้อนและซ้อนกันหลายระดับ อีกทั้ง Extension นี้ยังช่วยให้การทำงาน มีความถูกต้องและรวดเร็วยิ่งขึ้น

13. Error Lens

Error Lens จะแสดง Errors และ Warnings ให้เห็นได้โดยตรงภายใน Editor แทนที่จะไปอยู่ใน Problems Tab การแสดงผลลักษณะแบบ Real-Time นี้จะช่วยให้สามารถ Debug ได้เร็วขึ้น และลดโอกาสที่ Error เล็กๆ น้อยๆ จะหลุดรอดออกไปโดยไม่ทันได้สังเกต

14. Peacock

Peacock จะช่วยให้คุณกำหนดรหัสสีให้กับ Workspaces ของ VS Code หากคุณทำงานหลาย Projects พร้อมกัน คุณจะสามารถรู้ได้ทันทีว่า Editor ที่เปิดอยู่นั้นเป็น Project ไหน เพียงแค่ดูจากสีของ Editor ซึ่งสิ่งนี้จะช่วยลดความสับสนในการทำงานระหว่าง Projects

15. Better Comments

Better Comments จะช่วยให้คุณจัดหมวดหมู่ Comments ได้ ไม่ว่าจะเป็น Note, Warning, TODO หรือ Highlight โดยใช้สีที่แตกต่างกัน

สิ่งนี้จะช่วยทำให้ Comment อ่านง่ายขึ้น และช่วยให้ Developer คนอื่น (รวมถึงตัวคุณเองในอนาคต) เข้าใจส่วนที่สำคัญของ Code ได้รวดเร็วขึ้น

สรุป

และนี่ก็เป็น 15 VS Code Extensions ที่ช่วยเพิ่ม Productivity ของ Developer ซึ่งการเลือก Extensions ที่เหมาะสมสามารถเปลี่ยน VS Code จาก Editor ธรรมดาให้กลายเป็นเครื่องมือเพิ่ม Productivity ได้อย่างแท้จริง ลองเลือกใช้งาน Extensions ที่ตรงกับงานที่คุณต้องทำ แล้วค่อยปรับแต่งเพิ่มเติม เพื่อช่วยให้การเขียน Code มีประสิทธิภาพและลื่นไหลมากขึ้นในระยะยาว

ที่มา: https://medium.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

 

ประเภทบทความ