สูตรโกงการใช้ 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	รีเซ็ตตำแหน่งการแสดงผลทั้งหมด
⭐	Preferences: Color Theme	เปลี่ยนธีม
⭐	Preferences: File Icon Theme	เปลี่ยนรูปแบบไอคอน
⭐	Preferences: Open User Settings (JSON)	การตั้งค่าแบบ JSON
⭐	Preferences: 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	เรียงจากมากไปน้อย

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 กับผู้อื่น

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 ระหว่างการใช้