VS Code มีอะไรเด็ดที่คุณอาจยังไม่รู้

VS Code ได้กลายเป็น Code Editor ยอดนิยมอันดับหนึ่งของโลกไปแล้ว แต่แม้แต่โปรแกรมเมอร์ที่ใช้มานานหลายปีก็อาจยังไม่รู้ว่า VS Code มีฟีเจอร์เจ๋งๆ ซ่อนอยู่มากมาย ที่สามารถเพิ่มประสิทธิภาพการทำงานได้อย่างมหาศาล

หากคุณคิดว่าคุณรู้จัก VS Code ดีแล้ว บทความนี้อาจทำให้คุณต้องเปลี่ยนความคิด เพราะเราจะเปิดเผยฟีเจอร์ลับ เทคนิคขั้นสูง และเคล็ดลับที่จะทำให้คุณใช้ VS Code เหมือนโปรแกรมเมอร์มืออาชีพตัวจริง มาดูกันว่ามีอะไรเด็ดๆ ที่คุณอาจพลาดไปบ้าง!

ฟีเจอร์ Command Palette ที่ไม่ธรรมดา

Command Palette (Ctrl+Shift+P) เป็นหัวใจสำคัญของ VS Code แต่หลายคนยังไม่รู้ว่ามันทำอะไรได้บ้าง นอกจากแค่เรียกคำสั่งธรรมดา

การย้าย Command Palette ได้

คุณสามารถลาก Command Palette ไปวางที่อื่นได้ โดยจับที่ขอบด้านบนแล้วลากไปที่ต้องการ หรือใช้ Customize Layout control ใน title bar เลือก Quick Input Positions ที่ต้องการ

Command Palette แบบพิเศษ

Quick Open (Ctrl+P) - ไม่ใช่แค่เปิดไฟล์

• @symbol - หา function, class, variable ในไฟล์ปัจจุบัน
• :line - ไปที่บรรทัดที่ระบุ (เช่น :42)
• :line:column - ไปที่บรรทัดและคอลัมน์ที่ระบุ (เช่น :42:10)
• >command - เหมือน Command Palette ธรรมดา
• ? - ดูคำสั่งทั้งหมดที่ใช้ได้

เทคนิคลับ: พิมพ์แค่ตัวอักษรแรกของแต่ละคำก็พอ เช่น "ttt" สำหรับ "Transform to Title Case"

การใช้ Keyboard Shortcuts ขั้นสูง

Ctrl+Tab - สลับไฟล์แบบ Alt+Tab ของ Windows Ctrl+Shift+O - เปิด Symbol navigator โดยตรง Ctrl+G - Go to line โดยตรง

ฟีเจอร์ Editor ขั้นสูงที่คุณควรรู้

Multi-Cursor Magic

Multi-cursor ใน VS Code ไม่ใช่แค่ Alt+Click ธรรมดา มีเทคนิคขั้นสูงมากมาย:

Selection-based Multi-cursor:

• Ctrl+D - เลือก instance ถัดไปของคำที่เลือกอยู่
• Ctrl+K, Ctrl+D - ข้าม instance ปัจจุบัน
• Ctrl+Shift+L - เลือกทุก instance ของคำที่เลือก
• Alt+Shift+I - สร้าง cursor ที่ปลายบรรทัดของทุกบรรทัดที่เลือก

Column Selection:

• Shift+Alt+Click - สร้าง cursor แบบสี่เหลี่ยม
• Ctrl+Shift+Alt+↑/↓ - ขยาย column selection

Text Transformation ที่ทรงพลัง

VS Code มีคำสั่งแปลงข้อความที่หลายคนไม่รู้:

Transform Commands:

• Transform to Uppercase - แปลงเป็นตัวใหญ่
• Transform to Lowercase - แปลงเป็นตัวเล็ก
• Transform to Title Case - แปลงเป็น Title Case
• Transform to Snake Case - แปลงเป็น snake_case
• Transform to Kebab Case - แปลงเป็น kebab-case

Sort Commands:

• Sort Lines Ascending - เรียงบรรทัดจาก A-Z
• Sort Lines Descending - เรียงบรรทัดจาก Z-A
• Sort Lines by Length - เรียงตามความยาว

Advanced Selection Techniques

Expand/Shrink Selection:

• Shift+Alt+→ - ขยายการเลือกออกไป
• Shift+Alt+← - ลดการเลือกลงมา

Smart Selection:

