Claude Code VS Code Extension – Complete Setup & Usage Guide

✅ Official VS Code Extension Available มีส่วนขยายอย่างเป็นทางการใน VS Code

Great News: There IS an official "Claude Code for VS Code" extension published by Anthropic in the VS Code Extensions marketplace. You can install it directly from the marketplace or use the CLI method.
ข่าวดี: มีส่วนขยาย "Claude Code for VS Code" อย่างเป็นทางการที่เผยแพร่โดย Anthropic ใน VS Code Extensions marketplace คุณสามารถติดตั้งได้โดยตรงจาก marketplace หรือใช้วิธี CLI

Method 1: VS Code Marketplace Installation (Recommended) วิธีที่ 1: การติดตั้งจาก VS Code Marketplace (แนะนำ)

1. Open VS Code / เปิด VS Code
2. Open Extensions panel (Ctrl/Cmd + Shift + X) / เปิดแผง Extensions
3. Search for "Claude Code for VS Code" / ค้นหา "Claude Code for VS Code"
4. Look for the extension by Anthropic (publisher should show "Anthropic") / มองหาส่วนขยายโดย Anthropic (ผู้เผยแพร่ควรแสดง "Anthropic")
5. Click "Install" / คลิก "Install"
6. Restart VS Code if prompted / รีสตาร์ท VS Code หากมีข้อความแจ้ง

Method 2: CLI Installation (Alternative) วิธีที่ 2: การติดตั้งผ่าน CLI (ทางเลือก)

Step 1: Install Claude Code CLI using npm:

ขั้นตอนที่ 1: ติดตั้ง Claude Code CLI โดยใช้ npm:

npm install -g @anthropic-ai/claude-code

Step 2: Launch in VS Code:

ขั้นตอนที่ 2: เปิดใช้งานใน VS Code:

