iT邦幫忙

2025 iThome 鐵人賽

DAY 17
2
生成式 AI

AI-Driven Development - 個人開發者的敏捷實踐系列 第 17

Day 17 - AI 工具實戰:Claude Code 從零到上手

  • 分享至 

  • xImage
  •  

這個系列也一半了,我們了解現在生成式 AI 所帶來的開發模式的改變,從傳統 Scrum 開發到 AI-DLC 到 Spec-Driven Development,以及 AI-DLC Sprint 的嘗試,要實現這些開發模式,AI 工具不可少。

今天要介紹的 Claude Code,是筆者在開發 AI Agent 過程中不可或缺的夥伴。讓我們一起從零開始,深入了解這個強大的終端機 AI 助手。

簡介 Claude Code:你的終端機 AI 夥伴

Claude Code 是由 Anthropic 推出的命令列環境下的 AI 程式設計助手,定位為開發者終端機中的 AI 夥伴。透過 Claude Code,開發者可以直接在終端機中與 Anthropic 的大型語言模型 Claude 互動,實現真正的 Agentic Coding 或 Vibe Coding(代理人式開發流程)。

什麼是 Agentic Coding?簡單來說,就是讓 AI 不只是給建議,而是能夠:

  • 自動規劃任務:理解你的需求並制定執行計劃
  • 自動執行命令:直接在終端執行必要的指令
  • 自動讀取/修改程式碼:分析現有程式碼並進行優化
  • 協助完成各種開發任務:從 Debug 到重構一手包辦

Claude Code 讓 Anthropic 的 AI 模型更無縫地融入開發者的工作流程,提供類似 Pair Programming 的體驗,同時具備執行實際命令的能力。想像一下,有個經驗豐富的開發者坐在你旁邊,不僅能給建議,還能直接幫你寫程式碼、執行測試、修復 Bug。

準備 Claude Code 環境

在開始之前,請確保你的開發環境已經準備好以下工具:

  • Node.js 18+:建議使用 nvm 進行版本管理
  • Git:版本控制系統
  • GitHub CLI:方便與 GitHub 整合

安裝與啟動

Claude Code 的安裝過程非常簡單,支援多種安裝方式:

方式一:使用 npm 安裝(推薦)

npm install -g @anthropic-ai/claude-code

方式二:使用官方安裝腳本

# macOS/Linux/WSL
curl -fsSL https://claude.ai/install.sh | bash

# Windows PowerShell
irm https://claude.ai/install.ps1 | iex

# Windows CMD
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

安裝完成後,執行以下指令啟動 Claude Code:

claude

第一次執行時,你會看到登入提示。

Claude Code 登入方式

Claude Code 提供兩種登入方式,各有優缺點:

登入選項比較

登入方式 Claude 帳號 API Key
需求 Pro 或 Max 方案 有效的 API Key
計費方式 月費/年費訂閱制 按 Token 使用量計費
適合場景 個人開發、長期使用 企業專案、精確成本控制
使用限制 依訂閱方案有每日/月限制 依 API 配額限制
優點 固定費用、無需擔心用量 彈性計費、可精確控制成本
缺點 需要訂閱、有使用上限 需注意 Token 消耗

選擇建議:

  • 初學者/個人開發者:建議使用 Claude 帳號(Pro 方案)
  • 企業團隊/大型專案:建議使用 API Key 方式

也可以與筆者一樣直接買 Max $200USD,享受最完整的服務XD

Claude Code 模型選擇

Claude Code 支援三種不同特性的模型,可根據任務需求選擇:

Claude Opus

  • 定位:Anthropic 最強大的模型
  • 特色:專門處理複雜推理任務
  • 適用場景
    • 大規模重構
    • 架構設計
    • 複雜演算法實作
    • 深度程式碼分析

Claude Sonnet

  • 定位:平衡的中型模型
  • 特色:兼具能力和效能,表現依然傑出
  • 適用場景
    • 日常開發任務
    • 程式碼審查
    • Bug 修復
    • 一般重構工作

