在 VS Code 中使用 Claude Code 的兩種方式

在 VS Code 中使用 Claude Code，主要有兩種方式：透過官方 Extension（圖形化介面）和透過整合式終端機（CLI 模式）。兩者各有優勢，也可以搭配使用。

官方建議的方式是使用 VS Code Extension，它提供了最完善的圖形化整合體驗。不過 Extension 本身也內建了 CLI，你可以在 VS Code 的整合式終端機中直接使用進階功能。

安裝 VS Code Extension

前置需求

• VS Code 1.98.0 或更高版本
• Anthropic 帳號（首次開啟 Extension 時登入）
• 如果使用 Amazon Bedrock 或 Google Vertex AI 等第三方供應商，需要另外設定

安裝步驟

安裝 Claude Code Extension 非常簡單，只需要三個步驟。首先在 VS Code 中按下 Cmd+Shift+X（Mac）或 Ctrl+Shift+X（Windows / Linux）開啟 Extensions 面板。接著搜尋「Claude Code」，找到由 Anthropic 發行的官方 Extension，點擊 Install 安裝。安裝完成後，如果沒有看到 Extension 介面，可以按 Cmd+Shift+P 執行「Developer: Reload Window」重新載入 VS Code。

你也可以在 Cursor 編輯器中安裝相同的 Extension。Cursor 是基於 VS Code 的分支，兩者共享相同的 Extension 生態系統。

開啟與操作 Claude Code 面板

安裝完成後，VS Code 中會出現 Spark 圖示（✱），這就是 Claude Code 的標誌。你可以透過以下幾種方式開啟 Claude Code 面板。

最快的方式是點擊編輯器右上角的 Spark 圖示，前提是你有開啟的檔案。你也可以在左側 Activity Bar 找到 Spark 圖示，點擊後會顯示過往對話列表。另外，按下 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows / Linux）開啟 Command Palette，輸入「Claude Code」就能看到所有可用指令。最後，VS Code 視窗右下角的 Status Bar 也會顯示「✱ Claude Code」，即使沒有開啟檔案也能使用。

Claude Code 面板可以自由拖曳到 VS Code 的任何位置。你可以把它放在右側 Secondary Sidebar 方便邊寫程式邊對話，放在左側 Primary Sidebar 跟檔案總管並列，或者拖到 Editor 區域作為獨立分頁使用。

快捷鍵與操作技巧

熟悉快捷鍵是提升開發效率的關鍵。VS Code 中的 Claude Code 提供了一組實用的鍵盤快速鍵，根據目前焦點在編輯器或 Claude 面板，可用的快捷鍵會有所不同。

其中 Cmd+Esc 是最常用的快捷鍵。當你在寫程式碼時想問 Claude 問題，按一下就能跳到 Claude 面板輸入；問完後再按一下就回到程式碼繼續編輯，完全不需要動滑鼠。

@ 引用與 Context 管理

在提示框中輸入 @ 加上檔案名稱，Claude 就會自動讀取該檔案的內容。這個功能支援模糊匹配，輸入部分名稱即可找到目標檔案。資料夾名稱後面加上斜線 / 可以引用整個目錄。

# 引用特定檔案
@auth.js

# 模糊匹配，會自動找到 AuthService.ts 等相關檔案
@auth

# 引用整個資料夾
@src/components/

# 引用特定行數範圍
@app.ts#5-10

# 引用終端機輸出
@terminal:name

當你在編輯器中選取文字時，Claude 會自動看到你選取的程式碼。按下 Option+K（Mac）或 Alt+K（Windows / Linux），Claude 會在提示框中插入帶有檔案路徑和行號的 @-mention 參考，例如 @app.ts#5-10。提示框下方會顯示目前選取了多少行程式碼。

Inline Editing 與檔案變更審查

VS Code Extension 最大的優勢之一，就是視覺化的檔案變更審查。當 Claude 要修改檔案時，它會以 Side-by-side Diff 的方式顯示原始內容和修改後的內容，讓你一眼就能看出改了什麼。你可以選擇接受、拒絕，或告訴 Claude 你希望怎麼調整。

三種權限模式

Extension 提供三種權限模式，你可以在提示框底部切換。

Normal 模式是預設模式，Claude 每次要執行操作前都會先詢問你的許可。這是最安全的模式，適合剛開始使用或處理重要程式碼時使用。

Plan 模式讓 Claude 先描述它打算做什麼，VS Code 會自動把計畫以完整的 Markdown 文件開啟，你可以在文件中直接加入行內註解給予回饋，Claude 才會開始執行。這個模式適合處理複雜的重構任務。

Auto-accept 模式讓 Claude 自動套用修改，不需要逐一確認。適合你信任 Claude 的修改且想要快速完成任務時使用。你可以在 VS Code 設定中透過 claudeCode.initialPermissionMode 設定新對話的預設模式。

Checkpoints 回復機制

VS Code Extension 支援 Checkpoints 功能，追蹤 Claude 的每一次檔案修改。將滑鼠移到任何訊息上，就會出現回復按鈕，提供三個選項。

• Fork conversation from here：從該訊息開始分支新對話，保留所有程式碼變更
• Rewind code to here：將檔案回復到該時間點的狀態，但保留完整對話紀錄
• Fork conversation and rewind code：同時分支對話並回復程式碼

這個功能讓你可以大膽嘗試不同方案，即使 Claude 的修改不如預期，也能輕鬆回到之前的狀態。

多工對話與工作流程自訂

透過 Command Palette 執行「Open in New Tab」或「Open in New Window」，可以同時開啟多個 Claude 對話。每個對話獨立維護自己的歷史記錄和 Context，讓你能同時處理不同任務。使用分頁時，Spark 圖示上的彩色小點表示狀態：藍色表示有待處理的權限請求，橘色表示 Claude 在分頁隱藏時已完成工作。

