你有個很厲害的翻譯朋友。每次遇到外文文件，你把檔案打包寄給他，等他翻完寄回來，你再打開來看。溝通效率還行，但每次都要「切出去→等→切回來」，一天下來光是 context switch 就消耗掉不少腦力。

現在這個朋友搬來跟你同住了。你看到不懂的段落，手指一比，他立刻在旁邊解釋。你改了一版草稿，他直接在你的螢幕上標出建議。不用寄信、不用等、不用切視窗。

Claude Code 的 IDE Extensions 做的就是這件事。

先搞懂一件事：CLI 跟 Extension 不是二選一

很多人以為裝了 VS Code extension 就不需要 CLI，或者反過來。不是這樣。

CLI 是完整版的 Claude Code。所有指令、所有功能、所有設定，CLI 都有。Extension 是 CLI 的圖形化包裝——它把最常用的功能搬進 IDE 的介面，讓你不用離開編輯器就能操作。但有些進階指令（像 ! bash 捷徑、tab 補全）目前只有 CLI 能跑。

好消息是：兩邊共用同一份對話歷史和設定檔。你在 extension 裡跟 Claude 聊到一半，打開終端機用 claude --resume 就能接著聊。設定也是，~/.claude/settings.json 改一次，兩邊同步。

所以不是「CLI 或 Extension」，是「Extension 為主、CLI 補位」。

功能 CLI VS Code Extension
全部斜線指令 ✅ 部分（打 / 可以看清單）
MCP Server 設定 ✅ 部分（新增用 CLI，管理用 /mcp）
Checkpoints（回溯） ✅ ✅
! bash 捷徑 ✅ ❌
Tab 補全 ✅ ❌
Diff 預覽 終端機顯示 IDE 原生 diff viewer
多對話分頁 ❌ ✅

有一說一，大部分日常開發用 extension 就夠了。只有在跑 headless 自動化或需要精細控制的時候才需要切回 CLI。

VS Code Extension：5.2M 安裝量不是沒原因的

安裝

三種方式，挑一個你喜歡的：

  1. 直接點連結：在 VS Code 裡打開 Marketplace 頁面，按 Install
  2. 快捷鍵：Cmd+Shift+X（Mac）或 Ctrl+Shift+X（Windows/Linux），搜尋 “Claude Code”，按 Install
  3. Command Palette：Cmd+Shift+P → 搜 “Extensions: Install Extensions” → 搜 “Claude Code”

裝完之後如果沒反應，跑一次 Developer: Reload Window。

前提條件：VS Code 1.98.0 以上、有 Anthropic 帳號（或第三方 provider 如 Bedrock / Vertex AI）。

第一次打開

裝好後，右上角的編輯器工具列會出現一個 ✱ Spark 圖示。點它就對了。

第一次打開會跳出登入畫面。完成瀏覽器授權後，會出現一個 Learn Claude Code 的 onboarding checklist——建議跟著走一遍，每個項目點 “Show me” 就好。不想看可以按 X 關掉，之後在 Settings → Extensions → Claude Code → Hide Onboarding 可以重新打開。

如果你的 ANTHROPIC_API_KEY 設在 shell 環境但 extension 讀不到，用 code . 從終端機啟動 VS Code，它會繼承你的環境變數。

四個改變工作流的功能

① @-mention 檔案參考

在 prompt box 裡打 @，後面接檔名，Claude 會直接讀取那個檔案的內容。支援模糊匹配——打 @auth 會自動找到 auth.js、AuthService.ts 之類的。資料夾也可以，加斜線就好：@src/components/。

更猛的是行號定位。在編輯器裡選取一段程式碼，按 Option+K（Mac）或 Alt+K，prompt box 裡會自動插入像 @app.ts#5-10 這樣的精準參考。Claude 讀的就是你選的那幾行，不是整個檔案。

大 PDF 也行，可以指定頁碼範圍。

② Diff 預覽與審核

Claude 要改檔案的時候，不是直接改——它會先用 VS Code 原生的 side-by-side diff viewer 顯示修改前後的對比。你可以：

  • 接受（Accept）
  • 拒絕（Reject）
  • 直接在 diff view 裡手動修改 Claude 的提議，再接受