Claude Haiku

  • 定位:針對速度優化的輕量級模型
  • 特色:反應迅速,適合即時應用
  • 適用場景
    • 簡單程式碼補全
    • 快速查詢
    • 即時建議
    • 高頻互動場景

使用情境與核心功能

Claude Code 的強大之處在於它能理解上下文並採取一系列步驟來完成任務。

以下是幾個核心使用方式:

內建斜線命令 (Slash Commands)

Claude Code 提供了豐富的內建命令,讓你能快速完成特定工作:

  • /help: 查看所有可用命令
  • /clear: 清除對話記錄
  • /continue: 繼續上次對話
  • /reset: 重置整個對話

自定義斜線命令 (Custom Slash Commands)

你可以創建專屬的命令來優化工作流程:

# 創建專案級命令
mkdir -p .claude/commands

# 創建程式碼審查命令
cat > .claude/commands/review.md << 'EOF'
---
allowed-tools: Bash(git diff:*), Bash(git status:*)
description: 審查程式碼變更
---

請審查當前的程式碼變更,重點檢查:
- 程式碼品質和風格一致性
- 潛在的 bug 和安全性問題
- 效能優化建議
- 測試覆蓋率

當前變更:
!`git diff HEAD`
EOF

# 使用自定義命令
> /review

整合 Bash 指令

使用 ! 符號可以執行 bash 指令並將結果納入提示:

> 分析這個專案的結構 !`tree -L 2`
> 檢查最近的提交記錄 !`git log --oneline -10`

參考專案檔案

使用 @ 符號可以參考專案內的檔案:

> 解釋 @package.json 中的腳本用途
> 優化 @src/utils/helper.ts 的效能
> 為 @components/Button.tsx 添加單元測試

每個指令的詳細說明

/config - 個人化設定

這會開啟互動式設定介面,你可以調整:

  • 主題配色(深色/淺色模式)
  • 輸出格式偏好
  • 預設模型選擇
  • 工具權限設定

/init - 初始化專案記憶

/init 是一個非常重要的命令,它會在專案根目錄建立 CLAUDE.md 檔案

CLAUDE.md 的重要性

這個檔案就像是 Claude Code 的「專案記憶體」,它包含:

  • 專案概述:技術棧、架構說明
  • 開發慣例:程式碼風格、命名規則
  • 重要決策:為何選擇特定技術或模式
  • 常見問題:已知問題和解決方案
  • 團隊知識:特定領域知識或業務邏輯

有了這個檔案,Claude Code 能更好地理解你的專案脈絡,提供更精準的建議。

快捷鍵與輸入提示

Claude Code 提供了許多快捷鍵來加速你的工作:

快捷鍵 功能說明 使用範例
? 查看輸入提示 輸入 ? 顯示所有可用選項
查看命令歷史 鍵瀏覽之前的命令
@ 選取檔案或資料夾 @src/ 快速選擇檔案
Tab 自動完成/補全 輸入部分路徑按 Tab
! 執行 bash 命令 !ls -la 列出目前目錄
/ 輸入斜線命令 /help 查看幫助
# 加入記憶到上下文 #重要:使用 TypeScript strict mode

特別值得一提的是,檔案參考(@)也支援圖片內容,Claude Code 能夠分析圖片並根據內容提供建議。

重點功能:Subagents(子代理)

Subagents 是 Claude Code 的強大功能之一,它們就像是專門的 AI 助手團隊,每個都有特定的專長領域。

什麼是 Subagents?

Subagents 是預先配置好的專門化 AI 代理,它們:

  • 擁有特定領域的專業知識
  • 可以自動被觸發或手動調用
  • 能夠串聯使用完成複雜任務

使用 Subagents

# 查看所有可用的 subagents
> /agents

# Claude 會自動判斷並使用適合的 subagent
> 審查我最近的程式碼變更是否有安全漏洞

# 明確指定使用特定的 subagent
> 使用 code-reviewer subagent 檢查認證模組
> 讓 debugger subagent 調查為什麼用戶無法登入

example:
https://ithelp.ithome.com.tw/upload/images/20250917/20149301k4RPv2Qe3n.png

