VS Code เทคนิคที่ควรรู้ — คีย์ลัด Extensions และ Emmet

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 ในตัว ไม่ต้องสลับหน้าต่าง

# เปิด 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")

{
    "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 จะขยายเป็นโค้ดเต็ม

<!-- พิมพ์  ! แล้ว 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 ในตัวเพื่อไม่ต้องสลับหน้าต่าง จำไว้: เครื่องมือที่ดี + ใช้เป็น = ทำงานเร็วขึ้นหลายเท่า ค่อย ๆ จำคีย์ลัดทีละอัน แล้วมันจะติดเป็นนิสัย 💙