เปลี่ยน "Code รกรุงรัง" ให้เป็น "โครงสร้างสุดโปร" ด้วย VS Code 🚀
เคยไหม? เปิดโปรเจกต์เก่าขึ้นมาแล้วอยากจะร้องไห้ เพราะ Code พันกันมั่วไปหมด หรือบางทีรับงานต่อจากเพื่อนแล้วหาจุดเริ่มไม่เจอ ปัญหานี้แก้ได้ไม่ยากครับ ถ้าเราใช้เครื่องมือใน VS Code ให้เป็นประโยชน์
บทความนี้จะแชร์วิธีเปลี่ยน Code ที่อ่านยาก ให้กลายเป็นงานระดับพรีเมียมในไม่กี่ขั้นตอนครับ
1. ติดตั้ง "ช่างแต่งตัว" ประจำเครื่อง (Formatter Extensions)
ขั้นแรก เราต้องมีเครื่องมือจัด Format อัตโนมัติก่อนครับ ตัวที่แนะนำที่สุดคือ:
Prettier: ตัวจบสำหรับสาย Web (JS, HTML, CSS, JSON)
Black: มาตรฐานอันดับ 1 สำหรับชาว Python
Clang-Format: สำหรับสาย C, C++, Java
วิธีใช้: แค่กด Shift + Alt + F โค้ดที่เยื้องมั่วๆ ก็จะกลับมาตรงเป๊ะทันที!
2. ตั้งค่า "Save ปุ๊บ สวยปั๊บ" (Format on Save)
อย่าเสียเวลามานั่งกดจัด Format เองครับ ให้ VS Code ทำงานแทนเรา:
ไปที่ Settings (กด Ctrl + ,)
ค้นหาคำว่า Editor: Format On Save
ติ๊กถูกที่ช่องนั้น
ทีนี้ทุกครั้งที่เรากด Ctrl + S โค้ดของคุณจะถูกจัดระเบียบใหม่ให้สวยงามโดยอัตโนมัติ
3. ใช้พลังของการ "Refactor"
Code ที่ดี ไม่ควรมีฟังก์ชันเดียวที่ยาวเป็นร้อยบรรทัด VS Code มีฟีเจอร์ลับที่ช่วยเราแยกโค้ด (Extract) ได้ง่ายๆ:
Extract Method: คลุมดำส่วนของ Code ที่ทำงานเฉพาะเจาะจง -> คลิกขวาเลือก Refactor... -> เลือก Extract to function
Rename Symbol: อย่าใช้ชื่อตัวแปรว่า a, b, c ให้กด F2 ที่ชื่อตัวแปรเพื่อเปลี่ยนชื่อใหม่ให้สื่อความหมาย (มันจะเปลี่ยนให้ทั้งโปรเจกต์!)
4. ติดตั้ง "ตัวช่วยนำทาง" (Visual Aids)
การเพิ่ม Visual เล็กๆ น้อยๆ ช่วยให้สมองเราทำงานน้อยลงครับ:
Indent Rainbow: ใส่สีให้ช่องว่าง ทำให้เห็น Hierarchy ของ Code ชัดเจน
Error Lens: แสดงข้อความ Error ขึ้นมาที่ปลายบรรทัดเลย ไม่ต้องเอาเมาส์ไปชี้ให้เสียเวลา
Better Comments: ช่วยแยกประเภท Comment ด้วยสี (เช่น สีแดงสำหรับจุดที่ต้องระวัง, สีเขียวสำหรับคำอธิบาย)
5. ปรับ Mindset: "เขียนให้คนอ่าน ไม่ใช่แค่ให้คอมพิวเตอร์รัน"
เครื่องมือช่วยได้แค่หน้าตา แต่โครงสร้างที่ดีต้องเริ่มที่ Logic ครับ:
Early Return: เจอเงื่อนไขที่ไม่ใช่ ให้ return ออกไปก่อน อย่าใช้ if-else ซ้อนกันจนเป็นพลาสเตอร์
Single Responsibility: หนึ่งฟังก์ชัน ควรทำหน้าที่แค่ "อย่างเดียว" เท่านั้น
สรุป
การทำ Code ให้สวยไม่ใช่เรื่องเสียเวลา แต่มันคือการ ลงทุน เพื่อให้เราทำงานได้เร็วขึ้นในอนาคตครับ ใครที่มีเทคนิคจัด Code ใน VS Code เจ๋งๆ นอกเหนือจากนี้ มาแชร์กันได้ในคอมเมนต์เลยนะครับ! 👨💻✨
#VSCode #CleanCode #ProgrammingTips #DeveloperLife #WebDevelopment