สูตรโกงการใช้ Visual Studio Code | นครโค้ด สอนพัฒนาโปรแกรม

🧭 ทั่วไปและการนำทาง

Key	การใช้งาน
`F1` หรือ `Ctrl` + `Shift` + `P`	Command Palette
`Ctrl` + `F` หรือ `F3`	ค้นหาไฟล์ปัจจุบัน
`Ctrl` + `E` หรือ `Ctrl` + `P`	ไปยังไฟล์ในโปรเจกต์
`Ctrl` + `G`	ไปยังบรรทัดที่กำหนด
`Ctrl` + `Shift` + `O`	ไปยัง Symbol
`Ctrl` + `T`	แสดง Symbol ทั้งหมด
`Ctrl` + `,`	เปิดหน้า Settings
`Ctrl` + `K` จากนั้น `Ctrl` + `T`	เปิดการตั้งค่า Theme
`Ctrl` + `K` จากนั้น `Ctrl` + `S`	เปิด Keybindings

✒️ Cursor และ Selection

Key	การใช้งาน
`Ctrl` + `D`	เลือกข้อมูลซ้ำกัน
`Alt` + `⬆️⬇️`	ย้ายบรรทัดไปยังบน/ล่าง
`Shift` + `Alt` + `⬆️⬇️`	คัดลอกบรรทัดไปยังบน/ล่าง
`Alt` + `Click`	เพิ่ม Cursor
`Ctrl` + `Alt` + `⬆️⬇️`	เพิ่ม Cursor ด้านบน/ล่าง
`Ctrl` + `U`	ยกเลิกการเพิ่ม Cursor เมื่อล่าสุด
`Ctrl` + `L`	เลือกบรรทัดปัจจุบัน

📝 Editing

Key	การใช้งาน
`Ctrl` + `D`	เลือกข้อมูลซ้ำกัน
`Ctrl` + `/`	สลับ Block Comment
`Alt` + `Z`	สลับ Word Wrap
`Ctrl` + `Shift` + `K`	ลบบรรทัด
`Ctrl` + `X`	ตัดหรือลบบรรทัด (หากไม่ได้ Select อะไร)
`Ctrl` + `C`	คัดลอกบรรทัด (หากไม่ได้ Select อะไร)
`Ctrl` + `Enter`	สร้างบรรทัดใหม่ด้านล่าง
`Ctrl` + `Shift` + `Enter`	สร้างบรรทัดใหม่ด้านบน
`Tab`	เยื้องหน้า
`Shift` + `Tab`	เยื้องหลัง
`Ctrl` + `[` และ `]`	เยื้องบรรทัด
`Ctrl` + `Shift` + `[` และ `]`	ซ่อนและขยายโค้ด
`Ctrl` + `Space`	เปิด Suggestion (Autocomplete)
`Shift` + `Alt` + `F`	จัดเรียงไฟล์ (Formatting)
`F2`	เปลี่ยนชื่อ Symbol
`F12`	ไปยัง Definition
`Ctrl` + `.`	เปิด Quick Fix
`Ctrl` + `K` จากนั้น `M`	เปลี่ยนภาษาโปรแกรม

🗃️ การจัดการไฟล์

Key	การใช้งาน
`Ctrl` + `N`	สร้างไฟล์ใหม่
`Ctrl` + `O`	เปิดไฟล์
`Ctrl` + `S`	บันทึกไฟล์
`Ctrl` + `Shift` + `S`	บันทึกไฟล์ใหม่…
`Ctrl` + `K` จากนั้น `S`	บันทึกไฟล์ทั้งหมด
`Ctrl` + `W`	ปิดแท็บ
`Ctrl` + `Shift` + `T`	เปิดแท็บที่เพิ่งปิด
`Ctrl` + `Tab`	สลับแท็บต่อไป
`Ctrl` + `Shift` + `Tab`	สลับแท็บก่อนหน้า
`Ctrl` + `K` จากนั้น `Enter`	คงแท็บของ Preview Mode
`Ctrl` + `K` จากนั้น `P`	คัดลอก Path ของไฟล์ปัจจุบัน
`Ctrl` + `K` จากนั้น `R`	เปิดไฟล์ปัจจุบันบน Explorer

📺 การแสดงผล

