Claude Code ใน VS Code: วิธีใช้ส่วนขยาย

ดังที่กล่าวในส่วนความสามารถ โหมด plan เหมาะกับการเปลี่ยนแปลงขนาดใหญ่ รายละเอียดหนึ่งที่ยังไม่ได้บอก: Claude จะรันคำสั่งสำรวจล่วงหน้าและบันทึกแผนเต็มลงไฟล์ เพิ่มคอมเมนต์ได้ก่อนลงมือแก้ ผมพบว่าแผนที่เขียนไว้นั้นมีประโยชน์แม้ท้ายที่สุดจะเปลี่ยนไปมาก

หากต้องการบริบทเจาะจง ให้ใช้การ@-อ้างถึงพร้อมช่วงบรรทัด: @app.ts#5-10 จะโฟกัส Claude ไปยังช่วงนั้น กดค้าง Shift ขณะลากไฟล์ลงกล่องพรอมป์ตเพื่อแนบไฟล์ Option+K บน Mac (หรือ Alt+K บน Windows และ Linux) จะแทรกการ @-อ้างถึงไฟล์และสิ่งที่เลือกอยู่ในขณะนั้นโดยตรง

ปุ่มลัด VS Code ที่ควรรู้

ปุ่มลัดเหล่านี้มาจาก เอกสารส่วนขยาย VS Code ของ Anthropic และครอบคลุมสิ่งที่ใช้งานบ่อยในแผง

การวนโหมดสิทธิ์ยังคงอยู่ใน CLI: กด Shift+Tab ในเทอร์มินัลแบบบูรณาการเพื่อสลับระหว่างโหมดค่าเริ่มต้น plan และ accept-edits สำหรับชุด slash-command ทั้งหมด ดู คู่มือ slash commands ของ Claude Codeของเรา

Checkpoints จะติดตามการแก้ไขไฟล์ของ Claude ตลอดเซสชัน โฮเวอร์บนข้อความใด ๆ ในบทสนทนาเพื่อโชว์ปุ่มย้อนเวลา ตัวเลือกคือ: แยกกิ่งบทสนทนาโดยคงการเปลี่ยนแปลงโค้ดไว้, ย้อนโค้ดโดยคงประวัติบทสนทนาไว้, หรือทำทั้งสองอย่าง Checkpoints เก็บไว้ 30 วัน ไม่ติดตามคำสั่ง bash: rm, mv และ cp อยู่นอกระบบ checkpoint Git ยังเป็นตาข่ายนิรภัยที่เหมาะสมสำหรับสิ่งที่อาจทำลายได้

Claude Code ใน VS Code สำหรับดีบักและรีแฟกเตอร์

ทั้งสองเวิร์กโฟลว์คล้ายกัน: ให้บริบทกับ Claude รีวิวการเปลี่ยนแปลงที่เสนอ และยืนยันผลลัพธ์ ความยากคือการรวบรวมบริบทที่ถูกต้อง

ดีบัก

แชร์เออร์เรอร์โดยวางตรง ๆ อ้างถึงเอาต์พุตเทอร์มินัลด้วย @terminal:name หรือให้ Claude ดึงจากแผง Problems ผ่าน mcp__ide__getDiagnostics Claude จะตามหาต้นตอ เสนอวิธีแก้เป็น diff แล้วคุณรันเทสต์เพื่อยืนยัน

Claude Code ยังไม่ผสานกับดีบักเกอร์เนทีฟของ VS Code: ไม่มีเบรกพอยต์ ไม่มีสเต็ป ไม่มีตัวแปรสด เส้นทางวางเออร์เรอร์และ diagnostics ครอบคลุมส่วนใหญ่แล้ว หากต้องใช้ดีบักเกอร์โดยเฉพาะ มี MCP เซิร์ฟเวอร์ของชุมชน (claude-debugs-for-you บน GitHub) ที่ช่วยเชื่อม แต่ต้องตั้งค่าเอง

สำหรับดีบักเว็บแบบสด @browser เชื่อม Claude กับ Chrome ผ่าน ส่วนขยาย Claude ใน Chrome (เวอร์ชัน 1.0.36 ขึ้นไป) พรอมป์ตอย่าง @browser go to localhost:3000 and check the console for errors ทำให้ Claude ตรวจสภาพเบราว์เซอร์สดได้โดยไม่ต้องสลับหน้าต่าง

รีแฟกเตอร์

Claude จัดการการเปลี่ยนแปลงข้ามไฟล์ได้ดี เช่น เปลี่ยนชื่อฟังก์ชันในโค้ดเบสขนาดใหญ่ ย้ายไลบรารีจากตัวหนึ่งไปอีกตัว จุดที่กันพลาดคือขั้นตอนรีวิว diff