對話歷史會被完整保存。點擊 Claude Code 面板頂部的下拉選單，就能瀏覽或搜尋過往的對話記錄。新對話會自動根據第一則訊息產生 AI 標題，你也可以手動重新命名以便日後查找。

在 VS Code 終端機中使用 CLI

除了圖形化的 Extension，你也可以在 VS Code 的整合式終端機中直接執行 claude 指令。按下 Ctrl+`（反引號）開啟終端機，輸入 claude 即可啟動 CLI 模式。CLI 會自動偵測到 VS Code 環境，並整合 Diff 檢視和診斷資訊分享等功能。

Extension 和 CLI 共享相同的對話歷史。如果你在 Extension 中開始了一個對話，可以在終端機中執行 claude --resume 繼續該對話。這個功能在需要使用 CLI 專屬功能時特別實用，例如 ! bash 快捷鍵或 Tab 補全等 Extension 不支援的功能。

如果你使用外部終端機而非 VS Code 內建終端機，可以在 Claude Code 中執行 /ide 指令來連接到 VS Code，同樣能獲得 Diff 檢視等整合功能。

Extension 設定與自訂

Claude Code 的設定分為兩類。Extension 設定在 VS Code 的 Settings 中管理，控制 Extension 在 VS Code 內的行為。Claude Code 設定則存放在 ~/.claude/settings.json，由 Extension 和 CLI 共享，用於設定允許的指令、環境變數、Hooks 和 MCP 伺服器。

在 settings.json 中加入 "$schema": "https://json.schemastore.org/claude-code-settings.json"，可以啟用自動完成和即時驗證功能，讓你在編輯設定檔時更加方便。

與 GitHub Copilot 的共存

許多開發者同時使用 GitHub Copilot 和 Claude Code，兩者的定位其實不太一樣。Copilot 擅長行內自動補全，在你打字時即時建議下一行程式碼。Claude Code 則是對話式的 AI 助手，適合處理跨檔案修改、程式碼審查、Debug 和架構設計等需要更多 Context 的任務。

兩個 Extension 可以同時安裝，不會互相衝突。如果你在安裝 Claude Code 後遇到 Spark 圖示不顯示的問題，可以嘗試暫時停用其他 AI Extension（包括 Cline、Continue 等），然後重新載入 VS Code 來排除衝突。

實務上的建議是：寫程式碼時讓 Copilot 處理行內補全，需要進行跨檔案重構、撰寫測試、Debug 或 Code Review 時切換到 Claude Code。兩者搭配使用，能涵蓋大部分的 AI 輔助開發場景。

進階功能：Plugin 管理與瀏覽器自動化

VS Code Extension 內建了 Plugin 管理介面。在提示框中輸入 /plugins，就能瀏覽、安裝和管理各種 Plugin。安裝時可以選擇三種範圍：為你個人安裝（所有專案可用）、為目前專案安裝（團隊共享）、或只在本機安裝（僅限你在此 Repository 使用）。

另一個實用功能是瀏覽器自動化。安裝 Claude in Chrome Extension 後，在 Claude Code 提示框中輸入 @browser 加上指令，就能讓 Claude 操控你的瀏覽器。例如 @browser go to localhost:3000 and check the console for errors，Claude 會開啟新分頁幫你檢查，並共享你瀏覽器的登入狀態。

常見問題與疑難排解

Extension 無法安裝

確認你的 VS Code 版本在 1.98.0 以上（Help → About 可查看版本），並確保 VS Code 有安裝 Extension 的權限。如果透過 Marketplace 搜尋找不到，可以直接前往 VS Code Marketplace 網頁手動安裝。

Spark 圖示不顯示

Spark 圖示需要在編輯器中開啟檔案才會出現。如果已開啟檔案但仍看不到，依序嘗試以下步驟：執行「Developer: Reload Window」重新載入 VS Code、暫時停用其他 AI Extension（Cline、Continue 等）排除衝突、確認工作區不是處於 Restricted Mode。你也可以改用 Status Bar 右下角的「✱ Claude Code」或 Command Palette 來開啟。

Claude 沒有回應

如果 Claude 完全沒有回應，先確認網路連線是否穩定。接著嘗試開始新對話看問題是否持續。最後可以在終端機中直接執行 claude，CLI 通常會提供更詳細的錯誤訊息，幫助你定位問題。如果問題持續存在，可以到 GitHub 上的 claude-code Repository 提交 Issue。

Extension 與 CLI 的功能差異

部分功能目前僅在 CLI 中可用。如果你需要使用完整的 Slash Commands、! bash 快捷鍵或 Tab 補全功能，可以在 VS Code 的整合式終端機中執行 claude 來啟動 CLI 模式。Extension 和 CLI 共享設定和對話歷史，切換使用非常方便。

總結

VS Code Extension 讓 Claude Code 真正融入了你的開發流程。從視覺化的 Inline Diff 審查、靈活的權限模式、到多工對話和 Checkpoints 回復機制，每一項功能都是為了讓 AI 輔助開發更加順暢。搭配 CLI 的進階能力，VS Code 成為了一個完整的 AI 驅動開發環境。

建議從 Normal 模式開始使用，熟悉操作後逐步切換到 Plan 或 Auto-accept 模式。善用 @ 引用和快捷鍵，能讓你和 Claude 的協作效率更上一層樓。下一篇文章我們將介紹 Claude Code 在 JetBrains IDE 中的整合，敬請期待。

ㄚ槌

blog.che-ya.com