Key	การใช้งาน
`F11`	สลับการใช้ Fullscreen
`Ctrl` + `+/-`	ซูมเข้า/ออก
`Ctrl` + `B`	เปิด/ปิด Sidebar
`Ctrl` + `J`	เปิด/ปิด Panel
`Ctrl` + `	เปิด/ปิด Terminal
`Ctrl` + `Shift` + `	สร้าง Terminal ใหม่
`Ctrl` + `Shift` + `E`	เปิด/ปิด Explorer
`Ctrl` + `Shift` + `F`	เปิด/ปิดการค้นหาทั้งโปรเจกต์
`Ctrl` + `Shift` + `X`	เปิด/ปิด Extensions
`Ctrl` + `Shift` + `Y`	เปิด/ปิด Output
`Ctrl` + `Shift` + `M`	เปิด/ปิด Problems

⚙️ คำสั่ง

คำสั่ง	ความหมาย
`Emmet: Wrap with Abbreviation`	HTML Wrap Tag
`Emmet: Remove Tag`	ลบ HTML Tag
`View: Reset View Locations`	รีเซ็ตตำแหน่งการแสดงผลทั้งหมด
`codeferences: Color Theme`	เปลี่ยนธีม
`codeferences: File Icon Theme`	เปลี่ยนรูปแบบไอคอน
`codeferences: Open User Settings (JSON)`	การตั้งค่าแบบ JSON
`codeferences: Open Workspace Settings (JSON)`	การตั้งค่า Workspace แบบ JSON
`View: Toggle Minimap`	เปิด/ปิด Minimap
`View: Toggle Breadcrumbs`	เปิด/ปิด Breadcrumbs
`View: Toggle Editor Sticky Scroll`	เปิด/ปิด Editor Sticky Scroll
`View: Toggle Tree Sticky Scroll`	เปิด/ปิด Tree Sticky Scroll
`Fold All`	ยุบโค้ดทั้งหมด
`Unfold All`	ขยายโค้ดทั้งหมด
`Git: Clone`	คำสั่ง `git clone`
`Git: Abort Merge`	คำสั่ง `git merge --abort`
`Git: Abort Rebase`	คำสั่ง `git rebase --abort`
`Developer: Reload Window`	เริ่ม VSCode ใหม่
`Extensions: Enable All Extensions`	เปิดการใช้งานทุก Extensions
`Extensions: Disable All Installed Extensions`	ปิดการใช้งานทุก Extensions
`Terminal: Clear`	ล้างการแสดงผลของ Terminal
`Terminal: Kill All Terminals`	ปิด Terminal ทุกอัน
`File: Compare Active File With…`	เปรียบเทียบไฟล์…
`File: Compare Active File with Clipboard`	เปรียบเทียบไฟล์กับ Clipboard
`Sort Lines Ascending`	เรียงจากน้อยไปมาก
`Sort Lines Descending`	เรียงจากมากไปน้อย
`Transform to Lowercase`	แปลงอักษรเป็นตัวพิมพ์เล็ก
`Transform to Uppercase`	แปลงอักษรเป็นตัวพิมพ์ใหญ่

💾 บันทึกไฟล์เพื่อ Format Code ทันที

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": "always",
    "source.fixAll": "always"
  }
}

🔌🛠️ Extensions (General)

ลิงก์	เกี่ยวกับ
VS Code Themes	รวมตัวอย่าง Themes ทั้งหมด
VSCode Themes Extensions	รวม Extensions เกี่ยวกับ Themes ทั้งหมด
VSCode AI Extensions	รวม Extensions เกี่ยวกับ AI ทั้งหมด
VSCode Tag:AI	อีกคำค้นหา Extensions เกี่ยวกับ AI ทั้งหมด

🔌🪜 Extensions (Coding & Formatting)

ลิงก์	เกี่ยวกับ
Prettier - Code formatter	โปรแกรมจัดเรียงโค้ดหลากหลายภาษา
EditorConfig for VS Code	โปรแกรมช่วยรักษาความสม่ำเสมอของโค้ด
Path Intellisense	Autocomplete ของชื่อไฟล์
Text Power Tools	รวมเครื่องมือสำหรับแก้ไขข้อความพิเศษ
change-case	เปลี่ยนรูปแบบตัวพิมพ์ของตัวแปร
VS Sequential Number	จัดเรียงจำนวนตามบรรทัดอย่างรวดเร็ว
Sort lines	จัดเรียงบรรทัดตามอักขระ
vscode-faker	สร้างข้อมูลปลอม
Lorem ipsum	สร้างข้อความปลอม
Placeholder Images	สร้างลิงก์รูปภาพปลอม
jumpy	ย้ายตำแหน่ง Cursor อย่างรวดเร็ว
Live Share	แชร์การพัฒนาโค้ดแบบ Real-time กับผู้อื่น

