Skip to main content

第 10 課：IDE 整合

學習目標​

完成本課程後，您將能夠：

  • 在 VS Code 中使用 Claude Code
  • 安裝和使用 JetBrains 外掛
  • 利用桌面應用程式功能
  • 用於瀏覽器自動化的 Chrome 擴充功能
  • 在介面之間切換

先決條件​

  • 完成第 1-9 課 - 完整 Claude Code 知識
  • IDE 已安裝 - VS Code、JetBrains 或瀏覽器
  • CLI 已安裝 - 用於 IDE 整合

預估時間： 20 分鐘

VS Code 擴充功能​

Claude Code 直接在您的編輯器中。

安裝​

方法 1：Marketplace

  1. 開啟 VS Code
  2. Extensions panel (Ctrl+Shift+X)
  3. 搜尋 "Claude Code"
  4. Click "Install"

方法 2：Command Line

code --install-extension anthropic.claude-code

VS Code 功能​

內嵌聊天：

  • 在編輯器中詢問 Claude
  • 獲得程式碼建議而不離開 VS Code
  • 根據開啟的檔案提供上下文回應

側邊欄面板：

  • 專用 Claude Code 面板
  • 完整的對話歷史
  • 檔案操作在側邊欄中

快速動作：

  • 右鍵用於 Claude 指令
  • "解釋這段程式碼"
  • "重構這個函式"
  • "產生測試"

JetBrains 外掛​

Claude Code 整合 IntelliJ IDEA、PyCharm、WebStorm 和其他 JetBrains IDE。

安裝​

方法 1：Marketplace

  1. File → Settings → Plugins
  2. 搜尋 "Claude Code"
  3. Click "Install"
  4. Restart IDE

支援的 JetBrains IDEs：

  • IntelliJ IDEA
  • PyCharm
  • WebStorm
  • PhpStorm
  • RubyMine
  • GoLand
  • CLion
  • Rider

JetBrains 功能​

工具視窗：

  • 專用的 Claude Code 工具視窗
  • 持久的對話歷史
  • 檔案操作在 IDE 內

程式碼動作：

  • 右鍵用於 Claude 指令
  • 產生程式碼
  • 重構選擇
  • 解釋程式碼

整合：

  • 與 JetBrains 重塑功能
  • 遵守 IDE 程式碼風格
  • 與版本控制整合

桌面應用程式​

Claude Code 提供獨立的桌面應用程式用於獨立的體驗。

安裝​

下載：

  • macOS: .dmg 檔案
  • Windows: .exe 安裝程式
  • Linux: .AppImage 或 .deb

取得安裝程式： 造訪 claude.com/download 或使用 CLI：

claude --download-desktop

桌面應用程式功能​

專用視窗：

  • 完整螢幕 Claude Code 髯驗
  • 獨立於終端機
  • 多工作階段的標籤頁

原生整合：

  • 檔案選擇器對話方塊
  • 原生通知
  • 系統托盤整合
  • 鍵盤快捷鍵

專案管理：

  • 最近專案列表
  • 快速專案切換
  • 專案特定設定

工作階段持久性：

  • 自動儲存對話
  • 重啟時恢復
  • 工作階段歷史瀏覽器

Chrome 擴充功能​

Chrome 擴充功能將 Claude Code 帶到瀏覽器以進行網頁開發。

安裝​

  1. Chrome Web Store
  2. Search "Claude Code"
  3. Add to Chrome
  4. Grant necessary permissions

Chrome 擴充功能​

網頁頁面分析：

  • 分析網頁程式碼
  • 瞭解網站結構
  • 建議改進

瀏覽器主控台：

  • Claude in DevTools
  • 偵錯 JavaScript
  • 分析網路請求

表單自動化：

  • 智能填寫表單
  • 測試輸入驗證
  • 產生測試資料

在介面之間切換​

您可以無縫地在 CLI、IDE 和桌面應用程式之間移動。

共享的脈絡​

工作階段同步：

  • 對話可用於跨介面
  • 從 CLI 開始，在 IDE 繼續
  • 專案維護持

設定同步：

  • 設定共享
  • 技能可用
  • MCP 伺服器已設定

切換工作流程​

CLI → IDE：

1. 在 CLI 工作
2. 在 IDE 擴充功能中開啟
3. 繼續對話
4```

**IDE → Desktop：**
  1. 在 VS Code 擴充功能工作
  2. 開啟桌面應用程式以進行完整檢視
  3. 繼續對話 4```

Browser → CLI：

1. 在 Chrome 擴充功能中除錯
2. 切換到 CLI 進行程式碼變更
3. 測試在瀏覽器中再次
4`

✅ 檢查您的理解​

  1. 如何安裝 VS Code 擴充功能？

    • 只能從命令列
    • Marketplace 或命令列
    • 只從 GitHub
    • 它已預先安裝

  2. 哪些 JetBrains IDEs 支援 Claude Code？

    • 僅 IntelliJ IDEA
    • 所有 JetBrains IDE
    • 只有 PyCharm 和 WebStorm
    • 無

  3. Chrome 擴充功能做什麼？

    • 只瀏覽網頁
    • 分析網頁和除錯程式碼
    • 取代瀏覽器
    • 只有顯示 Claude 回應

  4. True or False： 對話在 CLI 和 IDE 之間同步。

    • True
    • False

  5. 何時應該使用桌面應用程式？

    • 當工作在 SSH 時
    • 當您偏好 GUI 時且在本地工作
    • 自動化任務時
    • 從不，總是使用 CLI

答案： 1-b, 2-b, 3-b, 4-True, 5-b

總結​

在本課程中，您學到了：

  • VS Code 擴充 - 在編輯器中整合 Claude
  • JetBrains 外掛 - 完整的 IDE 系列支援
  • 桌面應用程式 - 獨立的 GUI 應用程式
  • Chrome 擴充 - 瀋覽器開發
  • 切換介面 - 無縫的跨介面工作流程

下一步​

在**第 11 課：常見工作流程**中，您將學到：

  • 功能開發工作流程
  • 修復 bug
  • 程式碼審查
  • 重構
  • 學習新程式庫

進階閱讀​

繼續至第 11 課：常見工作流程 →