• Ctrl+L - เลือกทั้งบรรทัด
• *Ctrl+Shift+* - ไปที่ matching bracket
• Ctrl+] / Ctrl+[ - Indent/Outdent

ฟีเจอร์ Navigation และ Search ขั้นสูง

Go to Definition++

นอกจาก F12 (Go to Definition) แล้ว VS Code ยังมี:

• Alt+F12 - Peek Definition (ดูใน popup)
• Shift+F12 - Find All References
• Shift+Alt+F12 - Peek References
• Ctrl+F12 - Go to Implementation
• Ctrl+Shift+F10 - Peek Implementation

Search & Replace ขั้นมหาเทพ

Regular Expression Search:

• เปิด Regex mode ใน Search (Alt+R)
• ใช้ Capture Groups: (\w+)\s+(\w+) แล้ว Replace ด้วย $2 $1
• Search across files with exclude patterns

Advanced Replace Techniques:

• $0 - ข้อความที่ match ทั้งหมด
• $n - Capture group ที่ n
• ${n:/upcase} - แปลง capture group เป็นตัวใหญ่
• ${n:/downcase} - แปลง capture group เป็นตัวเล็ก

Timeline View - Local Source Control

Timeline view เป็น source control แบบ built-in ที่ให้คุณเห็น history ของไฟล์ รวมถึง Git commits และการ save

วิธีใช้:

1. เปิด Timeline view ใน Explorer
2. ดู snapshot ของการเปลี่ยนแปลง
3. คลิกเพื่อเปรียบเทียบกับ version ก่อนหน้า

Developer Experience ขั้นสูง

GitHub Copilot Chat และ Agent Mode

VS Code ปี 2025 มาพร้อมกับ MCP (Model Context Protocol) support และ Agent mode ที่ช่วยให้ AI เข้าใจโปรเจกต์ของคุณได้ดีขึ้น

Agent Mode Features:

• Custom Instructions - สร้างคำสั่งเฉพาะสำหรับโปรเจกต์
• Project Analysis - AI วิเคราะห์โครงสร้างโค้ด
• Context-Aware Suggestions - คำแนะนำที่เข้าใจบริบท

Next Edit Suggestions

ฟีเจอร์ใหม่ใน VS Code 2025 ที่ Copilot จะทำนายการแก้ไขถัดไปที่คุณกำลังจะทำ

Custom Instructions Generation

ใช้คำสั่ง "Chat: Generate Instructions" เพื่อให้ AI สร้าง custom instructions ที่เหมาะกับโปรเจกต์ของคุณ

ฟีเจอร์ UI/UX ที่ซ่อนอยู่

Zen Mode++

Zen Mode ไม่ใช่แค่ซ่อน UI ธรรมดา แต่มีการปรับแต่งได้เยอะมาก:

Zen Mode Settings:

• zenMode.fullScreen - เต็มจอหรือไม่
• zenMode.hideActivityBar - ซ่อน Activity Bar
• zenMode.hideStatusBar - ซ่อน Status Bar
• zenMode.hideLineNumbers - ซ่อนเลขบรรทัด
• zenMode.showTabs - แสดง tabs หรือไม่
• zenMode.centerLayout - จัดให้อยู่กลาง

เข้า Zen Mode: Ctrl+K Z
ออกจาก Zen Mode: กด Esc สองครั้ง

Floating Windows

คุณสามารถลาก Editor tab ออกมาเป็น floating window ได้ หรือใช้ "Move into New Window" จาก context menu

Custom Layout Control

VS Code ให้คุณปรับ layout ได้อย่างละเอียด:

• ลาก panels ไปที่ต้องการ
• ปรับขนาด sections
• สร้าง editor groups แบบต่างๆ

Terminal และ Integration ขั้นสูง

Terminal Powerhouse

JavaScript Debug Terminal: Terminal พิเศษที่ให้คุณ debug Node.js code ได้โดยอัตโนมัติ เพียงแค่รัน npm script หรือ node command

Terminal Tricks:

• Ctrl+Shift+5 - แบ่ง terminal เป็น panes
• Ctrl+Page Up/Down - สลับระหว่าง terminals
• Ctrl+` - เปิด/ปิด terminal panel

Git Integration ขั้นสูง

Source Control Tree View: เปลี่ยนจาก list view เป็น tree view ใน Source Control panel โดยไปที่ "..." > "View & Sort" > "View as Tree"

Git Commands ที่ซ่อนอยู่:

• Stage Selected Ranges - stage เฉพาะส่วนที่เลือก
• Git: Show Git Output - ดูคำสั่ง Git ที่รันจริง
• Undo Last Commit - undo commit ล่าสุด

Performance และ Productivity Hacks

Auto Save ขั้นสูง

Auto Save ไม่ใช่แค่ save อัตโนมัติ แต่มีโหมดต่างๆ ให้เลือก:

• afterDelay - save หลังจากหยุดพิมพ์
• onFocusChange - save เมื่อเปลี่ยน focus
• onWindowChange - save เมื่อเปลี่ยน window

Cursor Animation

เปิด smooth cursor animation เพื่อการพิมพ์ที่ลื่นไหลขึ้น:

{
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on"
}

Fast Scrolling Trick

กด Alt ขณะ scroll เพื่อ scroll ได้เร็วกว่าปกติ

Bracket Matching Enhancement

วาง cursor บน bracket ใดๆ จะเห็นการ highlight matching bracket ทันที

Extensions และ Marketplace ลับๆ

Hidden Extensions Features

Live Server: ไม่ใช่แค่ auto-refresh แต่สามารถ config port, path, และ browser ได้

GitLens Secret Features: นอกจาก Git blame แล้ว GitLens ยังมี Code Lens, File History, และ Repository insights

Runme Extension: ทำให้ README.md เป็น interactive และรันโค้ดได้ด้วยคลิกเดียว

Workspace-Specific Extensions

VS Code ให้คุณ recommend extensions สำหรับ workspace โดยการสร้างไฟล์ .vscode/extensions.json:

{
  "recommendations": [
    "ms-python.python",
    "ms-vscode.vscode-typescript-next"
  ]
}

Tips สำหรับ Advanced Users

Settings Sync ขั้นสูง

ใช้ GitHub account sync settings, keybindings, extensions, และ snippets ข้าม devices

Custom Keybindings

สร้าง keybindings ที่ซับซ้อนด้วย when conditions:

{
  "key": "ctrl+shift+r",
  "command": "workbench.action.reloadWindow",
  "when": "isDevelopment"
}

Workspace Settings vs User Settings

• User Settings - ใช้กับ VS Code ทั้งหมด
• Workspace Settings - ใช้เฉพาะโปรเจกต์
• Folder Settings - ใช้เฉพาะ folder

Profile Management

VS Code 2025 มี Profile system ที่ให้คุณสลับ settings, extensions, keybindings ตาม context ที่ต้องการ

Debugging ขั้นมหาเทพ

Advanced Breakpoints

• Conditional Breakpoints - หยุดเมื่อเงื่อนไขเป็นจริง
• Logpoints - log ข้อความโดยไม่หยุด execution
• Inline Breakpoints - หยุดที่จุดเฉพaะในบรรทัด

Multi-Target Debugging

Debug หลาย process พร้อมกันใน compound launch configurations

Remote Debugging

Debug code ที่รันบน container, WSL, หรือ remote server

Web Development Specific Features

Emmet ขั้นสูง

Emmet ไม่ใช่แค่ HTML abbreviations:

• CSS abbreviations - m10 เป็น margin: 10px;
• Custom snippets - สร้าง abbreviations ของตัวเอง
• Wrap with abbreviation - ห่อ content ด้วย HTML tags

Live Preview

Preview HTML files โดยตรงใน VS Code โดยไม่ต้องเปิด browser

Auto Rename Tag

เมื่อแก้ไข opening tag, closing tag จะเปลี่ยนตามอัตโนมัติ

รวมเทคนิคขั้นสูงสุด

Custom Tasks และ Build Systems

สร้าง tasks.json ที่ซับซ้อนสำหรับ build, test, deploy:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build-and-test",
      "dependsOrder": "sequence",
      "dependsOn": ["build", "test"]
    }
  ]
}

Launch Configurations ขั้นสูง

สร้าง launch.json ที่รองรับ multiple debugging scenarios:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Current File",
      "type": "node",
      "request": "launch",
      "program": "${file}",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Snippet System ขั้นสูง

สร้าง custom snippets ที่ใช้ variables, choices, และ transformations:

{
  "Console Log": {
    "prefix": "clg",
    "body": [
      "console.log('${1:label}:', ${2:variable});"
    ],
    "description": "Console log with label"
  }
}

สรุปและเคล็ดลับสำคัญ

VS Code มีฟีเจอร์ลับและเทคนิคขั้นสูงมากมายที่สามารถเปลี่ยนวิธีการทำงานของคุณไปโดยสิ้นเชิง การรู้จักฟีเจอร์เหล่านี้จะทำให้คุณเขียนโค้ดได้เร็วขึ้น แก้ปัญหาได้ดีขึ้น และทำงานได้อย่างมีประสิทธิภาพมากขึ้น

เคล็ดลับสำคัญที่ต้องจำ:

• Command Palette คือหัวใจสำคัญ - เรียนรู้การใช้ให้เชี่ยวชาญ
• Multi-cursor เป็นเทพธิดา - ใช้เป็นจะประหยัดเวลาได้มาก
• Keyboard shortcuts คือพลัง - จำ shortcuts สำคัญๆ ให้ได้
• Customization เป็นกุญแจ - ปรับแต่ง VS Code ให้เหมาะกับสไตล์การทำงาน
• Extensions ให้อำนาจ - เลือกใช้ extensions ที่เหมาะกับงาน

การเรียนรู้ฟีเจอร์เหล่านี้ต้องใช้เวลาและการปฏิบัติ แต่เมื่อคุณเชี่ยวชาญแล้ว คุณจะไม่สามารถกลับไปใช้ VS Code แบบเดิมได้อีก เพราะความสะดวกและประสิทธิภาพที่เพิ่มขึ้นจะทำให้การเขียนโค้ดกลายเป็นเรื่องสนุกและรวดเร็วกว่าที่เคย

🔵 Facebook: Superdev School  (Superdev)

📸 Instagram: superdevschool

🎬 TikTok: superdevschool

🌐 Website: www.superdev.school