生活分享

Claude Code|VS Code 與 JetBrains 整合

在編輯器帶入檔案、選取內容與查看變更。IDE 整合讓 Claude Code 更容易取得目前開啟的檔案、選取範圍與編輯器中的差異。本篇分別帶你設定 VS Code 擴充功能與 JetBrains 外掛,並用同一個只讀問題驗證連線。兩者安裝方式不同,請依自己使用的編輯器完成其中一條路線即可。

閱讀時間約 5 分鐘

VS Code 與 JetBrains 整合:文件、螢幕與完成記號的幾何插圖
圖片:Mokaair (© Mokaair)
本篇目錄
  1. 在 VS Code 安裝並登入
  2. 在 JetBrains 安裝兩個部分
  3. 把選取內容交給 Claude
  4. 在差異中審查第一個修改
  5. 排查連線與快捷鍵問題

IDE 整合讓 Claude Code 更容易取得目前開啟的檔案、選取範圍與編輯器中的差異。本篇分別帶你設定 VS Code 擴充功能與 JetBrains 外掛,並用同一個只讀問題驗證連線。兩者安裝方式不同,請依自己使用的編輯器完成其中一條路線即可。

請準備可用帳號與。VS Code 擴充功能本身包含對話面板需要的 CLI 元件;JetBrains 外掛則會呼叫已安裝的 claude 指令。若打算從任何編輯器的整合終端機直接執行 claude,都應先完成對應作業系統的 CLI 安裝。

在 VS Code 安裝並登入

在 VS Code 安裝並登入 → 在 JetBrains 安裝兩個部分 → 把選取內容交給 Claude
在 VS Code 安裝並登入 → 在 JetBrains 安裝兩個部分 → 把選取內容交給 Claude · 圖片:Mokaair (© Mokaair)
閱讀完整文字說明

VS Code 與 JetBrains 整合,以流程和文件圖形呈現教學重點。

使用 VS Code 的擴充功能面板搜尋 Claude Code,從官方文件連到的 Anthropic 擴充功能頁確認發行者後安裝。不要只憑相似圖示或名稱選擇。依官方需求確認編輯器版本,安裝後若看不到面板,可從命令選擇區執行重新載入視窗。

開啟練習資料夾,再從 Claude 圖示或命令選擇區開啟面板。第一次使用依登入畫面前往瀏覽器完成授權,返回後檢查是否顯示可輸入的對話。若終端機已有 API 環境設定,但圖形介面沒有繼承,那是程序環境差異;先確認自己要採用的登入方式,不必到處複製金鑰。

VS Code 命令選擇區:搜尋功能名稱 · text
Claude Code
Developer: Reload Window

上面是命令選擇區的搜尋文字,不是 shell 命令。Windows/Linux 可用 Ctrl+Shift+P,macOS 可用 Cmd+Shift+P 開啟。搜尋後選擇實際顯示的 Claude Code 開啟面板選項;各版本的選單文字可能略有變動,功能目的仍是進入該專案的對話。

在 JetBrains 安裝兩個部分

先在一般終端機確認 claude --version 與 claude doctor 正常,再到 IDE 的 Plugins 搜尋官方 Claude Code 外掛,依提示重新啟動 IDE。JetBrains 外掛不內附獨立 CLI,所以只完成外掛安裝,仍可能遇到無法啟動 claude 的訊息。

在 IDE 的整合終端機進入專案並啟動 claude,讓外掛與工作階段連接。若從外部終端機啟動,可在 Claude 對話中使用 /ide 選擇可連接的 IDE。先確認兩邊開的是同一個專案,不要把另一個視窗的編輯器狀態帶入本次工作。

JetBrains 整合終端機:確認 CLI 後啟動 · bash
claude --version
claude doctor
claude
Claude Code 對話框:從外部終端機連接 IDE · text
/ide
項目VS Code 擴充功能JetBrains 外掛
對話入口原生圖形面板以 CLI 整合終端機為核心
CLI 元件面板自行附帶需要另外安裝
外部終端機使用 claude需獨立 CLI使用同一套已安裝 CLI
驗證重點面板登入與選取範圍指令路徑與 IDE 連線

把選取內容交給 Claude

