claude-code-guide

Claude Code 高階開發指南

全面的 Claude Code 中文學習指南，涵蓋從基礎到高階的所有核心概念、工具使用、開發工作流和最佳實踐。

何時使用此技能

當需要以下幫助時使用此技能：

• 學習 Claude Code 的核心功能和工具
• 掌握 REPL 環境的高階用法
• 理解開發工作流和任務管理
• 使用 MCP 整合外部系統
• 實現高階開發模式
• 應用 Claude Code 最佳實踐
• 解決常見問題和錯誤
• 進行大檔案分析和處理

快速參考

Claude Code 核心工具（7個）

1. REPL - JavaScript 執行時環境

   • 完整的 ES6+ 支援
   • 預載入庫：D3.js, MathJS, Lodash, Papaparse, SheetJS
   • 支援 async/await, BigInt, WebAssembly
   • 檔案讀取：window.fs.readFile()

2. Artifacts - 視覺化輸出

   • React, Three.js, 圖表庫
   • HTML/SVG 渲染
   • 互動式元件

3. Web Search - 網路搜尋

   • 僅美國可用
   • 域名過濾支援

4. Web Fetch - 獲取網頁內容

   • HTML 轉 Markdown
   • 內容提取和分析

5. Conversation Search - 對話搜尋

   • 搜尋歷史對話
   • 上下文檢索

6. Recent Chats - 最近對話

   • 訪問最近會話
   • 對話歷史

7. End Conversation - 結束對話

   • 清理和總結
   • 會話管理

大檔案分析工作流

# 階段 1：定量評估
wc -l filename.md    # 行數統計
wc -w filename.md    # 詞數統計
wc -c filename.md    # 字元數統計

# 階段 2：結構分析
grep "^#{1,6} " filename.md  # 提取標題層次
grep "```" filename.md       # 識別程式碼塊
grep -c "keyword" filename.md # 關鍵詞頻率

# 階段 3：內容提取
Read filename.md offset=0 limit=50      # 檔案開頭
Read filename.md offset=N limit=100     # 目標部分
Read filename.md offset=-50 limit=50    # 檔案結尾

REPL 高階用法

// 資料處理
const data = [1, 2, 3, 4, 5];
const sum = data.reduce((a, b) => a + b, 0);

// 使用預載入庫
// Lodash
_.chunk([1, 2, 3, 4], 2);  // [[1,2], [3,4]]

// MathJS
math.sqrt(16);  // 4

// D3.js
d3.range(10);  // [0,1,2,3,4,5,6,7,8,9]

// 讀取檔案
const content = await window.fs.readFile('path/to/file');

// 非同步操作
const result = await fetch('https://api.example.com/data');
const json = await result.json();

斜槓命令系統

內建命令：

• /help - 顯示幫助
• /clear - 清除對話
• /plugin - 管理外掛
• /settings - 配置設定

自定義命令： 建立 .claude/commands/mycommand.md：

根據需求執行特定任務的指令

使用：/mycommand

開發工作流模式

1. 檔案分析工作流

# 探索 → 理解 → 實現
ls -la                  # 列出檔案
Read file.py            # 讀取內容
grep "function" file.py # 搜尋模式
# 然後實現修改

2. 演算法驗證工作流

# 設計 → 驗證 → 實現
# 1. 在 REPL 中測試邏輯
# 2. 驗證邊界情況
# 3. 實現到程式碼