第三個是關鍵。你可以微調 Claude 的建議，而不是只有「全收」或「全退」。而且如果你改了，Claude 會知道你有修改，下次的建議會更貼合你的偏好。

③ 多對話分頁

Cmd+Shift+P → “Claude Code: Open in New Tab” 或 “Open in New Window”。每個分頁有獨立的對話歷史和 context。

用法：主分頁做功能開發，開第二個分頁做 code review，開第三個查文件。互不干擾。分頁上的 Spark 圖示會用顏色點標示狀態——藍色表示有權限請求等你回覆，橘色表示 Claude 在背景做完事了。

④ Permission Modes

prompt box 底部有個模式指示器，點它可以切換：

  • Default：每個動作都問你
  • Plan：Claude 先寫計劃，你看完同意才執行。計劃會以完整 Markdown 文件打開，你可以在裡面加 inline comment
  • Auto-accept：Claude 改完直接套用，不問
  • Auto mode：需要額外條件（plan、admin、特定 model 和 provider），適合沙盒環境

踩坑提醒：Auto-accept 在處理不信任的 codebase 時要小心。Claude 有可能修改 VS Code 的設定檔（像 settings.json），而那些檔案可能被 VS Code 自動執行。

JetBrains Plugin：IntelliJ、PyCharm、WebStorm 通吃

支援的 IDE

IntelliJ IDEA、PyCharm、Android Studio、WebStorm、PhpStorm、GoLand——基本上 JetBrains 全家桶都支援。

安裝

  1. 打開你的 JetBrains IDE
  2. Settings → Plugins → Marketplace，搜尋 “Claude Code”
  3. 點 Install，然後完整重啟 IDE（不是 reload，是關掉重開）

或者直接去 JetBrains Marketplace 頁面 下載。

前提條件：你得先裝好 Claude Code CLI。Plugin 本身不包含 CLI——它是 CLI 的圖形化前端。沒裝 CLI 的話，先跑 npm install -g @anthropic-ai/claude-code。

功能速查

JetBrains plugin 的功能比 VS Code extension 精簡一些，但核心體驗一致：

  • 快速啟動：Cmd+Esc（Mac）或 Ctrl+Esc 打開 Claude Code
  • Diff 檢視：程式碼變更直接用 IDE 的 diff viewer 呈現
  • 選取上下文自動分享：你在編輯器裡選的程式碼、開著的分頁，Claude 自動看得到
  • 檔案參考插入：Cmd+Option+K（Mac）或 Alt+Ctrl+K，自動插入 @src/auth.ts#L1-99 格式的參考
  • Diagnostics 分享：IDE 的 lint 錯誤、語法錯誤自動傳給 Claude

設定調整

Settings → Tools → Claude Code [Beta] 裡可以改：

  • Claude command：CLI 的執行路徑，預設 claude。如果用 npx 就填 npx @anthropic-ai/claude-code
  • Diff 模式：在 Claude Code 裡打 /config，把 diff tool 設成 auto（用 IDE）或 terminal（用終端機）
  • ESC 鍵衝突：JetBrains 預設 ESC 會切回編輯器。如果你想讓 ESC 中斷 Claude 的操作，去 Settings → Tools → Terminal，取消勾選 “Move focus to the editor with Escape”

外部終端機連接

如果你習慣用 iTerm 或 Windows Terminal 之類的外部終端機跑 claude，在 Claude 裡打 /ide 就能連上 JetBrains IDE，啟動 diff viewing 和 diagnostics 分享。

進階設定：讓體驗更順

VS Code URI Handler

VS Code extension 註冊了一個 URI：vscode://anthropic.claude-code/open。你可以從任何地方用它打開 Claude Code 分頁：

1
2
3
4
5
# macOS
open "vscode://anthropic.claude-code/open?prompt=review%20my%20changes"

# Linux
xdg-open "vscode://anthropic.claude-code/open"

prompt 參數會預填 prompt box（不會自動送出），session 參數可以恢復指定的對話。拿來做 shell alias 或 bookmarklet 很方便。