在編輯器開啟 model.js,選取切換待辦完成狀態的函式。VS Code 可顯示目前選取的行數,並使用檔案引用功能把路徑與範圍放入提示詞;JetBrains 也提供選取內容與檔案引用快捷鍵。快捷鍵可能受你自己的鍵盤配置覆蓋,遇到衝突時先從命令或外掛選單執行。

你仍應在問題中說清楚想了解什麼。選取範圍只提供位置,不能自動代表你要除錯、重構或翻譯註解。以下問題要求只讀解釋,並讓 Claude 描述資料如何改變,適合用來驗證它拿到的是正確程式。

IDE 的 Claude Code 對話框:已選取 model.js 的切換函式 · text
請解釋目前選取的函式。
說明輸入資料、項目識別碼與回傳結果,並舉兩筆待辦的例子。
指出未被選中的那一筆會不會改變,先不要修改任何檔案。

成功時回覆應能對應實際函式名稱和判斷條件,而非單純介紹 JavaScript 陣列。若答案談到其他檔案,先查看選取指示、目前編輯頁籤與引用路徑。取消舊選取或重新加入明確的 @model.js,通常就能把問題定位清楚。

在差異中審查第一個修改

接著請 Claude 只替這個函式補一段簡短說明,保留邏輯不變。依權限模式,IDE 可能先顯示提案,或在寫入後呈現差異。逐行核對是否只有註解變動,並確認沒有未預期的格式改寫。接受與拒絕的是當前操作,仍要留意磁碟上其他既有變更。

IDE 的 Claude Code 對話框:最小修改練習 · text
請為剛才的切換函式補上繁體中文註解,說明以識別碼找項目。
只改註解,保留程式邏輯與格式,執行既有測試確認行為未變。
完成後指出修改位置與實際測試結果。

測試應在同一個專案環境執行。尤其遠端開發時,視窗在你的電腦上不代表工具也在本機;JetBrains Remote Development 的外掛可能要安裝於遠端 host,VS Code 遠端視窗也有自己的環境。出現「本機可以、IDE 不行」時,先比較這些位置與可執行檔路徑。

排查連線與快捷鍵問題

JetBrains 顯示找不到 claude,先在它自己的整合終端機執行版本檢查,必要時在外掛設定填入已確認的完整命令路徑。若 Esc 被 IDE 攔截而無法中斷,檢查終端機的焦點與快捷鍵配置。WSL 連到 Windows IDE 的問題則可能涉及網路邊界,應依官方專節排查,不要直接把防火牆全面關閉。

小練習是選擇另一個資料操作函式,先問只讀問題,再提出只改註解的任務。完成判準包括引用路徑正確、回覆對上選取程式、差異符合範圍與測試通過。熟悉後再前往,學習在大型專案中提供更精準的材料。

回總目錄

  • 生活分享

    Claude Code|建立第一個 mod:在 Claude Code 行程內數工具呼叫

    寫一個三檔案的 mod,用驗證器與測試確認它掛上的事件。文件把 mod 定義成多了入口檔的 plugin:入口檔叫 hooks module,Claude Code 在事件發生時呼叫裡面的函式,函式可以觀察、改寫或接手事件。

  • 生活分享

    Claude Code|Git Worktree 平行工作

    隔離多個任務的檔案與分支。Git Worktree 讓同一儲存庫擁有多個工作目錄,各自使用分支與檔案。本篇會把待辦篩選與文件整理分開,確認兩個 session 不會直接改到彼此的檔案,再把其中一個成果整合回主分支。你也會知道何時可以安全清理工作目錄。

  • 生活分享

    Claude Code|雙 Worktree 實作與衝突整合

    隔離兩項功能,最後完成整合與回歸。兩個 Claude 工作階段同時編輯專案,最容易出現的問題是互相改到同一份檔案,或各自測試通過、整合後卻失敗。本篇用兩個 Worktree 分別處理篩選預設值與介面文字,故意製造一次小衝突,再完成整合、驗證與清理。你不需要先啟用 Agent Teams。

  • 生活分享

    Claude Code|比較流程品質、用量與執行時間

    以同一資料集比較兩種工作方法。比較兩種 Claude 工作方法時,不能只挑成功那一次,也不能只看第一個答案有多快。本篇用固定案例、原始紀錄和一致判準,比較品質、重試、等待與人工整合時間,最後寫出有樣本數與限制的報告,而不是保證某個方法一定省錢。

最新旅遊情報攻略

資料來源

生活分享