iT邦幫忙

2026 iThome 鐵人賽

DAY 11
0
AI 自動化

風裡雨裡我在AI世界等你系列 第 11

Day11-Claude Code

  • 分享至 

  • xImage
  •  

Claude Code

https://ithelp.ithome.com.tw/upload/images/20260811/20163257JyiDEYQBx7.png

是由 Anthropic 推出 代理型 AI 編碼系統(Agentic Coding System) 不只是傳統程式碼自動補全工具,而是一個可以直接在終端機(Terminal)、IDE(例如: VS Code)或瀏覽器中運行AI助手,它具備極高的自主權,能夠主動閱讀整個專案、跨檔案修改程式碼、自動執行測試、處理 Git 版本控制,甚至修復 CI/CD 失敗的錯誤

核心功能與優勢

  • 全專案上下文理解:能夠在百萬行級別的程式碼庫中快速檢索、追蹤相依性,並理解模組間的關聯
  • 自主工具調用(Agent Loop):在獲得授權後,可以自主執行 Shell 指令、使用 git 提交變更、或調用 GitHub/GitLab CLI
  • 自動化測試與除錯:只要給它一個測試指令,它若發現測試失敗,會自動去讀取錯誤日誌、修改程式碼、再次運行測試,直到全部通過為止
  • 靈活的延伸擴充: 支援 Model Context Protocol (MCP),可與 Jira、Notion、Slack 等外部工具連動;並能透過專案根目錄的 CLAUDE.md 來記住團隊的編碼規範

安裝與啟動

Claude Code 支援 macOS、Linux 和 Windows。可以透過以下方式快速在終端機安裝:

1. 安裝指令

  • macOS / Linux / WSL
curl -fsSL https://claude.ai/install.sh | bash
  • Windows (PowerShell):
irm https://claude.ai/install.ps1 | iex

2. 初始化與登入

安裝完成後,進入你的專案目錄並直接輸入 claude

cd /path/to/your/project
claude

首次使用時,終端機會引導完成 Anthropic 帳戶(支援 Pro, Max, Team 或 Enterprise 訂閱)的登入驗證。

常用終端機指令(CLI Commands)

進入 claude 互動模式後,可以使用以下幾種模式與斜線指令(Slash Commands):

指令 / 用法 功能說明 實際範例
claude 開啟互動式 Claude Code 對話環境 claude
claude "任務內容" 執行一次性單一任務,完成後自動退出 claude "修復 TypeScript 編譯錯誤"
claude -p "問題" 唯讀模式,只詢問問題,不修改檔案 claude -p "解釋這個 React Hook"
claude --resume 繼續上一次對話工作流程 claude --resume
claude --model <模型> 指定 Claude 模型版本 claude --model sonnet
claude --dangerously-skip-permissions 跳過權限確認(高風險) claude --dangerously-skip-permissions
claude config 開啟 Claude Code 設定管理 claude config
claude update 更新 Claude Code 到最新版 claude update
claude doctor 檢查 Claude Code 環境問題 claude doctor
/help 顯示所有可用指令與技能 /help
/clear 清除目前對話歷史 /clear
/exit 離開 Claude Code /exit
/compact 壓縮目前上下文,減少 token 使用量 /compact
/model 切換目前使用模型 /model
/permissions 查看或管理工具權限 /permissions
/memory 查看 Claude 的記憶內容 /memory
/init 初始化專案設定(建立 CLAUDE.md) /init
/status 查看目前 session 狀態 /status
/bug 回報問題給官方 /bug

常見使用情境

情境 指令
分析整個專案 claude "分析這個專案架構"
修復錯誤 claude "修復 npm build error"
建立API claude "建立 Express REST API"
解釋程式碼 claude -p "解釋這個 function"
React重構 claude "把這段改成 React Hook"
Debug TypeScript claude "修復 TypeScript 型別錯誤"
Docker化專案 claude "幫我建立 Dockerfile"
建立README claude "產生完整 README.md"

程式碼

以下展示如何用自然語言命令 Claude Code 來為一個簡單的 Node.js 購物車模組自動重構並撰寫測試

原始程式碼 (cart.js)
假設專案中原本有一段舊的、用 Callbacks 處理的購物車代碼:

// cart.js
function calculateTotal(items, discountCode, callback) {
  let total = 0;
  items.forEach(item => {
    total += item.price * item.quantity;
  });

  if (discountCode === 'SUMMER10') {
    total = total * 0.9;
  }

  // 模擬非同步的資料庫檢查
  setTimeout(() => {
    if (total < 0) {
      return callback(new Error("Invalid total"), null);
    }
    callback(null, total);
  }, 100);
}

module.exports = { calculateTotal };

交給 Claude Code 處理
在終端機中輸入以下提示詞(Prompt):

輸入的指令
claude "請將 cart.js 重構成使用 modern async/await 語法,接著在對應的 cart.test.js 中幫我寫好 Jest 測試,最後幫我運行測試確保全部通過"

Claude Code 自動化執行流程

  • 分析並修改程式碼: Claude 會主動讀取 cart.js,將其改寫為現代的 Promise 形式

  • 建立測試檔案: 自動偵測專案中的測試框架(例如 Jest),並生成 cart.test.js

  • 執行並驗證: 它會自主在後台執行 npm test,確認沒有報錯後,向你回報結果

🤖 改寫後的程式碼 (cart.js)

// cart.js (由 Claude Code 自動重構)
async function calculateTotal(items, discountCode) {
  let total = items.reduce((sum, item) => sum + (item.price * item.quantity), 0);

  if (discountCode === 'SUMMER10') {
    total *= 0.9;
  }

  // 將原本的 setTimeout 包裝成 Promise
  await new Promise(resolve => setTimeout(resolve, 100));

  if (total < 0) {
    throw new Error("Invalid total");
  }

  return total;
}

module.exports = { calculateTotal };

🤖 自動生成的測試碼 (cart.test.js)

// cart.test.js (由 Claude Code 自動生成)
const { calculateTotal } = require('./cart');

describe('購物車計算測試', () => {
  const mockItems = [
    { price: 100, quantity: 2 },
    { price: 50, quantity: 1 }
  ];

  test('應正確計算總金額(無折扣)', async () => {
    const total = await calculateTotal(mockItems, null);
    expect(total).toBe(250);
  });

  test('套用 SUMMER10 折扣碼時應打 9 折', async () => {
    const total = await calculateTotal(mockItems, 'SUMMER10');
    expect(total).toBe(225);
  });

  test('若金額小於 0 應拋出錯誤', async () => {
    const invalidItems = [{ price: -100, quantity: 1 }];
    await expect(calculateTotal(invalidItems, null)).rejects.toThrow("Invalid total");
  });
});

上一篇
Day10-Crew AI(Agent)
下一篇
Day12-Claude Cowork
系列文
風裡雨裡我在AI世界等你18
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言