ไฟล์ CLAUDE.md สำคัญที่สุดในส่วนนี้ หากไม่มีขนบเฉพาะโปรเจ็กต์ Claude จะใช้รูปแบบที่อนุมานจากโค้ดเบส ซึ่งอาจไม่ตรงที่ต้องการ ดังที่กล่าวในส่วนติดตั้ง /init จะให้ไฟล์ตั้งต้น การปรับแต่งก่อนเริ่มเซสชันรีแฟกเตอร์ใหญ่ คุ้มค่ากับเวลา 10 นาที

ข้อจำกัดเชิงปฏิบัติคือการบีบอัดบริบทสำหรับเซสชันยาว เมื่อหน้าต่างบริบทเต็ม Claude จะบีบอัดโดยสรุปบทสนทนาเก่า หลังจากนั้นอาจหลงลืมการตัดสินใจก่อนหน้า รัน /compact ด้วยตนเองก่อนเริ่มเฟสใหม่ มักให้ผลคาดเดาได้มากกว่ารอให้อัตโนมัติทำระหว่างงาน

Claude Code ใน VS Code เทียบกับเวิร์กโฟลว์เทอร์มินัล

เอกสารของ Anthropic ระบุว่าส่วนขยาย VS Code คือ "วิธีที่แนะนำในการใช้ Claude Code ใน VS Code" ส่วนขยายเพิ่มสิ่งที่เทอร์มินัลทำไม่ได้: ตัวดู diff แบบเคียงกัน การรีวิวแผนในเอกสารมาร์กดาวน์ที่แก้ได้ บทสนทนาหลายแท็บ และ @browser สำหรับดีบักเว็บสด

เทอร์มินัลชนะด้านความสามารถ ! ช็อร์ตคัต bash, การเติมคำด้วยแท็บ, ชุด slash command เต็ม และเวิร์กโฟลว์แบบ pipe เช่น tail -200 app.log | claude -p "..." ล้วนเป็นของ CLI เท่านั้น การตั้งค่าเซิร์ฟเวอร์ MCP ก็ทำได้ในเทอร์มินัลเท่านั้น จากส่วนขยายจัดการได้เฉพาะเซิร์ฟเวอร์ที่มีอยู่ด้วย /mcp แต่เพิ่มใหม่ไม่ได้

ทั้งสองอย่างไม่ตัดกัน การรัน claude ในเทอร์มินัลบูรณาการของ VS Code ยังได้การผสานกับ IDE: การดู diff การแชร์บริบทจากการเลือก และการแชร์ diagnostics ใช้ได้ทั้งหมด เซสชันที่เริ่มจากส่วนขยายไปต่อในเทอร์มินัลได้ด้วย claude --resume รัน claude --ide จากเทอร์มินัลบูรณาการเมื่ออยากบังคับให้ CLI เชื่อมกับตัวดู diff และสะพาน diagnostics ของ VS Code

นักพัฒนาส่วนใหญ่ใช้ทั้งสอง: VS Code สำหรับงานหลายไฟล์และรีวิวละเอียด เทอร์มินัลสำหรับงานด่วนและอัตโนมัติ บางคนอยู่กับเทอร์มินัลทั้งหมดก็ใช้งานได้ดี หากชอบ Cursor มากกว่า VS Code ดู คู่มือ Claude Code ใน Cursor ซึ่งครอบคลุมเวิร์กโฟลว์ส่วนขยายเดียวกัน ส่วน เวิร์กโฟลว์ CLI แบบเต็ม ก็ควรทราบไม่ว่าชอบแบบใด

Claude Code ใน VS Code เทียบกับ GitHub Copilot

อย่างที่กล่าวตอนต้น "Claude ใน VS Code" อาจหมายถึงส่วนขยายเนทีฟ การเข้าถึง Claude ผ่าน GitHub Copilot ผ่านตัวเลือกโมเดล หรือ CLI ในเทอร์มินัลบูรณาการ ส่วนขยายเนทีฟกับ Copilot ใช้โมเดลเดียวกันแต่คนละผลิตภัณฑ์ และทำงานต่างกันมาก

ผ่าน Copilot โมเดล Claude จะทำงานในกรอบแชตและการเติมคำของ GitHub: ไม่มีแซนด์บ็อกซ์ OS ภายในเครื่อง ไม่มีการผสาน MCP แบบกำหนดเอง ไม่มีคำสั่งเทอร์มินัลเนทีฟ ผ่านส่วนขยาย Claude Code โมเดลเดียวกันทำงานด้วยหน้าต่างบริบทได้สูงสุด 1M โทเคน ดำเนินงานข้ามไฟล์ และเข้าถึง checkpoints โหมด plan และเซิร์ฟเวอร์ MCP ได้

เครื่องมือถูกสร้างมาสำหรับงานต่างกัน Copilot มีการเติมคำอินไลน์เป็นแกนหลัก Claude Code ไม่ทำ autocomplete เลย โหมดตัวแทนของ Copilot เติบโตขึ้นมาก แต่จากเบนช์มาร์กชุมชน มักช้ากว่าในงานที่ครอบคลุมหลายไฟล์ ไม่มีตัวไหนดีกว่าโดยเนื้อแท้

ส่วนขยายเนทีฟกับ Copilot: โมเดลเดียวกัน ประสบการณ์ต่างกัน ภาพโดยผู้เขียน

เรื่องราคา: Copilot Pro อยู่ที่ $10/เดือน พร้อม 300 คำขอพรีเมียม Claude Code Pro อยู่ที่ $20/เดือน รูปแบบที่พบบ่อยของผู้ใช้ทั้งสองคือ $10 สำหรับ Copilot (เติมคำระหว่างพิมพ์) และ $20 สำหรับ Claude Code (งานขนาดใหญ่ที่ต้องไตร่ตรอง) สองผลิตภัณฑ์ครอบคลุมส่วนต่างของเวิร์กโฟลว์โดยแทบไม่ทับกัน อีกทั้ง Anthropic ยังร่วมมือกับ GitHub เพื่อนำโมเดล Claude เข้าไปใน Copilot เพื่อดูแลฝั่ง autocomplete

ข้อพิจารณาด้านความปลอดภัยและความเป็นส่วนตัว

Anthropic จะไม่ใช้โค้ดของคุณเพื่อฝึกโมเดล Claude ผู้ใช้ Free, Pro และ Max สามารถปิดการบันทึกข้อมูลได้ในหน้าตั้งค่าบัญชี; แผน Team, Enterprise และ API จะถูกยกเว้นโดยค่าเริ่มต้น สำหรับรายละเอียดโหมดสิทธิ์ เซิร์ฟเวอร์ MCP และแซนด์บ็อกซ์ที่ลึกกว่าในมุมมอง VS Code ดู คู่มือความปลอดภัยของ Claude Codeของเรา

มีชุดพาธที่ถูกปกป้องเสมอไม่ว่าโหมดใด ได้แก่ .git, .vscode, .idea, .husky, และ .claude (ยกเว้นไดเรกทอรีย่อยของตัวเองบางส่วน) รวมถึง .gitconfig, .gitmodules และไฟล์ตั้งค่าของเชลล์และเครื่องมือหลายรายการ เรื่องนี้สำคัญที่สุดในโหมดรับอัตโนมัติ ซึ่งเขียนโดยไม่หยุดถามและอาจแตะ settings.json และ tasks.json ตรวจ diff ของ git ก่อนคอมมิต

แซนด์บ็อกซ์จะแยกคำสั่ง bash ให้อยู่ในไดเรกทอรีงาน และบล็อกการเข้าถึงเครือข่ายที่ไม่ได้รับอนุญาต ค่าดีฟอลต์ปิดอยู่ เปิดได้ด้วย /sandbox.

โหมด Auto แทนที่การอนุมัติรายการด้วยตัวจัดประเภทที่ทบทวนการกระทำก่อนรัน บล็อกสิ่งอย่างการลบไฟล์จำนวนมาก ส่งข้อมูลไปยังปลายทางที่ไม่ได้รับอนุญาต และการ force-push ไปยัง main Anthropic อธิบายว่าเป็นทางเลือกที่ปลอดภัยกว่าการใช้ --dangerously-skip-permissions.

ทรานสคริปต์ภายในเครื่องถูกเก็บแบบข้อความล้วนใต้ ~/.claude/projects/ เป็นเวลา 30 วัน (ปรับได้ด้วย cleanupPeriodDays) การตั้งค่าองค์กรบน Amazon Bedrock, Google Vertex AI หรือ Microsoft Foundry จะเป็นไปตามเงื่อนไขข้อมูลของผู้ให้บริการเหล่านั้น โหมด Auto ใช้ไม่ได้บนผู้ให้บริการเหล่านี้ ต้องใช้ Anthropic API โดยตรง

การแก้ปัญหาส่วนขยาย VS Code ที่พบบ่อย

ปัญหาติดตั้งส่วนใหญ่อยู่ในรายการสั้น ๆ ผมเคยเจอทั้งหมดนี้อย่างน้อยครั้งหนึ่ง

• ไม่มีไอคอน Spark: เปิดไฟล์จริง ไม่ใช่แค่โฟลเดอร์ รีโหลดหน้าต่างจาก Command Palette (Developer: Reload Window) หรือคลิก Spark ที่แถบสถานะ (ขวาล่าง) ซึ่งใช้ได้แม้ไม่เปิดไฟล์

• ส่วนขยายชนกัน: ปิดใช้งานส่วนขยาย AI อื่นชั่วคราว (Cline, Continue ฯลฯ) หาก Claude Code ไม่ยอมทำงาน

• Restricted Mode: Claude Code ทำงานไม่ได้ใน VS Code Restricted Mode ทำเครื่องหมายเวิร์กสเปซว่าเชื่อถือได้

• การล็อกไฟล์บน Windows: ยุบแผง Explorer และพักดีบักเกอร์ที่ทำงานอยู่ก่อนเซสชันหลายไฟล์ขนาดใหญ่ หากการเขียนล้มเหลวกลางคัน

• macOS Tahoe ขัดกับ Cmd+Esc: Game Overlay ของระบบอาจดัก Cmd+Esc ผูกปุ่มใหม่ให้ Claude Code: Focus input ใน Keyboard Shortcuts ของ VS Code (Cmd+K Cmd+S) หากการสลับโฟกัสใช้ไม่ได้

• ล็อกอิน Bedrock หรือ Vertex แทน Anthropic: สามารถชี้ Claude Code ไปยังเอ็นด์พอยต์ผู้ให้บริการคลาวด์ได้ คู่มือตั้งค่าโมเดลภายในเครื่องและทางเลือก ของเราครอบคลุมเส้นทางที่ไม่ใช้การสมัครสมาชิก

Anthropic มี คู่มือการแก้ปัญหา โดยเฉพาะ หากข้อใดข้างต้นไม่ช่วย

ข้อจำกัดและข้อแลกเปลี่ยน

ส่วนขยายเป็นชุดย่อยของ CLI ดังที่กล่าวในส่วนเทียบเทอร์มินัล การเติมด้วยแท็บ ช็อร์ตคัต ! bash และเวิร์กโฟลว์แบบ pipe ล้วนมีเฉพาะ CLI เช่นเดียวกับโหมด dontAsk สำหรับ CI

การมองเห็นงานพื้นหลังมีจำกัด สำหรับสิ่งที่ต้องเฝ้าดูใกล้ชิด เทอร์มินัลบูรณาการโปร่งใสกว่า

การอนุมัติเป็นรายไฟล์ ไม่ใช่รายฮังก์: หาก Claude ทำฟังก์ชันหนึ่งถูก แต่อีกฟังก์ชันในไฟล์เดียวกันผิด ต้องยอมรับทั้งหมดแล้วย้อนส่วนที่ไม่ต้องการเอง

ขีดจำกัดการใช้งานคือสิ่งที่ผู้ใช้ Pro ส่วนใหญ่เจอก่อน อัตราจำกัดทำงานเป็นหน้าต่างเลื่อน ไม่ใช่รายข้อความ และหมดเร็วขึ้นในชั่วโมงพีค ใช้เป็นครั้งคราวแผน Pro ก็พอ; หากทำงานเต็มวัน Max 5x หรือ Max 20x จะสมจริงกว่า ไม่ควรอิงค่าประเมินจากชุมชนมากนัก เพราะ Anthropic ไม่เปิดเผยตัวเลขแน่ชัดและเปลี่ยนแปลงได้

บน Windows การล็อกไฟล์ระหว่าง Explorer ของ VS Code กับการเขียนของ Claude ทำให้ล้มเหลวได้บ่อยกว่า macOS หรือ Linux การยุบแผง explorer และพักดีบักเกอร์ก่อนเซสชันหลายไฟล์ขนาดใหญ่ช่วยป้องกันได้

ข้อคิดส่งท้าย

Claude Code ใน VS Code เป็นเอเจนต์ช่วยโค้ดที่เน้นงาน พร้อม UI ที่ให้รีวิวก่อน ตัวดู diff โหมด plan และ checkpoints มีไว้เพราะการจับให้ได้ว่าตัวแทนแก้อะไรจริง สำคัญกว่าการได้ฉบับแรกเร็ว

เวิร์กโฟลว์ในเทอร์มินัลไม่หายไปไหน และสำหรับงานสคริปต์ อัตโนมัติ หรือเน้น CLI ก็ยังเป็นผิวการทำงานที่ดีกว่า แต่หากเป็นงานที่อยากอ่านทุกการเปลี่ยนแปลงก่อนรวม โหมดตัวแก้ไขเหมาะกว่า

Claude Code อัปเดตรายสัปดาห์ บางส่วนของบทความนี้อาจล้าสมัยเร็ว ดู แนวปฏิบัติที่ดีที่สุดของ Claude Code และ คู่มือ Claude Code 2.1 ของเราเพื่ออัปเดต ล่าสุด changelog ทางการ จะติดตามรุ่น หากสิ่งใดไม่ตรงกับที่เห็น ให้ตรวจที่นั่นก่อน

หากต้องการฝึกแบบมีโครงสร้างกับโมเดล Claude และเวิร์กโฟลว์ตัวแทน แนะนำคอร์ส Introduction to Claude Models ของเรา