Settings

ตั้งได้ 2 แบบ คือ

1. ตั้งค่าผ่าน UI => พิมพ์ f1 > Preferences: Open Settings (UI)

2. ตั้งค่าผ่าน setting.json => พิมพ์ f1 > Preferences: Open Settings (JSON)

Customization

Theme

ผมใช้ Github Dark Dimmed => เปลี่ยน Theme พิมพ์ f1 > Preferences: Color Theme

Icon

ผมใช้ Symbol Icon => เปลี่ยน Theme พิมพ์ f1 > File Icon Theme

Code Snippet

สร้างที่ C:\Users\<YourUsername>\AppData\Roaming\Code\User\snippets หรือพิมพ์ f1 + Snippets: Configure Snippets ก็ได้

เมื่อสร้างแล้ว เราพิมพ์นิดหน่อยมันจะมี autocomplete ให้กด

Panel

สามารถแบ่งเป็น 4 ส่วน และสามารถเปลี่ยนลากเปลี่ยนตำแหน่งได้

หลักๆ จะมี 5 ส่วน

สร้างลากวางได้นะ วิธีคือกดค้างแล้วลากวางเปลี่ยนตำแหน่งได้

Keyboard Shortcut

ตั้งค่า Shortcut ต่างๆได้ พิมพ์ f1 > Preferences: Open Keyboard Shortcuts

keyboard shortcut ที่ใช้บ่อยๆ

คำสั่ง	คีย์ลัด
ค้นหาไฟล์	Ctrl + P
ค้นหาในไฟล์ทั้งหมด	Ctrl + Shift + F
เปิด Command Palette	Ctrl + Shift + P
คัดลอกบรรทัดปัจจุบัน	Shift + Alt + ↓ / ↑
ลบทั้งบรรทัด	Ctrl + Shift + K
เลื่อนบรรทัดขึ้น/ลง	Alt + ↑ / ↓
คอมเมนต์/เลิกคอมเมนต์	Ctrl + /
เปิด/ปิด Terminal	Ctrl + ~
เปิด/ปิด Sidebar	Ctrl + B
เลือกตัวแปรที่เหมือนกัน	Ctrl + D
แก้ไขหลายจุดพร้อมกัน	Ctrl + Alt + ↑ / ↓
จัดระเบียบโค้ดอัตโนมัติ	Shift + Alt + F
สลับไฟล์ระหว่างแท็บ	Ctrl + Tab
ย้อนกลับไปจุดก่อนหน้า	Alt + ←
ไปข้างหน้า	Alt + →
ไปยัง Definition	F12
เปิด Peek Definition	Alt + F12
รีเนมตัวแปร (Rename)	F2
แสดง Quick Fix	Ctrl + .

Terminal

เปิดได้หลาย shell profile

กำหนด shell เริ่มต้น

settings.json

"terminal.integrated.defaultProfile.windows": "PowerShell",
"terminal.integrated.env.windows": {},
"terminal.integrated.focusAfterRun": "terminal",
"terminal.integrated.fontFamily": "MesloLGM Nerd Font",
"terminal.integrated.gpuAcceleration": "on",
"terminal.integrated.persistentSessionReviveProcess": "never",
"terminal.integrated.profiles.windows": {
  "NuShell": {
    "path": "nu.exe"
  }
},

เพิ่ม shell

settings.json

"terminal.integrated.defaultProfile.windows": "PowerShell",
"terminal.integrated.env.windows": {},
"terminal.integrated.focusAfterRun": "terminal",
"terminal.integrated.fontFamily": "MesloLGM Nerd Font",
"terminal.integrated.gpuAcceleration": "on",
"terminal.integrated.persistentSessionReviveProcess": "never",
"terminal.integrated.profiles.windows": {
  "NuShell": {
    "path": "nu.exe"
  }
},

Debugging

Source Control

ใช้สำหรับ Git

Extensions ที่ผมใช้

ชื่อ	รายละเอียด
Even Better TOML	ปรับปรุงการทำงานกับไฟล์ TOML
Vue - Official	เครื่องมือพัฒนา Vue.js อย่างเป็นทางการ
Pretty TypeScript Errors	แสดงข้อผิดพลาด TypeScript ในรูปแบบอ่านง่าย
Todo Tree	จัดการ TODO ในโค้ด
CSS Variable Autocomplete	แนะนำตัวแปร CSS อัตโนมัติ
UnoCSS	สนับสนุน UnoCSS ใน VSCode
TailwindCSS	เพิ่มประสิทธิภาพการใช้ TailwindCSS
Markdown Preview Github Styling	แสดง Markdown สไตล์ GitHub
publint	ตรวจสอบความผิดพลาดของแพ็คเกจแบบเรียลไทม์
Biome	จัดรูปแบบและตรวจสอบโค้ด
Error Lens	แสดงข้อผิดพลาดในบรรทัดที่เกิดปัญหา
Git File History	แสดงประวัติการเปลี่ยนแปลงไฟล์
Dependency Cruiser TS	แสดงภาพความสัมพันธ์ของโมดูล
Npm package.json Inspector	แสดงข้อมูลแพ็คเกจใน package.json
npm Dependency Links	เพิ่มลิงก์ไปยังหน้า npm ของแพ็คเกจ
Postman	ทดสอบ API ได้โดยตรงจาก VSCode
Preview.js	ดูตัวอย่างคอมโพเนนต์ Vue, React ฯลฯ
GistPad	จัดการ GitHub Gists ใน VSCode
Excalidraw	วาดแผนภาพและสเก็ตช์ไอเดีย
Smart Clicks	คลิกนำทางโค้ดอัจฉริยะ
Bracket Pair Colorizer	เน้นสีวงเล็บคู่
Continue	AI ช่วยโค้ดทุกขั้นตอน
Codeium	AI ช่วยเขียนโค้ดฟรี
Aide	AI ช่วยจัดการโค้ด, คอมเมนต์, UI
Cline	AI โค้ดอัตโนมัติใน IDE