@browser 瀏覽器操控

VS Code extension 支援 @browser 指令——前提是你裝了 Claude in Chrome 擴充功能（v1.0.36+）。

1
@browser 打開 localhost:3000 看 console 有沒有 error

Claude 會用你的瀏覽器登入狀態，能存取你已經登入的網站。開發 web app 的時候，讓 Claude 一邊改 code 一邊在瀏覽器上看結果，不用自己切來切去。

@terminal 終端機輸出參考

在 VS Code 裡，用 @terminal:name 可以把某個終端機的輸出內容丟給 Claude 看。name 是終端機的標題。省去複製貼上 error log 的動作。

Remote Development（JetBrains）

用 JetBrains Remote Development 的話，plugin 必須裝在遠端主機上，不是本地。在 Settings → Plugin (Host) 裡安裝。

WSL2 的使用者如果碰到 “No available IDEs detected”，通常是 NAT 網路或 Windows Firewall 擋住了。兩個解法：

  1. 開防火牆規則：在 PowerShell（admin）裡跑 New-NetFirewallRule -DisplayName "Allow WSL2 Internal Traffic" -Direction Inbound -Protocol TCP -Action Allow -RemoteAddress 172.21.0.0/16 -LocalAddress 172.21.0.0/16（IP 範圍依你的 WSL 子網調整）
  2. 切 mirrored 網路：Windows 11 22H2 以上，在 .wslconfig 加 networkingMode=mirrored

什麼時候用 Extension、什麼時候用 CLI

不用想太複雜，看情境：

用 Extension 的時候：日常開發、code review、查文件、改 bug、寫測試——任何你人在 IDE 裡面的工作。Diff 預覽、@-mention、多分頁這些功能在 GUI 裡順多了。

用 CLI 的時候：CI/CD headless 執行、需要 ! bash 捷徑、跑 claude --worktree 做平行任務、或者就是單純喜歡 terminal 的手感。

兩個混用：在 VS Code 裡用 extension 開發，需要更精細操作的時候切到 integrated terminal 跑 claude。兩邊共用對話紀錄，claude --resume 無縫接續。

說真的，大部分工程師最後會落在「extension 開著做主要工作、偶爾開 terminal 跑特定指令」這個模式。不用一開始就決定，用幾天自然就知道了。

常見問題

Spark 圖示沒出現：確認有打開檔案（只開資料夾不行）、VS Code 版本 1.98.0+、跑過 Reload Window。還是不行的話，試試暫時關掉其他 AI 擴充功能（Cline、Continue 之類的），可能有衝突。

JetBrains 裝了 plugin 但功能沒出現：確認是從專案根目錄啟動 claude、plugin 有 enabled、IDE 有完整重啟過（可能要重啟不只一次）。

Extension 裡登入失敗但 CLI 可以：VS Code 可能沒繼承你的 shell 環境變數。從終端機用 code . 啟動試試。

想要 Ctrl+Enter 送出而不是 Enter：Settings → Extensions → Claude Code → Use Ctrl+Enter to Send 打勾。

接下來學什麼

IDE extension 是最舒服的起手式，但 Claude Code 的能力遠不只這樣。這邊列幾個建議的學習路徑：

進階操作：Sub-agents 讓你把複雜任務拆給獨立的子程序處理，主 context 不會被塞爆。Agent Teams 則是讓多個 Claude 同時幫你工作。

自動化：Hooks 讓你在特定事件（工具呼叫前後、session 結束時）自動觸發腳本。搭配 GitHub Actions 可以打造完整的 CI/CD AI 管線。

擴充能力：MCP Server 讓 Claude 連接外部資料庫、API、工具。Skills 讓你把重複的工作流打包成可複用的指令。

兩條路：往深度走（Sub-agents → Agent Teams → Hooks），或往廣度走（MCP → Skills → Plugins）。

動手裝一個，開個新分頁跟 Claude 聊你正在做的專案，比看任何教學都快。

參考來源：Use Claude Code in VS Code - Claude Code Docs
參考來源：JetBrains IDEs - Claude Code Docs
參考來源：Claude Code [Beta] Plugin for JetBrains IDEs