Skip to main content

ใช้ Claude Code ใน VS Code

ติดตั้งและตั้งค่า Claude Code extension สำหรับ VS Code รับความช่วยเหลือ AI coding ด้วย inline diffs, @-mentions, plan review, และ keyboard shortcuts

Claude Code extension มี native graphical interface สำหรับ Claude Code ที่รวมเข้ากับ IDE ของคุณโดยตรง

ด้วย extension คุณสามารถ review และ edit แผนของ Claude ก่อนยอมรับ, auto-accept edits ขณะที่ทำ, @-mention ไฟล์พร้อม line ranges เฉพาะ, เข้าถึงประวัติการสนทนา, และเปิดการสนทนาหลายๆ ครั้งใน tabs หรือ windows แยก

ข้อกำหนดเบื้องต้น​

ก่อนติดตั้ง ตรวจสอบว่าคุณมี:

  • VS Code 1.98.0 หรือสูงกว่า
  • บัญชี Anthropic: paid Claude subscription (Pro, Max, Team, หรือ Enterprise) หรือบัญชี Claude Console ทำงานได้
tip

Extension รวม CLI (command-line interface) ของตัวเองสำหรับ chat panel เพื่อรัน claude ใน VS Code integrated terminal คุณยังต้องการ standalone CLI install ด้วย

ติดตั้ง Extension​

คลิก link สำหรับ IDE ของคุณเพื่อติดตั้งโดยตรง:

หรือใน VS Code กด Cmd+Shift+X (Mac) หรือ Ctrl+Shift+X (Windows/Linux) เพื่อเปิด Extensions view ค้นหา "Claude Code" และคลิก Install

เริ่มต้น​

1. เปิด Claude Code Panel​

ตลอด VS Code ไอคอน Spark ระบุ Claude Code คลิกไอคอน Spark ใน Editor Toolbar (มุมบนขวาของ editor) วิธีอื่นในการเปิด Claude Code:

  • Activity Bar: คลิกไอคอน Spark ใน left sidebar
  • Command Palette: Cmd+Shift+P / Ctrl+Shift+P พิมพ์ "Claude Code"
  • Status Bar: คลิก ✱ Claude Code ที่มุมล่างขวาของหน้าต่าง

2. ล็อกอิน​

ครั้งแรกที่เปิด panel หน้าจอล็อกอินจะปรากฏ คลิก Sign in และทำการ authorization ให้สมบูรณ์ในเบราว์เซอร์

3. ส่ง Prompt​

ถาม Claude ให้ช่วยกับ code หรือไฟล์ของคุณ ไม่ว่าจะเป็นการอธิบายว่าสิ่งต่างๆ ทำงานอย่างไร, debug ปัญหา, หรือทำการเปลี่ยนแปลง

tip

Claude เห็น selected text ของคุณโดยอัตโนมัติ กด Option+K (Mac) / Alt+K (Windows/Linux) เพื่อ insert @-mention reference เข้าสู่ prompt ของคุณ

4. Review การเปลี่ยนแปลง​

เมื่อ Claude ต้องการ edit ไฟล์ จะแสดง side-by-side comparison ของต้นฉบับและการเปลี่ยนแปลงที่เสนอ จากนั้นขอ permission คุณสามารถ accept, reject, หรือบอก Claude ว่าต้องการอะไรแทน

ใช้ Prompt Box​

  • Permission modes: คลิก mode indicator ที่ด้านล่างของ prompt box เพื่อสลับ modes
  • Command menu: คลิก / หรือพิมพ์ / เพื่อเปิด command menu
  • Context indicator: prompt box แสดงว่าคุณใช้ context window ของ Claude เท่าไหร่

Reference ไฟล์และโฟลเดอร์​

ใช้ @-mentions เพื่อให้ context ของ Claude เกี่ยวกับไฟล์หรือโฟลเดอร์เฉพาะ:

> Explain the logic in @auth (fuzzy matches auth.js, AuthService.ts, etc.)
> What's in @src/components/ (include a trailing slash for folders)

Resume การสนทนาที่ผ่านมา​

คลิกปุ่ม Session history ที่ด้านบนของ Claude Code panel เพื่อเข้าถึงประวัติการสนทนา

ปรับแต่ง Workflow ของคุณ​

เลือกที่อยู่ของ Claude​

คุณสามารถลาก Claude panel เพื่อวางตำแหน่งใหม่ที่ใดก็ได้ใน VS Code ไปยัง secondary sidebar, primary sidebar, หรือ editor area

