COOL IT IDEAS AND STUFF
8 VS Code Extensions I Actually Use
11-Jul-25
คัมภีร์เทพ IT
See the original english version Click here!
เคยบ้างไหม ที่ลง VS Code Extensions ไปตั้งหลายตัว เพราะเพื่อนร่วมงานหรือ Developer อื่น ๆ บอกว่าดี แต่สุดท้ายก็ใช้งานจริงเพียงแค่ไม่กี่ตัว และบทความนี้ก็เป็นอีก 8 VS Code Extensions ที่เหมาะกับการนำไปใช้ในงานประจำวันได้ คุณสามารถลองเลือก Extension ที่เหมาะกับการใช้งานของคุณได้
1. Prettier
ในการทำงาน อาจมีเพื่อนร่วมทีมคนนึงที่คิดว่า การใช้ “Space 2 ช่อง” เป็นแค่คำแนะนำอย่างหนึ่ง และคงมี Developer หลายคนที่รู้สึกเครียดและเป็นกังวล เพราะสไตล์การเขียน Code ไม่ตรงกันกับคนอื่น ๆ แต่ Prettier จะเข้ามาช่วยจบปัญหานั้น
แค่ติดตั้งมัน ตั้งค่า แล้วตั่งค่า “format on save” เพียงเท่านี้ ปัญหาเรื่อง Tabs กับ Spaces ก็จะหมดไป
ความจริงก็คือ Prettier ไม่ได้ช่วยทำให้ Code ของคุณถูกต้อง แต่มันช่วยให้ Code ดูดีและอ่านง่ายขึ้น
2. ESLint
คุณอาจคิดว่าได้เขียน Clean Code เรียบร้อยแล้ว แต่พอ ESLint เข้ามา มันกลับทำให้คุณได้รู้ว่า คุณเข้าใจผิดอย่างแรง
ถ้าถามว่า มันน่าหงุดหงิดไหม? ใช่ แล้วมันมีประโยชน์ไหม? ก็ใช่อีกนั่นแหละ
ที่จริง ESLint ก็เป็นเหมือน “เพื่อนที่จู้จี้ขี้บ่น แต่มีความจริงใจ” มันจะช่วยตรวจจับ Bug ให้คุณรู้ ก่อนที่ PM จะมาตำหนิคุณ
Trick: ถ้าคุณใช้ ESLint ร่วมกับ Prettier ก็เปรียบเหมือน คุณได้คู่ชีวิตในสาย Dev นั่นคือ ESLint จะคอย “ตักเตือน” เวลาคุณทำอะไรผิด ส่วน Prettier จะ “เก็บกวาด” ช่วยให้คุณกลับมาดูดีแม้คุณกำลังจะพัง เมื่อใช้คู่นี้แล้วชีวิต Coding ของคุณ ก็เหมือนมีผู้ช่วยส่วนตัวที่ทั้งเข้มงวดกวดขันคุณตลอดเวลา แต่ขณะเดียวกันก็เข้าใจคุณเป็นอย่างดี
3. GitLens
“ใครเป็นคนเขียน Function นี้?” — อ๋อ ผมเองครับ เขียนตอนตี 2 เมื่อ 6 สัปดาห์ที่แล้ว
GitLens จะเอาคำสั่ง Git blame มาใส่ใน Editor ของคุณได้อย่างมีสไตล์ แค่เอาเมาส์ชี้บนบรรทัดของ Code ก็จะเห็นชื่อคนเขียน วันที่ และ Commit Message
เมื่อใช้ GitLens ก็เหมือนคุณสามารถย้อนเวลากลับไปดูประวัติของ Code ในช่วงเวลาต่าง ๆ ได้
Bonus: มันยังสามารถโชว์การเปลี่ยนแปลงของไฟล์ย้อนหลัง เหมือนเป็นนักโบราณคดี แต่เป็นการขุดซากประวัติของ Code
ใครจะไปจำและสามารถพิมพ์ bg-gradient-to-tr from-pink-500 ได้ถูกต้องแม่นยำล่ะ
Extension ตัวนี้จะช่วยทำการ Autocomplete Class ของ Tailwind, แสดงตัวอย่าง, และเตือนให้เห็น Class ที่พิมพ์ผิ
ถ้าคุณใช้ Tailwind อยู่แล้ว Extension นี้คือ “ของที่ต้องมี”
กฎเหล็ก: ถ้า Tailwind อยู่ใน Tech Stack ของคุณ เจ้า Extension ตัวนี้ก็ต้องอยู่ใน VS Code ด้วยเช่นกัน
Comments ของคุณควรจะโดดเด่นเห็นชัด ไม่ใช่ซ่อนตัวเหมือนเศษกระดาษแผ่นเล็ก ๆ
Extension TODO, FIXME, !NOTE และ ?HACK ด้วยสีต่าง ๆ เพื่อให้สามารถเห็นได้ชัด ๆ
แต่จะว่าไปแล้ว มันก็เหมือนกระดาษ Post-it ที่เรืองแสงได้สำหรับ Code ของคุณ
พูดตรง ๆ คือ มันจะช่วยทำให้การอ่าน Code (ที่) ดีขึ้นกว่าเดิมหลายเท่า โดยเฉพาะเวลาคุณต้องกลับไปแก้ไข Code ที่เคยถูกเขียนไว้เมื่อนานมาแล้ว
6. REST Client
คุณสามารถทดสอบ APIs ได้ทันทีโดยที่ไม่ต้องออกจาก VS Code เพียงแค่เขียนไฟล์ .http แล้วกด Send จากนั้นคุณก็จะได้ Response กลับมาเลยใน Editor
มันเร็วกว่า Postman พอสมควรเวลาที่คุณอยู่ใน Flow ของการเขียน Code แถมไม่ต้องขยับ Mouse บ่อย ๆ ให้เมื่อยมืออีกด้วย
ข้อที่ต้องรู้ไว้: มันไม่สามารถทดแทน Postman ได้ทั้งหมด แต่สำหรับงานทั่วไปที่มักต้องทำอยู่บ่อย ๆ มันคือพระเอกอย่างแท้จริง
7. CodeSnap
คุณเคยอยากอวด Code ของคุณบน X หรือใน Blog บ้างไหม? CodeSnap จะช่วยทำให้ Code นั้นมีความสวยงามน่ามองมากขึ้น
มันจะทำการแปลง Code Snippet ของคุณให้เป็นรูปภาพสวย ๆ พร้อมให้คุณเลือก Themes, Fonts และ Backgrounds ได้ตามใจ
ในโลกความเป็นจริง: บางที “ความสวยงาม” ก็มีความสำคัญ โดยเฉพาะเวลาต้องโชว์ให้คนอื่นเห็น
Code ของคุณมีรูปแบบที่ซ้อนกันหลายชั้นไหม? มีวงเล็บซ้อนกันเพียบเลยใช่หรือไม่? และมันก็เริ่มทำให้คุณรู้สึกสับสนใช่ไหม?
Extension ตัวนี้จะช่วยแสดงวงเล็บที่จับคู่กันด้วยสีต่าง ๆ เพื่อให้คุณได้รู้ว่า Code นั้นอยู่ภายใต้ Block ไหน
มันเหมาะมากกับ Code ของ React ที่อ่านยากและซ้อนกันหลายชั้น หรือ Algorithm ซับซ้อนที่เหมือนภาพศิลปะ Abstract
สรุป
และนี่ก็เป็น 8 VS Code Extensions ที่เหมาะกับการนำไปใช้ในงานประจำวันได้ หวังว่าจะมี Extensions บางตัวในบทความนี้ที่คุณสามารถหยิบไปใช้งานเพื่อช่วยให้คุณทำงานสนุกขึ้นหรือมีประสิทธิภาพมากขึ้นได้
ที่มา: https://blog.stackademic.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด