Claude Code 教學：如何在 VS Code 中設定 Hooks 與 Subagents 實戰

讀完這篇教學，你會知道如何在 VS Code 中設定 claude code vscode extension，並透過實戰操作學會 claude code hooks 怎麼用 與 claude code subagents 設定，把 AI 從單純的程式碼生成工具，變成能自主執行複雜任務的開發副手。

多數開發者卡關的地方，不是裝好擴充功能，而是不知道怎麼設定 claude code subagents 設定 跟 claude code hooks 怎麼用。這篇文章會帶你走完整個流程，從安裝到建立自動化開發流程。

查看相關日報

什麼是 Claude Code？核心概念與價值

Claude Code 不是聊天機器人，而是 Anthropic 為軟體開發者設計的代理程式（Agent）介面。它能執行命令、讀取檔案系統，並與開發環境深度互動。開發者用自然語言描述專案需求，AI 會自動規劃執行步驟，甚至主動呼叫終端機指令完成任務。

學習 claude code vscode extension 的重點在於「自主性」。過去你得手動複製貼上程式碼、手動跑測試、手動修錯誤；現在你可以授權 AI 在特定範圍內自己動手做。核心概念是把開發者的意圖轉成可執行的行動序列，而不只是給文字建議。

但自主性一旦擴大，控制就變得重要。這正是 claude code hooks 怎麼用 與 claude code subagents 設定 存在的理由：透過 Subagents（子代理），你可以把大型專案拆成多個專精角色，例如一個顧前端、一個顧後端、一個顧測試，讓它們分工合作。Hooks 則定義這些子代理在特定觸發條件下（如程式碼提交、測試失敗）該做什麼反應。這套架構讓你能精準畫出 AI 的行為邊界，避免它自作主張做出不符合專案規範的判斷。

事前準備：環境配置與工具安裝

這一步直接影響後續 claude code vscode extension 的穩定性與功能完整性，別跳過。

VS Code 系統需求與相容性檢查

支援的平台請以官網最新公告為準。另外要檢查作業系統是否有 Node.js 環境，因為 Claude Code 的許多底層功能仰賴 Node.js 執行。

官方沒有公布具體的 RAM 或 CPU 需求，但實務上建議至少 16GB RAM，避免處理大型專案或同時跑多個 Subagents 時卡頓。硬體資源有限的話，可以先在雲端開發環境（如 GitHub Codespaces 或 Gitpod）測試，這類環境通常會自動分配資源。

安裝 Claude Code 擴充功能與建立 Anthropic 帳號

開啟 VS Code 的「擴充功能」視窗（Extensions View），搜尋「Claude Code」。務必確認發布者是 Anthropic 官方，避免裝到來路不明的第三方套件。

支援的平台請以官網最新公告為準。若還沒有帳號，前往 Anthropic 官網申請，並完成電子郵件驗證。

小提醒：登入過程中系統可能要求同意資料使用條款，尤其留意「AI 如何處理你的程式碼」這部分。Anthropic 官方說明中承諾不會將開發者的私有專案程式碼用於訓練公共模型，除非你明確授權，實際條款以官網公告為準。

Step 1：安裝與基本設定流程

擴充功能裝好後，進入核心設定階段，這是掌握 claude code vscode extension 的關鍵，也是後續設定 Hooks 的基礎。

擴充功能安裝與 API Key 配置步驟

1. 點擊側邊欄 Claude Code 圖示，開啟「設定 API Key」。
2. 系統跳轉至 Anthropic 官方管理後台（或在 VS Code 內嵌視窗直接輸入）。
3. 複製 API Key，貼入 VS Code 設定欄位。
4. 點擊「儲存」，系統會驗證 Key 是否有效。

若驗證失敗，先檢查字串是否複製完整，或該 Key 是否已過期。企業版帳號的話，確認你的權限是否允許建立新的 API Key。

初始設定檔 (.claude) 建立與基礎參數調整

在專案根目錄建立 .claude 資料夾（已存在就直接用），裡面新增 config.json，這個檔案定義 claude code subagents 設定 的預設參數：

{
"model": "claude-sonnet-4",
"max_tokens": 4096,
"temperature": 0.7,
"system_prompt": "你是一位資深全端開發者，專注於建立高效、可維護的現代化 Web 應用程式。請在執行任何命令前，先確認其安全性與必要性。"
}

model 參數選擇要用的模型版本（依官網最新選項為準），temperature 控制 AI 的創造性——數值越高越適合創意編碼，越低越適合嚴謹除錯。

system_prompt 是 claude code hooks 怎麼用 的核心。這裡定義 AI 的行為準則，例如「遇到安全風險必須暫停詢問使用者」，這會直接影響後續 Hooks 的觸發邏輯。

小提醒：專案涉及敏感資料的話，加入 exclude_paths 參數，把包含密碼、金鑰或個資的檔案排除在 AI 掃描範圍外。

Step 2：第一個實作範例 - 建立 Subagents

