Wrikka Learn

Settings

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

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

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

Panel

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

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

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

Theme

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

Icon

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

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

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

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"
  }
},

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