如何有效使用 Claude Code 命令 /add-dir
如何有效使用 Claude Code 命令 /add-dir
在現代軟體開發中,前後端分離架構已成為標準做法。開發者經常需要同時處理多個相關但獨立的專案目錄,例如前端 React 應用和後端 API 服務。Claude Code 的 /add-dir
指令正是為了解決這個痛點而設計的強大功能。
什麼是 /add-dir 指令
根據 官方文件,/add-dir
指令的作用是「Add additional working directories」(加入額外的工作目錄)。
這個指令讓 Claude Code 能夠:
- 擴展其工作範圍到多個目錄
- 同時理解和操作不同專案的程式碼
- 在跨目錄的上下文中提供更精準的建議
為什麼需要 /add-dir
單一目錄的限制
預設情況下,Claude Code 只能存取當前工作目錄。這在處理單一專案時沒有問題,但在現代開發環境中卻帶來諸多限制:
# 典型的專案結構
my-project/
├── frontend/ # React/Vue 前端專案
│ ├── src/
│ ├── package.json
│ └── ...
├── backend/ # Node.js/Python 後端專案
│ ├── src/
│ ├── package.json
│ └── ...
└── shared/ # 共享函式庫
├── types/
└── utils/
跨目錄協作的需求
在開發過程中,你可能需要:
- 同時修改前端 API 呼叫和後端 API 端點
- 確保前後端的資料型別一致性
- 在共享函式庫中加入新功能並更新相關專案
- 統一處理跨專案的設定檔
實際使用案例
案例 1:前端 + 後端 API 開發
假設你正在開發一個電商網站,需要同時處理前端購物車功能和後端訂單 API:
# 在前端專案目錄中啟動 Claude Code
cd /path/to/ecommerce-frontend
claude-code
# 使用 /add-dir 加入後端目錄
/add-dir /path/to/ecommerce-backend
這樣設定後,你可以詢問:
“幫我實作購物車結帳功能,需要修改前端的 CheckoutForm 組件和後端的 orders API”
Claude Code 現在能夠:
- 理解前端組件的狀態管理
- 檢視後端 API 的現有結構
- 確保前後端資料格式一致
- 同時修改兩個專案的程式碼
案例 2:微服務架構開發
在微服務環境中,你可能需要同時處理多個服務:
# 主要在用戶服務中工作
cd /path/to/user-service
claude-code
# 加入相關的微服務目錄
/add-dir /path/to/auth-service
/add-dir /path/to/notification-service
/add-dir /path/to/shared-schemas
這樣可以讓 Claude Code 協助你:
- 實作跨服務的功能
- 確保服務間 API 契約的一致性
- 更新共享的資料結構定義
- 處理服務間的依賴關係
案例 3:共享函式庫與主專案
當你維護一個內部函式庫和使用它的主專案時:
# 在主專案中工作
cd /path/to/main-project
claude-code
# 加入函式庫目錄
/add-dir /path/to/shared-library
這樣的設定有助於:
- 在函式庫中加入新功能
- 立即在主專案中使用新功能
- 確保 API 變更的向後相容性
- 同步更新文件和範例
最佳實踐
1. 選擇性加入目錄
不要加入所有相關目錄,只加入當前任務真正需要的:
# 好的做法:只加入必要的目錄
/add-dir /path/to/backend-api
/add-dir /path/to/shared-types
# 避免:加入太多不相關的目錄
/add-dir /path/to/every-single-project
2. 目錄結構建議
組織你的專案結構以便於使用 /add-dir
:
workspace/
├── frontend/
├── backend/
├── mobile/
├── shared/
│ ├── types/
│ ├── constants/
│ └── utils/
└── docs/
3. 與其他指令配合
結合其他 Claude Code 指令使用:
# 先加入目錄
/add-dir /path/to/backend
# 然後使用其他指令
/search "authentication" --include="*.ts,*.js"
/files backend/src/auth/
效能提升技巧
1. 減少上下文切換
使用 /add-dir
後,你可以在單一對話中處理多個專案:
用戶:幫我實作用戶註冊功能
Claude:我可以同時處理前端表單和後端 API...
用戶:現在加入郵件驗證功能
Claude:我會修改前端表單、後端 API 和郵件服務...
2. 同時查看前後端程式碼
Claude Code 能夠同時分析多個專案的程式碼結構:
// 前端: src/components/UserForm.tsx
interface UserFormData {
email: string;
password: string;
confirmPassword: string;
}
// 後端: src/types/user.ts
interface CreateUserRequest {
email: string;
password: string;
// 注意:後端不需要 confirmPassword
}
Claude Code 會發現這種不一致並提供建議。
3. 快速定位跨專案問題
當 API 呼叫失敗時,Claude Code 可以:
- 檢查前端的 API 呼叫程式碼
- 驗證後端的路由和控制器
- 比較資料型別定義
- 建議修復方案
注意事項
1. 記憶體使用考量
每個加入的目錄都會增加 Claude Code 的記憶體使用量。建議:
- 只加入當前工作需要的目錄
- 定期清理不再需要的目錄
- 監控系統資源使用情況
2. 目錄選擇策略
選擇目錄時考慮:
- 相關性:目錄與當前任務的相關程度
- 大小:避免加入過大的目錄
- 頻率:優先加入經常需要修改的目錄
3. 避免加入無關目錄
不要加入以下類型的目錄:
# 避免加入這些目錄
/add-dir /path/to/node_modules # 依賴套件
/add-dir /path/to/build # 建置輸出
/add-dir /path/to/logs # 日誌檔案
/add-dir /path/to/.git # Git 內部檔案
進階使用技巧
1. 動態目錄管理
根據不同的開發階段調整目錄:
# 開發階段:加入開發相關目錄
/add-dir /path/to/backend
/add-dir /path/to/tests
# 部署階段:加入部署相關目錄
/add-dir /path/to/docker
/add-dir /path/to/k8s-configs
2. 團隊協作標準
建立團隊的 /add-dir
使用標準:
# 團隊標準目錄結構
/add-dir ../backend # 總是相對於前端目錄
/add-dir ../shared-types # 共享型別定義
/add-dir ../e2e-tests # 端到端測試
3. 自動化腳本
建立腳本來自動執行常用的目錄組合:
#!/bin/bash
# setup-fullstack.sh
echo "/add-dir $(pwd)/../backend"
echo "/add-dir $(pwd)/../shared"
echo "/add-dir $(pwd)/../docs"
結論
/add-dir
指令是 Claude Code 中一個強大但容易被忽視的功能。正確使用它可以:
- 提升開發效率:減少在不同專案間切換的時間
- 改善程式碼品質:確保跨專案的一致性
- 加速問題解決:快速定位和修復跨專案問題
- 增強協作能力:更好地處理複雜的多專案開發任務
在現代的前後端分離開發環境中,善用 /add-dir
指令將大幅提升你的開發體驗。記住,關鍵在於選擇性地加入真正需要的目錄,並保持良好的專案組織結構。
開始在你的下一個專案中嘗試 /add-dir
指令吧!你會發現它如何改變你的開發流程。