創建自定義 Subagent

可以自己建立或是讓 Claude Code 幫你建立

# .claude/agents/test-runner.md
---
name: test-runner
description: 自動執行測試並修復失敗的測試
tools: Read, Edit, Bash, Grep
---

你是一位測試自動化專家。當看到程式碼變更時,主動執行相關測試。
如果測試失敗,分析失敗原因並修復,同時保持測試的原始意圖。

工作流程:
1. 識別受影響的測試檔案
2. 執行相關測試套件
3. 分析失敗訊息
4. 實施修復方案
5. 驗證所有測試通過

重點功能:Output Styles(輸出風格)

Claude Code 提供多種輸出風格,讓你能根據不同情境調整回應格式:

https://ithelp.ithome.com.tw/upload/images/20250917/20149301v9fRxNTJ2t.png

可用的輸出風格

  1. Default(預設):平衡的輸出,包含解釋和程式碼
  2. Explanatory(詳細):會解釋為什麼這樣實作以及程式碼的設計模式
  3. Learning(學習):會暫停然後問你問題以及請你寫一些小練習

必者最近很喜歡用 Learning 模式,很像有一個老師在帶你的感覺
目前無法與 Subagents 整合是比較可惜的點

重點功能:Hooks(鉤子)

Hooks 讓你能在 Claude Code 的特定事件點注入自定義邏輯,實現工作流程自動化。

Hook 事件類型

Claude Code 支援以下 Hook 事件:

  • SessionStart:會話開始時觸發
  • UserPromptSubmit:用戶提交提示詞時觸發
  • PreToolUse:工具使用前觸發
  • PostToolUse:工具使用後觸發
  • Stop/SubagentStop:停止執行時觸發
  • SessionEnd:會話結束時觸發

重點功能:MCP(Model Context Protocol)

什麼是 MCP?

Model Context Protocol 允許 Claude Code:

  • 連接外部資料源
  • 整合第三方 API
  • 擴展工具能力
  • 實現跨平台協作

添加 MCP 伺服器

# 添加 GitHub 整合
claude mcp add --transport http github https://mcp.github.com/

# 添加 Vercel 整合
claude mcp add --transport http vercel https://mcp.vercel.com/

# 添加本地 MCP 伺服器
claude mcp add my-tool --scope project /path/to/mcp-server

使用 MCP 資源

# 直接引用 MCP 資源
> 分析 @github:issue://123 並提出修復方案
> 比較 @postgres:schema://users 與設計文件的差異

自定義 MCP 配置

// .mcp.json
{
  "mcpServers": {
    "custom-api": {
      "command": "node",
      "args": ["./mcp-server.js"],
      "env": {
        "API_KEY": "${API_KEY}",
        "BASE_URL": "https://api.example.com"
      }
    }
  }
}

結語

Claude Code 不只是一個 AI 編程助手,它是真正的開發夥伴。從今天的介紹中,你已經了解了:

  • 基礎設定:從安裝到登入的完整流程
  • 核心功能:斜線命令、快捷鍵、檔案參考
  • 進階特性:Subagents、Hooks、MCP 整合

Claude Code 的強大之處在於它能真正理解你的開發意圖,不只給建議,還能實際執行。無論是日常的 Bug 修復、程式碼重構,還是複雜的 AI 模型開發,Claude Code 都能成為你提升生產力的利器。

開始使用 Claude Code 吧!相信它會改變你的開發體驗,讓寫程式變得更有效率、更有樂趣。記住,最好的學習方式就是實際動手嘗試。

有了這個利器,筆者之會開始介紹使用 Claude Code 進行 AI-DLC Sprint 的開發流程,包含實際的專案架構和最佳實踐,可以關注另一個系列:AI-Driven Development 實戰篇:30 天 Side Project 開發全紀錄


上一篇
Day 16 - Debug 的藝術 - AI 應用的錯誤處理策略
下一篇
Day 18 - AI Product Manager - PRD 規格撰寫的 AI 革命
系列文
AI-Driven Development - 個人開發者的敏捷實踐18
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言