Week 8 of 12 💻

IDE Integrations & Desktop

การเชื่อมต่อ IDE และเดสก์ท็อป

IDE 集成与桌面版

IDE Integrations & Desktop

1. Introduction / บทนำ / 简介

Claude Code เชื่อมต่อกับ IDE ยอดนิยมเพื่อนำ AI เข้ามาในโปรแกรมแก้ไขโค้ดของคุณ ส่วนขยาย VS Code เพิ่มแผง Claude, diff viewer และ @-mentions ปลั๊กอิน JetBrains ทำงานกับ IntelliJ, WebStorm และ PyCharm นอกจากนี้ยังมีแอป Desktop
Claude Code 与流行的 IDE 集成，把 AI 助手直接带进你的编辑器。VS Code 扩展添加了 Claude 面板、diff 查看器和 @-mentions。JetBrains 插件适用于 IntelliJ、WebStorm 和 PyCharm。此外还有原生桌面应用。
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!
Visual Studio Code editor with an extension project open
Visual Studio Code with a project open — the editor Claude Code plugs into. — Photo: Microsoft, MIT, via Wikimedia Commons

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) / 比较级（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.'（VS Code 比终端更快。）'The Desktop app is more visual than the CLI.'（桌面应用比 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.'
ส่วนขยายง่ายกว่าเทอร์มินัล
扩展比终端更容易。
The extension is easier than the terminal.
Opus ทรงพลังกว่า Haiku
Opus 比 Haiku 更强大。
Opus is more powerful than Haiku.
Diff viewer ดีกว่าการอ่านผลลัพธ์ดิบ
Diff 查看器比阅读原始输出更好。
The diff viewer is better than reading raw output.

Section Check 1

What shortcut toggles Claude in VS Code?

คีย์ลัดอะไรสลับ Claude ใน VS Code?

哪个快捷键可以在 VS Code 里切换 Claude？

Section Check 2

Which is correct?

ข้อใดถูกต้อง?

哪一个是正确的？

Section Check 3

What does @-mention do in Claude?

@-mention ทำอะไรใน Claude?

@-mention 在 Claude 里有什么作用？

4. Tutorial Steps / ขั้นตอนการเรียนรู้ / 教程步骤

1
Install VS Code extension / ติดตั้งส่วนขยาย VS Code / 安装 VS Code 扩展
Open VS Code Extensions (Cmd+Shift+X), search 'Claude Code', and install.

How to do it

  • Open the Extensions panel: Ctrl+Shift+X (Windows) or Cmd+Shift+X (Mac).
  • Search for Claude Code and click Install.
  • Reload VS Code if it asks.
2
Open the Claude panel / เปิดแผง Claude / 打开 Claude 面板
Click the Spark icon in the editor toolbar or press Cmd+Esc.

How to do it

  • Click the Spark icon in the editor toolbar, or press Cmd+Esc (Mac) / Ctrl+Esc (Windows).
  • The panel is the same Claude as the terminal — same account, same project.
  • It automatically sees which file you have open.
3
Use @-mentions / ใช้ @-mentions / 使用 @-mentions
Type @ in the Claude panel to reference files, symbols, or git history.

How to do it

  • Type @ in the panel — a picker of files and symbols appears.
  • Choose one to insert a reference, e.g. @src/utils.js.
  • Now Claude looks at exactly that file — no guessing, no wrong file.
4
Try the Desktop app / ลองแอป Desktop / 试用 Desktop 应用
Download from claude.ai — it provides a native graphical interface.

How to do it

  • Download the Claude desktop app from claude.ai and sign in with the same account.
  • It gives a graphical window instead of a terminal — same abilities.
  • Good for people who never use a terminal.
5
Configure keybindings / ตั้งค่าคีย์ลัด / 配置按键绑定
Use /keybindings or edit ~/.claude/keybindings.json for custom shortcuts.

How to do it

  • Type /keybindings to open the shortcut editor.
  • Or edit ~/.claude/keybindings.json directly.
  • Changes apply immediately — no restart.

5. Hands-On Activity / กิจกรรมลงมือทำ / 动手练习

แบบฝึกหัด: ติดตั้งส่วนขยาย VS Code และถามคำถาม Claude เกี่ยวกับไฟล์ที่เปิดอยู่ผ่านแผงด้านข้าง
练习：安装 VS Code 扩展，并通过侧边栏面板向 Claude 提出一个关于当前打开文件的问题。
Practice: Install the VS Code extension and ask Claude a question about your open file using the sidebar panel.

Step by step

  1. Install the Claude Code extension in VS Code (Extensions panel → search → Install).
  2. Open any code file from one of your projects.
  3. Open the Claude panel (Spark icon or Ctrl/Cmd+Esc).
  4. Ask: What does @thisfile do? using an @-mention of the open file.

✓ You did it right if: the answer clearly talks about your actual file, not a generic guess.

📜 A sample panel conversation / ตัวอย่างคำตอบ / 示例答案 
# In the VS Code Claude panel:

> what does @src/utils.js do?
        ^ typed @ and picked src/utils.js from the file list

* Looking at src/utils.js: it exports three helpers -
  formatDate(), debounce() and clamp().
  Only formatDate() is used outside this file.

> add a fourth helper that capitalizes a string
* Edit(src/utils.js) ... Allow? (y/n) > y
  (the same y/n gate as the terminal - same Claude, new window)

6. Reference Table / ตารางอ้างอิง / 参考表

Command / ToolEnglishภาษาไทย中文
VS Code ExtensionClaude panel in editorแผง Claude ในโปรแกรมแก้ไข编辑器中的 Claude 面板
JetBrains PluginClaude in IntelliJ/WebStormClaude ใน IntelliJ/WebStormIntelliJ/WebStorm 中的 Claude
Desktop AppNative graphical interfaceอินเทอร์เฟซกราฟิก原生图形界面
Cmd+EscToggle Claude focus (VS Code)สลับโฟกัส Claude切换 Claude 焦点
/terminal-setupConfigure terminal keysตั้งค่าคีย์เทอร์มินัล配置终端按键

7. Interactive Lab / ห้องทดลอง / 互动实验室

Point Claude at an exact file with @, and compare the two windows. / ลองใช้ @-mentions และเปรียบเทียบสองหน้าต่าง / 试用 @ 提及并对比两种窗口

Type @ in the box to point Claude at an exact file, then Send.

8. Summary / สรุป / 总结

Claude Code เชื่อมต่อกับ VS Code (ส่วนขยาย), JetBrains (ปลั๊กอิน) และมีแอป Desktop แต่ละตัวมีข้อดีต่างกัน การเปรียบเทียบ (-er than, more...than) ช่วยเปรียบเทียบตัวเลือกเหล่านี้
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 ประโยคเปรียบเทียบเกี่ยวกับเครื่องมือพัฒนา
1. 在你喜欢的 IDE 里安装 Claude Code。
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.
« Week 7SyllabusWeek 9 »