Week 8 of 12 💻
IDE Integrations & Desktop
การเชื่อมต่อ IDE และเดสก์ท็อป
1. Introduction / บทนำ
Claude Code เชื่อมต่อกับ IDE ยอดนิยมเพื่อนำ AI เข้ามาในโปรแกรมแก้ไขโค้ดของคุณ ส่วนขยาย VS Code เพิ่มแผง Claude, diff viewer และ @-mentions ปลั๊กอิน JetBrains ทำงานกับ IntelliJ, WebStorm และ PyCharm นอกจากนี้ยังมีแอป Desktop
Claude Code integrates with popular IDEs to bring AI assistance right into your editor. The VS Code extension adds a Claude panel, diff viewer, and @-mentions. JetBrains plugins work with IntelliJ, WebStorm, and PyCharm. There's also a native Desktop app.
Fun Facts / ข้อเท็จจริงที่น่าสนใจ
- Cmd+Esc (Mac) / Ctrl+Esc (Windows) toggles Claude focus in VS Code.
- The Desktop app can sync sessions with the CLI.
- You can run Claude in VS Code's integrated terminal too!
2. Vocabulary / คำศัพท์
Click a card to flip it. คลิกการ์ดเพื่อพลิก
extension
ส่วนขยาย
An add-on for an IDE like VS Code
panel
แผง
A section of the IDE interface
shortcut
ทางลัด
A key combination for quick actions
keybinding
คีย์ไบนดิง
Mapping a keyboard key to an action
sidebar
แถบด้านข้าง
The side panel of an IDE
marketplace
มาร์เก็ตเพลส
A store for IDE extensions
desktop
เดสก์ท็อป
A native app for your computer
preview
พรีวิว / ดูตัวอย่าง
To see output before finalizing
tab
แท็บ
A separate conversation or file view
workspace
เวิร์กสเปซ
A project folder open in an IDE
sync
ซิงค์
To match data between two systems
interface
อินเทอร์เฟซ
How a user interacts with software
3. Grammar Focus / ไวยากรณ์
Comparatives (faster than, easier than, better than) / การเปรียบเทียบ (faster than, easier than, better than)
Thai:
การเปรียบเทียบเปรียบสองสิ่งโดยใช้ '-er than' (คำสั้น) หรือ 'more ... than' (คำยาว) 'Better/worse' เป็นรูปไม่ปกติ ตัวอย่าง: 'VS Code is faster than the terminal.' 'The Desktop app is more visual than the CLI.'
การเปรียบเทียบเปรียบสองสิ่งโดยใช้ '-er than' (คำสั้น) หรือ 'more ... than' (คำยาว) 'Better/worse' เป็นรูปไม่ปกติ ตัวอย่าง: 'VS Code is faster than the terminal.' 'The Desktop app is more visual than the CLI.'
English:
Comparatives compare two things using '-er than' (short words) or 'more ... than' (long words). 'Better/worse' are irregular. Example: 'VS Code is faster than the terminal.' 'The Desktop app is more visual than the CLI.'
Comparatives compare two things using '-er than' (short words) or 'more ... than' (long words). 'Better/worse' are irregular. Example: 'VS Code is faster than the terminal.' 'The Desktop app is more visual than the CLI.'
ส่วนขยายง่ายกว่าเทอร์มินัล
The extension is easier than the terminal.
Opus ทรงพลังกว่า Haiku
Opus is more powerful than Haiku.
Diff viewer ดีกว่าการอ่านผลลัพธ์ดิบ
The diff viewer is better than reading raw output.
Section Check 1
What shortcut toggles Claude in VS Code?
คีย์ลัดอะไรสลับ Claude ใน VS Code?
Section Check 2
Which is correct?
ข้อใดถูกต้อง?
Section Check 3
What does @-mention do in Claude?
@-mention ทำอะไรใน Claude?
4. Tutorial Steps / ขั้นตอนการเรียนรู้
1
Install VS Code extension / ติดตั้งส่วนขยาย VS Code
Open VS Code Extensions (Cmd+Shift+X), search 'Claude Code', and install.
Open VS Code Extensions (Cmd+Shift+X), search 'Claude Code', and install.
2
Open the Claude panel / เปิดแผง Claude
Click the Spark icon in the editor toolbar or press Cmd+Esc.
Click the Spark icon in the editor toolbar or press Cmd+Esc.
3
Use @-mentions / ใช้ @-mentions
Type @ in the Claude panel to reference files, symbols, or git history.
Type @ in the Claude panel to reference files, symbols, or git history.
4
Try the Desktop app / ลองแอป Desktop
Download from claude.ai — it provides a native graphical interface.
Download from claude.ai — it provides a native graphical interface.
5
Configure keybindings / ตั้งค่าคีย์ลัด
Use /keybindings or edit ~/.claude/keybindings.json for custom shortcuts.
Use /keybindings or edit ~/.claude/keybindings.json for custom shortcuts.
5. Hands-On Activity / กิจกรรมลงมือทำ
แบบฝึกหัด: ติดตั้งส่วนขยาย VS Code และถามคำถาม Claude เกี่ยวกับไฟล์ที่เปิดอยู่ผ่านแผงด้านข้าง
Practice: Install the VS Code extension and ask Claude a question about your open file using the sidebar panel.
6. Reference Table / ตารางอ้างอิง
| Command / Tool | English | ภาษาไทย |
|---|---|---|
VS Code Extension | Claude panel in editor | แผง Claude ในโปรแกรมแก้ไข |
JetBrains Plugin | Claude in IntelliJ/WebStorm | Claude ใน IntelliJ/WebStorm |
Desktop App | Native graphical interface | อินเทอร์เฟซกราฟิก |
Cmd+Esc | Toggle Claude focus (VS Code) | สลับโฟกัส Claude |
/terminal-setup | Configure terminal keys | ตั้งค่าคีย์เทอร์มินัล |
7. Summary / สรุป
Claude Code เชื่อมต่อกับ VS Code (ส่วนขยาย), JetBrains (ปลั๊กอิน) และมีแอป Desktop แต่ละตัวมีข้อดีต่างกัน การเปรียบเทียบ (-er than, more...than) ช่วยเปรียบเทียบตัวเลือกเหล่านี้
Claude Code integrates with VS Code (extension), JetBrains (plugin), and has a Desktop app. Each offers different advantages. Comparatives (-er than, more...than) help compare these options.
Homework / การบ้าน
1. ติดตั้ง Claude Code ใน IDE ที่คุณชอบ
2. เปรียบเทียบประสบการณ์ CLI และ IDE
3. เขียน 5 ประโยคเปรียบเทียบเกี่ยวกับเครื่องมือพัฒนา
2. เปรียบเทียบประสบการณ์ CLI และ IDE
3. เขียน 5 ประโยคเปรียบเทียบเกี่ยวกับเครื่องมือพัฒนา
1. Install Claude Code in your favorite IDE.
2. Compare the CLI and IDE experience.
3. Write 5 comparative sentences about development tools.
2. Compare the CLI and IDE experience.
3. Write 5 comparative sentences about development tools.