1. Open VS Code / เปิด VS Code
2. Open your project / เปิดโปรเจกต์ของคุณ
3. Open integrated terminal (Ctrl/Cmd + `) / เปิดเทอร์มินัลแบบรวม
4. Type: claude / พิมพ์: claude

claude

Authentication & Initial Setup การรับรองตัวตนและการตั้งค่าเริ่มต้น

After installing the extension (either method), you'll need to authenticate:

หลังจากติดตั้งส่วนขยายแล้ว (ทั้งสองวิธี) คุณจะต้องรับรองตัวตน:

• Extension automatically integrates with VS Code / ส่วนขยายจะรวมกับ VS Code โดยอัตโนมัติ
• Authentication setup begins when first launched / การตั้งค่าการรับรองความถูกต้องเริ่มขึ้นเมื่อเปิดครั้งแรก
• Claude Code interface becomes available / อินเตอร์เฟซ Claude Code พร้อมใช้งาน

Getting Started การเริ่มต้นใช้งาน

When prompted:

เมื่อถูกถาม:

• Choose Claude App Login to use your subscription / เลือก Claude App Login เพื่อใช้การสมัครสมาชิกของคุณ
• Complete browser authentication / ทำการรับรองผ่านเบราว์เซอร์ให้เสร็จ
• Start using commands like "understand my codebase" / เริ่มใช้คำสั่งเช่น "เข้าใจโค้ดเบสของฉัน"

Launching the Extension Interface การเปิดอินเตอร์เฟซส่วนขยาย

Core IDE Integration Features คุณสมบัติการรวม IDE หลัก

1. Automatic Context Sharing / การแชร์บริบทอัตโนมัติ

The current selection/tab in the IDE is automatically shared with Claude Code:

การเลือก/แท็บปัจจุบันใน IDE จะถูกแชร์กับ Claude Code โดยอัตโนมัติ:

• Select code in VS Code / เลือกโค้ดใน VS Code
• Claude automatically receives this context / Claude รับบริบทนี้โดยอัตโนมัติ
• No need to copy/paste code snippets / ไม่จำเป็นต้องคัดลอก/วางส่วนของโค้ด

2. Visual Diff Viewing / การดูความแตกต่างแบบภาพ

View diffs directly in VS Code when Claude Code changes the code:

ดูความแตกต่างโดยตรงใน VS Code เมื่อ Claude Code เปลี่ยนโค้ด:

• VS Code editor displays a diff / โปรแกรมแก้ไข VS Code แสดงความแตกต่าง
• Accept or reject changes directly / ยอมรับหรือปฏิเสธการเปลี่ยนแปลงโดยตรง
• Familiar VS Code diff interface / อินเตอร์เฟซความแตกต่างที่คุ้นเคยของ VS Code

3. Diagnostic Sharing / การแชร์การวินิจฉัย

Diagnostic errors from the IDE are automatically shared:

ข้อผิดพลาดการวินิจฉัยจาก IDE ถูกแชร์โดยอัตโนมัติ:

• Linting errors automatically sent / ส่งข้อผิดพลาด linting อัตโนมัติ
• Syntax errors shared in real-time / แชร์ข้อผิดพลาด syntax แบบเรียลไทม์
• Claude suggests fixes based on diagnostics / Claude แนะนำการแก้ไขตามการวินิจฉัย

File Reference & Image Support การอ้างอิงไฟล์และการรองรับรูปภาพ

File References:

• Type @filename to reference files / พิมพ์ @filename เพื่ออ้างอิงไฟล์
• Drag and drop files into chat / ลากและวางไฟล์ลงในแชท
• Use Cmd/Ctrl + Option/Alt + K for quick file references / ใช้ Cmd/Ctrl + Option/Alt + K สำหรับการอ้างอิงไฟล์อย่างรวดเร็ว

Image Support:

• Paste screenshots directly into chat / วางสกรีนช็อตลงในแชทโดยตรง
• Drag image files into chat / ลากไฟล์รูปภาพลงในแชท
• Claude analyzes UI mockups, diagrams, etc. / Claude วิเคราะห์ mockup UI, ไดอะแกรม ฯลฯ

Extension Not Appearing / ส่วนขยายไม่ปรากฏ

# Check VS Code Extensions panel
# Restart VS Code completely
# Look for Claude icon in Activity Bar
# Try keyboard shortcut Cmd/Ctrl + Esc

Account Balance / ยอดเงินในบัญชี

If you see "I don't have a balance in my premium account":

หากคุณเห็น "ฉันไม่มียอดเงินในบัญชีพรีเมียม":

• Check claude.ai account status / ตรวจสอบสถานะบัญชี claude.ai
• Verify subscription is active and paid / ตรวจสอบว่าการสมัครสมาชิกยังใช้งานได้และจ่ายแล้ว
• Wait for billing cycle reset if at usage limits / รอให้รีเซ็ตรอบการเรียกเก็บเงินหากถึงขีดจำกัดการใช้งาน

Context Not Sharing / บริบทไม่แชร์

# Ensure you've selected code before opening Claude
# Check that diagnostic sharing is enabled
# Verify the file is saved (unsaved changes may not share)
# Restart extension if context seems stale

Extension Settings การตั้งค่าส่วนขยาย

Access via VS Code Settings (Ctrl/Cmd + ,):

เข้าถึงผ่านการตั้งค่า VS Code:

{
  "claudeCodeChat.wsl.enabled": true,
  "claudeCodeChat.wsl.distro": "Ubuntu", 
  "claudeCodeChat.wsl.nodePath": "/usr/bin/node",
  "claudeCodeChat.wsl.claudePath": "/usr/local/bin/claude"
}

Custom Commands คำสั่งที่กำหนดเอง

Create custom slash commands for the extension:

สร้างคำสั่งแบบ slash ที่กำหนดเองสำหรับส่วนขยาย:

# Create custom commands directory
mkdir .claude/commands/

# Add custom command file
# Example: security-review.md
echo "Analyze this code for security vulnerabilities and suggest fixes" > .claude/commands/security-review.md

Usage in extension: Type /security-review in chat

การใช้งานในส่วนขยาย: พิมพ์ /security-review ในแชท

Workflow Optimization การปรับปรุงเวิร์กโฟลว์

• Pin Claude Code to sidebar for quick access / ปักหมุด Claude Code ไว้ที่แถบด้านข้างเพื่อเข้าถึงได้ง่าย
• Use keyboard shortcuts for faster launching / ใช้ทางลัดแป้นพิมพ์เพื่อเปิดได้เร็วขึ้น
• Select code first then ask questions for better context / เลือกโค้ดก่อนแล้วถามเพื่อบริบทที่ดีกว่า
• Review diffs carefully in VS Code's diff viewer / ตรวจสอบความแตกต่างอย่างระมัดระวังในเครื่องดูความแตกต่างของ VS Code

Test Commands to Try คำสั่งทดสอบที่ควรลอง

# Basic commands to test your setup
"Understand my codebase"
"What does this selected code do?"
"Help me fix this error"
"Refactor this function"
"Add comments to explain this code"