ยกระดับการเขียนโค้ดด้วยเครื่องมือฟรีที่ทรงพลังที่สุดตัวหนึ่งของโลก
1. ใช้ Command Palette (Ctrl + Shift + P) ให้เป็น
Command Palette คือทางลัดเข้าสู่ทุกฟังก์ชันของ VS Code
เช่น
>Format Documentจัดโค้ดให้อ่านง่าย>Git: Cloneดึงโปรเจกต์จาก GitHub>Toggle Terminalเปิด/ปิดเทอร์มินัลในตัว
Tip: ไม่ต้องไปคลิกเมนู – พิมพ์คำสั่งแทนได้เลย
2. ใช้ Multi-Cursor (Alt + Click) แก้โค้ดหลายที่พร้อมกัน
คุณสามารถพิมพ์/ลบข้อความหลายบรรทัดพร้อมกันได้
หรือกด Ctrl + D เพื่อเลือกคำเดียวกันซ้ำ ๆ
เหมาะมากกับการแก้ชื่อฟังก์ชัน / ตัวแปรซ้ำ ๆ
3. Zen Mode และ Focus Mode
- กด
Ctrl + K Zเข้าสู่ Zen Mode (ไม่มีเมนู ไม่มี sidebar) - เหมาะกับการเขียนโค้ดแบบ “ลื่นสุดขีด”
- กด
Esc Escเพื่อออก
4. ใช้ Emmet ใน HTML/CSS
VS Code รองรับ Emmet พิมพ์ย่อ HTML ได้ เช่น:
htmlคัดลอกแก้ไขul>li.item$*5
จะได้:
<ul>
<li class="item1"></li>
<li class="item2"></li>
...
</ul>
5. เทคนิค Rename แบบปลอดภัย (F2)
- คลิกชื่อฟังก์ชันหรือตัวแปร
- กด
F2เพื่อเปลี่ยนชื่อแบบทั้งโปรเจกต์ - ไม่ต้องหา Replace เอง VS Code จะจัดให้ครบ
6. ใช้ Split Editor (Ctrl + ) เปิดไฟล์หลายอันข้างกัน
- เหมาะกับการดู HTML + CSS หรือ Python + Terminal
- ลากแท็บไฟล์ไปไว้ด้านข้างเพื่อ Split ได้ทันที
- กด
Ctrl + 1,Ctrl + 2เพื่อสลับหน้าต่าง
7. ปรับแต่ง Settings แบบ JSON สำหรับความยืดหยุ่น
เข้า Ctrl + Shift + P > Preferences: Open Settings (JSON)
ตัวอย่างที่ควรเพิ่ม:
{
"editor.fontSize": 16,
"editor.formatOnSave": true,
"files.autoSave": "afterDelay"
}
8. ตั้งค่า Task Automation ด้วย tasks.json
ใช้รันคำสั่งซ้ำๆ เช่น คอมไพล์, สร้างไฟล์, รันโปรแกรม
{
"label": "run python",
"type": "shell",
"command": "python main.py"
}
เรียกใช้ด้วย Ctrl + Shift + P > Run Task
9. ใช้ Extension ที่เหมาะกับสายงาน
- Python, Jupyter = สำหรับสาย Data
- Live Server = สำหรับ Frontend
- GitLens, Git Graph = สำหรับ DevOps
- REST Client = ทดสอบ API ได้ในไฟล์ .http
- Thunder Client = UI ทดสอบ API คล้าย Postman
10. ใช้ Terminal ในตัว (Ctrl + ~)
ไม่ต้องสลับหน้าจอไป Command Prompt
เปิด terminal ได้หลายแท็บ เช่น Git, Python, NodeJS
11. Snippets เขียนเทมเพลตโค้ดของตัวเอง
กำหนดใน File > Preferences > User Snippets
ตัวอย่าง (Python):
"Print Hello": {
"prefix": "hello",
"body": ["print(\"Hello, ${1:name}!\")"]
}
พิมพ์ hello แล้วกด Tab จะเติมโค้ดให้อัตโนมัติ
12. Debugger แบบ Built-in
- ใช้
Run and Debugเพื่อวาง breakpoints, ตรวจค่าตัวแปร - รองรับ Python, JS, TypeScript, NodeJS ฯลฯ
- ไม่ต้องเขียน
print()เพื่อไล่บั๊กอีกต่อไป
สรุป: ใช้ VS Code ให้ “โปร” ไม่ได้ยาก!
| ฟีเจอร์มือโปร | คำสั่ง/ทางลัด |
|---|---|
| Command Palette | Ctrl + Shift + P |
| Multi-cursor | Alt + Click |
| Rename ทั้งโปรเจกต์ | F2 |
| Terminal ในตัว | Ctrl + ~ |
| Split Window | Ctrl + \ |
| Format On Save | เปิดใน Settings |
| Snippet | สร้างใน user snippet |
| Git Integration | ใช้ Git Panel + GitLens |
| Debug แบบมี breakpoint | Tab “Run and Debug” |