基本設定完成後，進入最實戰的部分：建立 Subagents（子代理）。這是 claude code subagents 設定 的核心應用，能把單一 AI 的能力擴展成團隊協作模式。

Subagents 結構定義與任務分配操作

在 .claude 資料夾建立 subagents.json，定義子代理結構。每個子代理有各自的職責範圍，例如前端開發、後端邏輯或自動化測試：

{
"subagents": [
{
"name": "frontend-specialist",
"role": "前端開發專家",
"scope": ["src/frontend", "public"],
"instructions": "專注於 React 元件優化與 CSS 樣式調整。遇到複雜的 UI 問題時，請先模擬使用者體驗。"
},
{
"name": "backend-specialist",
"role": "後端架構師",
"scope": ["src/backend", "api"],
"instructions": "負責 API 設計、資料庫優化與效能監控。遇到效能瓶頸時，請提供具體的查詢優化建議。"
},
{
"name": "qa-engineer",
"role": "品質保證工程師",
"scope": ["tests", "e2e"],
"instructions": "負責撰寫與執行測試案例。當測試失敗時，請自動分析錯誤日誌並提出修復方案。"
}
]
}

scope 定義每個子代理能操作的檔案範圍，防止 AI 越界；instructions 是引導 AI 行為的提示詞，直接影響 Hooks 的觸發條件。

預期執行結果與除錯技巧

設定完成後，在 VS Code 的 Chat 視窗輸入「@frontend-specialist 請優化首頁的載入速度」，系統會把任務分配給前端專家子代理。

預期結果：AI 自動掃描 src/frontend 與 public 目錄，分析效能瓶頸，提出優化建議或直接執行重構。

除錯技巧：Subagent 無法執行任務時，檢查這三點：

1. 權限問題：確認 AI 有沒有權限讀寫指定的檔案路徑。
2. 範圍設定錯誤：檢查 scope 參數，確認路徑沒拼錯。
3. 模型限制：任務太複雜時，AI 可能因 Token 限制中斷，這時把任務拆成幾個小步驟。

若 AI 拒絕執行某些任務，多半是 system_prompt 設定過嚴，導致 AI 誤判任務的風險等級。這時調整提示詞，明確說明任務背景與安全性即可。

Step 3：進階技巧 - Hooks 怎麼用與最佳實踐

掌握 Subagents 後，接著是 claude code hooks 怎麼用 的進階應用。Hooks 定義 AI 在特定事件發生時的自動反應機制，把開發流程從「被動回應」變成「主動預防」。

Hooks 觸發機制與自動化流程設定

在 .claude 資料夾建立 hooks.json，定義觸發條件與對應行動：

{
"hooks": [
{
"trigger": "on_file_change",
"path": "src/**/*.{js,jsx,ts,tsx}",
"action": "run_linter",
"description": "當前端檔案被修改時，自動執行 ESLint 檢查。"
},
{
"trigger": "on_test_failure",
"path": "tests/",

"action": "analyze_and_fix",
"description": "當測試失敗時，自動分析錯誤日誌並嘗試修復。"
},
{
"trigger": "on_commit",
"path": ".git",
"action": "security_scan",
"description": "當程式碼被提交時，自動執行安全掃描，檢查是否有敏感資訊洩漏。"
}
]
}

效率提升策略：

• 分層設定：開發階段（如 on_file_change）與部署階段（如 on_commit）分開設定，避免開發時被過度打擾。
• 動態調整：專案初期設定寬鬆一點，穩定期再加強檢查頻率。

常見陷阱：

• 無限迴圈：Hook 的行動若導致檔案變更，而變更又觸發同一個 Hook，可能陷入無限迴圈。設定 max_iterations 參數限制執行次數可以避免。
• 誤報過多：Hook 經常誤報時，調整 system_prompt 或 instructions，讓 AI 判斷更精準。
• 資源消耗：Hook 執行太頻繁會吃掉大量資源。開發環境可以先關閉非必要的 Hook，只在 CI/CD 流程中啟用。

小提醒：AI 拒絕執行 Hook 時，通常是觸發了安全機制。可以在 system_prompt 中明確說明該 Hook 的必要性與安全性，降低誤判機率。

Anthropic 官方尚未公開 claude code vscode extension 詳細的免費與付費方案差異，部分功能可能僅限試用期，到期後需轉付費或停用。具體額度、價格與功能限制，請以 Anthropic 官網 Pricing 頁面公告為準，這類定價資訊變動頻繁，建議設定前先查一次最新版本。

這篇教學帶你走完 claude code vscode extension 的安裝、設定與實戰應用，也學會了 claude code subagents 設定 與 claude code hooks 怎麼用** 的具體操作方式。

接下來，建議把這些設定套用到手上的實際專案，依專案需求微調 Subagents 與 Hooks 的參數。Anthropic 的更新速度快，隔一陣子回來看官方文件，可能會發現新的設定選項或行為變化。

AI 能自主執行任務，不代表它該擁有最終決策權。設定好邊界、盯緊執行結果，才是用好這套工具的關鍵。