ตัวอย่างการตั้งค่าใช้งาน Prettier

{
  // Default
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // Per-language
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

🔌🌈 Extensions (Coding with Visual)

ลิงก์	เกี่ยวกับ
Code Spell Checker	ตรวจคำผิด
indent-rainbow	Indent แสดงสีเพื่อการจำแนกที่ง่ายขึ้น
Bracket Pair Color DLW	Bracket แสดงสีเพื่อการจำแนกที่ง่ายขึ้น
Rainbow CSV	CSV แสดงสีเพื่อจำแนกที่ง่ายขึ้น
Blockman	สร้างกรอบให้กับช่วง Indent
colorize	แสดงสีของโค้ดสี
Better Comments	แสดงสี Comments
Trailing Spaces	แสดงสี Trailing Space
Highlight Matching Tag	แสดงสีของ HTML Tag ที่จับคู่กัน
Image preview	แสดงรูปภาพของลิงก์เมื่อชี้ค้างไว้

ตัวอย่างตั้งค่าให้ Code Spell Checker ไม่ตรวจสอบภาษาไทย

{
  "cSpell.ignoreRegExpList": ["/[^\\x00-\\x7F]+/"],
}

🔌👀 Extensions (Viewer)

ลิงก์	เกี่ยวกับ
Browse Lite	เว็บบราวเซอร์บน VSCode
Data Preview	แสดง Data Visualization ของไฟล์ที่รองรับ
Regex Previewer	แสดงตัวอย่างการใช้ Regex
Excel Viewer	แสดงไฟล์ Spreadsheet
Edit csv	CSV Editor
PDF Viewer	แสดงไฟล์ PDF
Draw.io Integration	โปรแกรมสร้าง Diagram
Excalidraw	โปรแกรมสร้าง Diagram และกราฟฟิค
Test Explorer UI	แสดงผล Testing ในโปรเจกต์
GitHub Repositories	แสดง Repository ของ GitHub
Resource Monitor	แสดงทรัพยากรที่ใช้บนคอม

🔌📚 Extensions (Organize)

ลิงก์	เกี่ยวกับ
Project Manager	จัดเรียงโปรเจกต์ที่มี
Project Dashboard	จัดเรียงโปรเจกต์ที่มี
Peacock	กำหนดสีหน้าต่างของโปรเจกต์
Window Colors	กำหนดสีหน้าต่างของโปรเจกต์แบบสุ่ม
Todo Tree	รายการสิ่งที่ต้องทำ
TODO Highlight	ไฮไลท์รายการสิ่งที่ต้องทำ
Bookmarks	บุ๊คมาร์กตำแหน่งของโปรเจกต์

🔌⚠️ Extensions (Errors)

ลิงก์	เกี่ยวกับ
Error Lens	ช่วยตรวจสอบ Error ที่ง่ายขึ้น
SonarLint	โปรแกรมช่วยตรวจสอบคุณภาพโค้ด

🔌🏃‍♂️ Extensions (Runner)

ลิงก์	เกี่ยวกับ
Code Runner	รันโค้ดหลากหลายภาษา
Five Server	บันทึกไฟล์เพื่อ Reload Web Page ทันที
SQLTools	เครื่องมือใช้ SQL

🔌🌵 Extensions (Git)

ลิงก์	เกี่ยวกับ
GitLens	เครื่องมือเสริมการใช้ Git
Git Graph	Git GUI บน VSCode
gitignore	รวมรายการ gitignore แต่ละภาษาโปรแกรม

🔌🌐 Extensions (RESTful Client)

ลิงก์	เกี่ยวกับ
REST Client	ใช้งาน REST บน VSCode
Thunder Client	คล้ายกับโปรแกรม Postman

🔌🧸 Extensions (Toys)

ลิงก์	เกี่ยวกับ
CodeSnap	Screenshot Code
WakaTime	ติดตามกิจกรรมการพัฒนาโปรแกรม
Code Time	ติดตามกิจกรรมการพัฒนาโปรแกรม
Power Mode	เอฟเฟคระหว่างโค้ด
background	เพิ่มพื้นหลังหน้าจอโค้ด
GlassIt-VSC	หน้าต่าง Transparent บน Windows
VSCode Animations	เพิ่ม Animation ระหว่างการใช้