เปลี่ยน "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 ทำงานแทนเรา:

1. ไปที่ Settings (กด Ctrl + ,)

2. ค้นหาคำว่า Editor: Format On Save

3. ติ๊กถูกที่ช่องนั้น

ทีนี้ทุกครั้งที่เรากด 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