รันการสนทนาหลายๆ ครั้ง​

ใช้ Open in New Tab หรือ Open in New Window จาก Command Palette เพื่อเริ่มการสนทนาเพิ่มเติม

สลับไปใช้ Terminal Mode​

เปิด Use Terminal setting และเลือกกล่องนั้น

VS Code Commands และ Shortcuts​

คำสั่งShortcutคำอธิบาย
Focus InputCmd+Esc (Mac) / Ctrl+Esc (Win/Linux)Toggle focus ระหว่าง editor และ Claude
Open in New TabCmd+Shift+Esc (Mac) / Ctrl+Shift+Esc (Win/Linux)เปิดการสนทนาใหม่เป็น editor tab
New ConversationCmd+N (Mac) / Ctrl+N (Win/Linux)เริ่มการสนทนาใหม่
Reopen Closed SessionCmd+Shift+T (Mac) / Ctrl+Shift+T (Win/Linux)เปิด Claude session tab ที่ปิดล่าสุด
Insert @-Mention ReferenceOption+K (Mac) / Alt+K (Win/Linux)Insert reference ไปยังไฟล์และ selection ปัจจุบัน

ตั้งค่า Extension​

Extension มีสองประเภทของ settings:

  • Extension settings ใน VS Code: ควบคุมพฤติกรรม extension ใน VS Code
  • Claude Code settings ใน ~/.claude/settings.json: แชร์ระหว่าง extension และ CLI
Settingค่าเริ่มต้นคำอธิบาย
useTerminalfalseเปิด Claude ใน terminal mode แทน graphical panel
initialPermissionModedefaultควบคุม approval prompts: default, plan, acceptEdits, หรือ bypassPermissions
autosavetrueAuto-save ไฟล์ก่อน Claude อ่านหรือเขียน
useCtrlEnterToSendfalseใช้ Ctrl/Cmd+Enter แทน Enter เพื่อส่ง prompts

ใช้ Third-Party Providers​

หากองค์กรของคุณใช้ Amazon Bedrock, Google Vertex AI, หรือ Microsoft Foundry ให้ตั้งค่า extension ให้ใช้ provider ของคุณแทน:

  1. เปิด Disable Login Prompt setting และเลือกกล่องนั้น
  2. ทำตามคู่มือการตั้งค่าสำหรับ provider ของคุณ:

ความปลอดภัยและความเป็นส่วนตัว​

Code ของคุณยังคงเป็นส่วนตัว Claude Code ประมวลผล code ของคุณเพื่อให้ความช่วยเหลือแต่ไม่ใช้เพื่อ train models

แก้ไขปัญหาที่พบบ่อย​

Extension ไม่ติดตั้ง​

  • ตรวจสอบว่าคุณมี VS Code เวอร์ชันที่ compatible (1.98.0 หรือใหม่กว่า)
  • ลองติดตั้งโดยตรงจาก VS Code Marketplace

ไอคอน Spark ไม่มองเห็น​

ไอคอน Spark ปรากฏใน Editor Toolbar เมื่อคุณเปิดไฟล์ หากคุณไม่เห็น:

  1. เปิดไฟล์: ไอคอนต้องการให้เปิดไฟล์ การมีเพียง folder เปิดอยู่ไม่เพียงพอ
  2. ตรวจสอบเวอร์ชัน VS Code: ต้องการ 1.98.0 หรือสูงกว่า
  3. Restart VS Code: รัน "Developer: Reload Window" จาก Command Palette

Cmd+Esc ไม่ทำงานบน macOS​

บน macOS Tahoe และใหม่กว่า Game Overlay shortcut ของระบบผูกกับ Cmd+Esc โดยค่าเริ่มต้น

  1. เปิด System Settings
  2. ไปที่ Keyboard, จากนั้น Keyboard Shortcuts, จากนั้น Game Controllers
  3. ยกเลิกการเลือก Game Overlay checkbox

ถอนการติดตั้ง Extension​

  1. เปิด Extensions view (Cmd+Shift+X / Ctrl+Shift+X)
  2. ค้นหา "Claude Code"
  3. คลิก Uninstall

ลบข้อมูล extension ด้วย (macOS):

rm -rf ~/Library/"Application Support"/Code/User/globalStorage/anthropic.claude-code

Linux:

rm -rf ~/.config/Code/User/globalStorage/anthropic.claude-code

Windows PowerShell:

Remove-Item -Recurse -Force "$env:APPDATA\Code\User\globalStorage\anthropic.claude-code"

ขั้นตอนต่อไป​