VS Code (Visual Studio Code) คือโปรแกรมแก้ไขโค้ดที่โปรแกรมเมอร์ทั่วโลกใช้มากที่สุด ฟรี เบา และขยายความสามารถได้มหาศาล บทความนี้รวมเทคนิคและคีย์ลัดที่ช่วยให้คุณเขียนโค้ดได้เร็วขึ้นแบบมืออาชีพ ═══════════════════════════════════════ 📌 1. VS Code คืออะไร ทำไมถึงนิยม ═══════════════════════════════════════ VS Code เป็น Code Editor ฟรีจาก Microsoft ทำงานได้ทุกระบบ (Windows/Mac/Linux) จุดเด่น: • ฟรีและเปิดซอร์ส น้ำหนักเบา เปิดเร็ว • รองรับทุกภาษา (PHP, Python, JavaScript ฯลฯ) • Extensions หลายหมื่นตัว เพิ่มความสามารถได้ • มี Terminal, Git, Debugger ในตัว • Auto-complete (IntelliSense) ฉลาด ═══════════════════════════════════════ ⌨️ 2. คีย์ลัดที่ต้องรู้ (Mac / Windows) ═══════════════════════════════════════ ทั่วไป: • Cmd/Ctrl + P → ค้นหาและเปิดไฟล์เร็ว • Cmd/Ctrl + Shift + P → เปิด Command Palette (ทำได้ทุกคำสั่ง) • Cmd/Ctrl + S → บันทึก • Cmd/Ctrl + / → คอมเมนต์/ยกเลิกคอมเมนต์บรรทัด แก้ไขโค้ด: • Cmd/Ctrl + D → เลือกคำถัดไปที่เหมือนกัน (แก้พร้อมกัน) • Alt + ↑ / ↓ → ย้ายบรรทัดขึ้น/ลง • Shift + Alt + ↓ → คัดลอกบรรทัดลงมา • Cmd/Ctrl + Shift + K → ลบทั้งบรรทัด • Cmd/Ctrl + F → ค้นหาในไฟล์ • Cmd/Ctrl + Shift + F → ค้นหาทั้งโปรเจกต์ หน้าจอ: • Cmd/Ctrl + B → ซ่อน/แสดงแถบข้าง • Cmd/Ctrl + ` → เปิด/ปิด Terminal • Cmd/Ctrl + \ → แบ่งหน้าจอ (split editor) ═══════════════════════════════════════ 🧩 3. Extensions แนะนำ ═══════════════════════════════════════ • Prettier → จัดรูปแบบโค้ดอัตโนมัติ • Live Server → เปิดเว็บ HTML พร้อมรีเฟรชอัตโนมัติ • Auto Rename Tag → แก้แท็ก HTML เปิด-ปิดพร้อมกัน • GitLens → ดูประวัติ Git ในตัว • PHP Intelephense → auto-complete สำหรับ PHP • Material Icon Theme → ไอคอนไฟล์สวยงาม • ES7+ React snippets → snippet สำหรับ React วิธีติดตั้ง: กดไอคอน Extensions (Cmd/Ctrl+Shift+X) แล้วค้นหาชื่อ ═══════════════════════════════════════ 💻 4. Integrated Terminal ═══════════════════════════════════════ VS Code มี Terminal ในตัว ไม่ต้องสลับหน้าต่าง ```bash # เปิด Terminal ด้วย Ctrl + ` แล้วใช้คำสั่งได้เลย php artisan serve npm run dev git status ``` • เปิดหลาย Terminal พร้อมกันได้ (กดเครื่องหมาย +) • แบ่งจอ Terminal ได้ (split) ═══════════════════════════════════════ ⚙️ 5. ตั้งค่า settings.json ═══════════════════════════════════════ ปรับแต่ง VS Code ผ่านไฟล์ตั้งค่า (Cmd/Ctrl+Shift+P → "Open Settings JSON") ```json { "editor.fontSize": 15, "editor.tabSize": 4, "editor.formatOnSave": true, "editor.wordWrap": "on", "files.autoSave": "afterDelay", "workbench.colorTheme": "Default Dark+" } ``` • formatOnSave → จัดรูปแบบโค้ดอัตโนมัติเมื่อบันทึก • autoSave → บันทึกอัตโนมัติ ═══════════════════════════════════════ ⚡ 6. Emmet — เขียน HTML เร็วสุด ๆ ═══════════════════════════════════════ พิมพ์ตัวย่อแล้วกด Tab จะขยายเป็นโค้ดเต็ม ```html <!-- พิมพ์ ! แล้ว Tab ได้โครง HTML ทั้งหน้า --> <!-- พิมพ์ div.card แล้ว Tab --> <div class="card"></div> <!-- พิมพ์ ul>li*3 แล้ว Tab --> <ul> <li></li> <li></li> <li></li> </ul> ``` ═══════════════════════════════════════ 🚀 7. เทคนิคเพิ่มประสิทธิภาพ ═══════════════════════════════════════ • Multi-cursor: กด Alt แล้วคลิกหลายจุด พิมพ์พร้อมกันได้ • Cmd/Ctrl + Click ที่ฟังก์ชัน → กระโดดไปที่นิยาม (Go to Definition) • F2 → เปลี่ยนชื่อตัวแปรทั้งไฟล์พร้อมกัน (Rename Symbol) • Zen Mode (Cmd/Ctrl+K Z) → โหมดโฟกัส ซ่อนทุกอย่าง • ลากไฟล์มาเทียบกันแบบ Split view • ใช้ Snippets สร้างโค้ดซ้ำ ๆ ได้เอง ═══════════════════════════════════════ ✅ 8. สรุป ═══════════════════════════════════════ • จำคีย์ลัดหลัก: Cmd/Ctrl+P (เปิดไฟล์), Cmd/Ctrl+Shift+P (คำสั่ง) • ติดตั้ง Extensions ที่ช่วยงาน เช่น Prettier, Live Server • เปิด formatOnSave ให้โค้ดสวยอัตโนมัติ • ฝึกใช้ Emmet และ Multi-cursor จะเขียนเร็วขึ้นมาก • ใช้ Terminal ในตัวเพื่อไม่ต้องสลับหน้าต่าง จำไว้: เครื่องมือที่ดี + ใช้เป็น = ทำงานเร็วขึ้นหลายเท่า ค่อย ๆ จำคีย์ลัดทีละอัน แล้วมันจะติดเป็นนิสัย 💙