是 Ray 不是 Array

整理這些技術筆記真的很花時間,如果你願意 關閉 Adblock 支持我,我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你!ヽ(・∀・)ノ

Advertisement
2026-01-28 AI

想用 Claude Code 開發?這篇帶你從入門到進階

想用 Claude Code 開發?這篇帶你從入門到進階

前言

我相信只要是一名開發者應該或多或少都聽過 Gemini、Codex、Claude Code 等等這類 AI Agent 開發工具吧?畢竟現階段大多開發者都會訂閱幾個 AI Agent 工具來協助加速開發流程,所以這一篇就會挑選一款 AI Agent 工具「Claude Code」來做介紹,並且帶大家了解如何使用 Claude Code 來進行開發,這之中或許有你所不知道的加速開發技巧跟使用觀念,當然這一篇的內容也會包含一些實際的範例,讓你能夠更快上手 Claude Code 的使用。

什麼是 Claude Code?

所有的開頭慣例還是要先了解一下 Claude Code 是什麼東西?Claude Code 是由 Anthropic 公司所開發的一款 AI Agent 工具,主要是基於大型語言模型(LLM)來協助開發者進行程式碼生成、錯誤排除以及代碼優化等任務。Claude Code 的設計目標是讓開發者能夠更高效地完成各種編程任務,無論是寫新代碼還是維護現有代碼,都能夠提供有力的支持。

而 Anthropic 底下有許多產品,例如:

  • Claude.ai:簡單來講就是另一種 ChatGPT,主要是用來進行對話式的 AI 互動。
  • Claude Code:專為開發者設計的 AI Agent 工具,能夠協助進行程式碼相關的任務,也是本篇的介紹主角。
  • Claude Cowork:簡單來講,你可以透過 Cowork 管理你的電腦,讓它可以整理桌面、寫文件,搞定日常任務。

當然還有一些其他的知名功能,以官方分類來講,並不隸屬產品,而是比較偏向功能或協議的的東西,例如:

  • Claude in Chrome:這是一個瀏覽器擴充功能,讓使用者能夠在瀏覽器中直接使用 Claude 的功能,提升瀏覽體驗。
  • Claude in Slack:這個功能讓使用者能夠在 Slack 工作區中直接與 Claude 互動,協助完成各種工作任務。
  • Claude in Excel:沒錯,就是讓 Excel 使用者能夠利用 Claude 來進行數據分析、報表生成等工作。
  • MCP:MCP 其實是 Anthropic 所提出來的規範,簡單來講就是讓舊有系統(或無法與 AI 互動的系統)能夠透過 MCP 來與其他 AI 系統進行互動的一種標準化協議。
  • Skills:可以說是為了解決 MCP 導致 Context 過量而設計的功能,讓開發者能夠針對特定任務來開發專屬的技能,並且讓 AI 能夠根據任務需求來調用這些技能,這將有助於減少 Context 的使用量,畢竟 Token 非常昂貴。

那麼認識完 Anthropic 之後,我們就要來認識並了解該如何使用 Claude Code 來進行開發了,畢竟 Claude Code 是我們本篇的主角。

安裝 Claude Code

安裝的方式其實滿多種的,有以下:

macOS/Linux/WSL:

1
curl -fsSL https://claude.ai/install.sh | bash

Homebrew:

1
brew install --cask claude-code

Windows PowerShell:

1
irm https://claude.ai/install.ps1 | iex

Windows CMD:

1
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

WinGet:

1
winget install Anthropic.ClaudeCode

你只需要依照自己需求來選擇安裝方式即可,安裝完成之後就可以開始使用 Claude Code 來進行開發了。

接著你只需要進入到你的專案,並輸入 claude 就會啟動 Claude Code 的互動介面:

1
2
cd your-project
claude

如果你是第一次使用 Claude Code 的話,你應該會被要求登入,如果沒有你也可以輸入 /login 來進行登入:

1
/login

登入的時候,你有兩種帳號選擇:

  • Claude.ai 帳號:訂閱計畫,也就是 Claude Pro、Claude Pro Max 等
  • Claude Console:簡單來講就是走 API 形式,這種形式相對比較貴,因為是以使用量計費,跟 OpenAI 的 API 類似。

那這兩種有什麼差異呢?

  • 訂閱制度:提供給你一定範圍的使用量,在這個範圍內你只需要負擔 20 美金,例如你可以每月使用多少 Token,超過就無法使用(通常是暫時性的不能用),或是需要升級方案。
  • API 使用量計費:你是以實際使用的 Token 來計費,因為沒有限制範圍的關係,所以你可以無限制的使用 Claude Code,但缺點是價格相對比較高,通常適合用於企業或是需要大量使用的開發者。

登入方式

Claude Code

接著假設你已經進入到要使用 Claude Code 的專案資料夾,並且已經登入完成了,接著我們就可以開始使用 Claude Code 來進行開發了。

但有些時候當你輸入 claude 指令後,會出現以下提示訊息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
────────────────────────────────────────────────────────────────────────────────
Accessing workspace:

/Users/user/GitHub/example

Quick safety check: Is this a project you created or one you trust? (Like your
own code, a well-known open source project, or work from your team). If not,
take a moment to review what's in this folder first.

Claude Code'll be able to read, edit, and execute files here.

Security guide

❯ 1. Yes, I trust this folder
2. No, exit

簡單來講就是希望你能夠確定這個專案的來源,避免有一些必要的安全性風險問題。

那這邊有一些基本指令是你必須要知道的,因為你有很高的機會使用到:

  • /help: 顯示出一些幫助事項跟可以用的指令
  • /init: 請 Claude Code 針對這份專案進行初始化設定,請注意這邊所指的初始化設定並不是指對專案做什麼設定,而是讓 Claude Code 了解這個專案的架構、語言、框架等等,進而產出一份「專案說明文件(CLAUDE.md)」,讓你能夠更快上手這個專案,這邊我們稱為「記憶文件」。
  • /login: 登入 Claude 帳號
  • /logout: 登出 Claude 帳號,如果你有多個帳號的話,可以透過這個指令來切換帳號,先登出再登入另一個帳號即可。
  • /usage: 查看目前帳號的使用量,包含剩餘 Token、使用次數等等。
  • /clear: 清除目前的對話紀錄,讓你能夠重新開始一個新的對話。
  • /compact: 清除對話記錄,但清除前會將目前對話紀錄進行壓縮,讓對話內容能夠更精簡,避免 Context 過量的問題。
  • /resume: 叫出之前的對話紀錄,讓你能夠繼續之前的對話內容。
  • /memory: 編輯或查看目前的記憶文件(CLAUDE.md),主要有專案記憶與使用者記憶(後面會再介紹)。
  • /mcp: 管理 MCP 設定檔案。
  • /skills: 查看目前有哪些可用的 Skills。
  • /model: 查看或切換目前使用的模型,除非是特殊需求,不然大多數情況下都會使用預設模型即可。
  • @: 提及某個檔案,讓 Claude Code 能夠針對這個檔案進行操作,例如 @app.js

那麼以上算是我個人認為開發上很常使用的指令跟技巧。

記憶文件(CLAUDE.md)

接下來我們要來認識輸入 /init 指令之後所產生的「記憶文件(CLAUDE.md)」,這份文件非常的重要,他將會決定 Claude Code 在開發時候的表現,因為這份文件會讓 Claude Code 了解這個專案的架構、語言、框架等等,甚至是它開發的時候該引用哪些文件。

那麼 CLAUDE.md 文件又有許多種類型,每個類型隨著放置位置不同,就會有不同的用途:

  • 個人記憶(~/.claude/CLAUDE.md):簡單來講就是你個人的習慣,例如:總是使用繁體中文、喜歡使用某種程式語言、框架,或是有一些特定的開發風格等等,這些都是屬於個人記憶的範疇,所以使用你這台電腦的所有專案都會共用這份個人記憶文件。
  • 專案記憶(<project-root>/CLAUDE.md or <project-root>/.claude/CLAUDE.md):針對這份專案所產生的規範文件,例如…公司本身內部的程式碼撰寫規範、開發流程、團隊規範等等。
  • 專案規則(<project-root>/rules/*.md):像是特定語言的指南、框架的使用規範,或是一些特定的開發規則等等,這些都是屬於專案規則的範疇,可以讓 Claude Code 在開發時候更符合專案需求。
  • 私人專案記憶(<project-root>/CLAUDE.local.md):這個是針對這份文件特別設定的開發偏好,但並不打算分享給其他開發者知道的設定文件,通常是一些個人偏好的設定,所以會把這份文件加入 .gitignore,避免被上傳到遠端倉庫。

那為什麼需要這些文件呢?其實這些文件的目的在於讓 Claude Code 初始化之後(也就是再這個專案下輸入 claude 指令之後),能夠讓 Claude Code 知道這個專案的架構、語言、框架等等,甚至是它開發的時候該引用哪些文件。

那麼我們該怎麼知道 CLAUDE.md 也被正確讀取引入呢?其實當你輸入 claude 指令之後,如果你看到畫面提示你要輸入 /init 指令的話,代表著 Claude Code 並沒有讀取到 CLAUDE.md 文件,這時候你就需要輸入 /init 指令來讓 Claude Code 針對這份專案進行初始化設定。

有 CLAUDE.md 文件

Note
以我實測來講,會建議放在 <project-root>/CLAUDE.md 底下,而不是 <project-root>/.claude/CLAUDE.md,因為有時候 Claude Code 會無法正確讀取到 .claude 資料夾底下的 CLAUDE.md 文件。除非你使用 /memory 指令來編輯 CLAUDE.md 文件位置。

CLAUDE.md 文件範例

其實 CLAUDE.md 講白話文就是一個專案 README.md,當一個新人進來時,你不可能叫他每次都重新學習這個專案,所以你需要一份文件來讓新人能夠快速了解這個專案的架構、語言、框架等等,這樣才能夠讓新人更快上手這個專案。

所以一個標準的專案記憶 CLAUDE.md 文件,我個人認為至少應該要包含以下內容:

  • 專案名稱
  • 專案簡易描述
  • 專案重要文件
    • 專案架構(PROJECT-STRUCTURE.md)
    • 專案指令(PROJECT-COMMANDS.md)
    • 開發流程(DEVELOP-FLOW.md)
    • 開發規範(CODE-STYLE.md)
    • Commit 規範(GIT-COMMIT.md)
    • 開發風格(GUIDELINE.md)
    • 開發任務(TASK.md)
    • 測試流程(TEST-FLOW.md)
    • 部署流程(DEPLOY-FLOW.md)
    • 常見問題(FAQ.md)

Note
AI 有讓工程師輕鬆嗎?我覺得沒有,反而要花更多時間去維護這些文件,還要不停 Review AI 所產出的程式碼品質。

底下是簡單的範例介紹:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 專案名稱

這是一個...

## 專案重要文件

- [專案架構說明](/docs/PROJECT-STRUCTURE.md)
- [專案指令說明](/docs/PROJECT-COMMANDS.md)
- [開發流程說明](/docs/DEVELOP-FLOW.md)
- [開發規範說明](/docs/CODE-STYLE.md)
- [Commit 規範說明](/docs/GIT-COMMIT.md)
- [開發風格說明](/docs/GUIDELINE.md)
- [開發任務說明](/docs/TASK.md)
- [測試流程說明](/docs/TEST-FLOW.md)
- [部署流程說明](/docs/DEPLOY-FLOW.md)
- [常見問題說明](/docs/FAQ.md)

你會發現與 /init 生出來的不太一樣,因為這是為了避免 CLAUDE.md 文件過於冗長,所以我會建議把內容拆分成多個文件,並且在 CLAUDE.md 文件中引用這些文件,這樣可以讓 Claude Code 再找文件的時候更有效率。

那麼每一份參考文件,你可以再裡面寫所謂的 YAML frontmatter 來讓 Claude Code 更了解這份文件的用途,例如:

1
2
3
4
5
6
---
description: 這是這一份專案的專案架構說明,如果使用者要求你說明專案架構、進行專案架構相關的任務時,請參考這一份文件內容。
---
# 專案架構說明

...

如果是 <project-root>/rules/*.md 底下的文件,你可以額外增加 path 欄位來指定這份文件所適用的檔案路徑避免 Claude Code 在錯誤的地方引用這份文件,例如:

1
2
3
---
path: src/api/**/*.js
---

而這個 path 支援的路徑格式有 **/*.jssrc/**/*src/api/** 等等。

加入 MCP Server

MCP 全名是「Model Context Protocol」,簡單來講就是讓無法直接與 AI 互動的系統,能夠透過 MCP 來與其他 AI 系統進行互動的一種標準化協議。

由於之前已經寫過相關文章的詳細介紹,所以會推薦直接閱讀底下這幾篇會更好:

其中我會特別推薦你閱讀 你聽過 LLM、RAG、Prompt 嗎?一文帶你看懂生成式 AI 常見技術詞彙 這一篇文章,裡面對於各種 AI 詞彙都有一定的介紹。

那麼在這邊會非常推薦你開發上一定要使用的 MCP Server 是 Context 7,這個開源的 MCP Server 優勢在於,讓你的 AI 可以撈取即時的資料,那為什麼會有這個需求呢?其主要原因是 AI 是透過資料訓練的,當他的訓練資料過時的話,AI 所產出的結果就會不準確,所以你需要一個 MCP Server 來讓 AI 能夠撈取即時的資料,進而提升 AI 所產出的結果準確度。

而 Context 就是專門收錄這些最新版的官方開發文件,以及真實可以使用的程式碼範例,因此可以說是 AI Agent 的標準配置。

那麼該如何加入呢?有兩種方式,分別是本地端以及遠端的方式。首先你要先去 Context 7 官方網站申請金鑰(Key),接著你可以選擇以下兩種方式來加入 MCP Server:

  • 本地端方式:你可以透過 Claude Code 指令來加入 MCP Server,指令如下:

    1
    claude mcp add context7 -- npx -y @upstash/context7-mcp --api-key YOUR_API_KEY
  • 遠端方式:你可以透過 Context 7 官方網站來設定 MCP Server,設定完成之後,Claude Code 就會自動去撈取這個 MCP Server 的資料。

    1
    claude mcp add --header "CONTEXT7_API_KEY: YOUR_API_KEY" --transport http context7 https://mcp.context7.com/mcp

請把 YOUR_API_KEY 替換成你申請到的金鑰即可。

那遠端跟本地有什麼差異呢?簡單來講,概念就是後端程式碼會在你的電腦中執行,然後從你本地向遠端的資料庫撈取資料,而遠端則是連包含後端程式碼都在遠端執行,這樣的好處是你不需要在本地端安裝任何東西。

那推薦哪一個呢?其實兩者都可以,就請你依照你選擇的習慣為主。

自訂 Commands

除了上面這些之外,你也可以自訂一些 Claude Commands 來讓 Claude Code 能夠更符合你的需求,這邊我會推薦兩個我自己覺得滿實用的 Command 給大家參考:

  • /test:這個 Command 主要是用來執行測試的,你可以讓 Claude Code 幫你撰寫測試案例,或是幫你修正測試失敗的問題,這樣可以大幅提升你的測試效率。
  • /review:這個 Command 主要是用來進行程式碼審查的,你可以讓 Claude Code 幫你檢查程式碼的品質、風格,或是找出潛在的問題,這樣可以確保你的程式碼品質。

那該如何建立這兩個指令呢?很簡單,只需要在專案根目錄下建立一個 .claude/commands 資料夾,然後在裡面建立兩個 Markdown 文件,分別命名為 test.mdreview.md 就可以了。

1
2
3
mkdir -p .claude/commands
touch .claude/commands/test.md
touch .claude/commands/review.md

而內容雖然你可以自訂,但我這邊也提供參考範例給大家:

test.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
---
description: 執行測試自動化流程:運行現有測試、修復失敗案例,或為關鍵邏輯補充測試
allowed-tools: Bash(npm run *, npm test), Filesystem(*)
metadata:
author: Ray
version: "2026.1.30"
---
# 程式碼測試指令

請執行以下測試與品質保證流程。你的目標是確保程式碼的正確性與強健性。

## 執行步驟
1. **指令分析**:查看下方的 `package.json` 腳本定義,確認正確的測試指令 (如 `test``test:coverage`)。
2. **執行測試**:使用 Bash 工具執行測試指令。
3. **錯誤修復 (若測試失敗)**
- 分析錯誤堆疊 (Stack Trace)。
- **不應單純修改測試來讓它通過**,除非確認是測試案例本身的錯誤。
- 修正原始程式碼邏輯以通過測試。
4. **補充測試 (若測試缺失)**
- 若專案缺乏測試,或覆蓋率不足,請為核心商業邏輯撰寫單元測試。
- 確保測試具備**原子性 (Atomicity)**,不依賴外部環境 (需使用 Mock/Stub)。

## 參考資訊 (Context)
為了協助你選擇正確的指令,以下是專案的腳本設定:

`package.json` Scripts:
!`grep "scripts" -A 15 package.json`

review.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
---
description: 審查當前工作目錄下的程式碼變更 (包含 Staged 與 Unstaged)
allowed-tools: Bash(git diff:*), Bash(git status:*)
metadata:
author: Ray
version: "2026.1.30"
---
# 程式碼審查指令

請針對以下程式碼變更進行**嚴格且客觀的技術審查**,請直接指出問題並提供具體建議,無需客套。

## 評審標準
1. **可讀性與規範**:命名是否精確?邏輯是否易於理解?是否符合該語言的 idiomatic 寫法?
2. **安全性**:是否存在注入攻擊、資料外洩或錯誤處理不當的風險?
3. **效能與資源**:是否有不必要的運算、記憶體洩漏或 N+1 查詢問題?
4. **程式碼異味 (Code Smells)**:偵測重複邏輯、過度複雜的判斷式或過長的函式。

## 變更內容
以下是 `git status``git diff HEAD` 的結果:

檔案狀態:
!`git status -s`

詳細變更:
!`git diff HEAD`

接著你只要輸入 /test 或是 /review 指令就可以啟動這兩個 Command 來進行測試或是程式碼審查了~

test

在這個 Markdown 文件中,你你會看到幾個特別的 YAML 屬性,分別是:

  • description: 這個描述是用來讓使用者知道這個 Command 的用途,這個描述會顯示在 Claude Code 的指令列表中。
  • allowed-tools: 這個屬性是用來限制這個 Command 可以使用的工具,這樣可以避免 Command 使用一些不必要的工具,導致出現安全性問題。
  • metadata: 這個屬性是用來記錄一些額外的資訊,例如作者、版本等等,這些資訊可以幫助你更好地管理這些 Command,這部份 Claude Code 會自動忽略不會去使用。

然後還有一個神奇的區塊,也就是 !,這個區塊是用來讓你能夠直接在 Command 中執行 Bash 指令,並且將結果插入到 Command 文件中,這樣可以讓 Command 更加動態化,並且能夠根據專案的狀態來進行操作。

Skills

那麼由於 MCP 太過於消耗 Context 的關係,所以 Anthropic 推出了一個叫做 Skills 的功能,讓開發者能夠針對特定任務來開發專屬的技能,並且讓 AI 能夠根據任務需求來調用這些技能,這將有助於減少 Context 的使用量,畢竟 Token 非常昂貴。

而這部份再先前的文章已經有非常詳細的介紹,所以就不再贅述,推薦閱讀以下文章:

Claude Hooks

沒錯!Claude Code 也支援 Hooks(鉤子),讓你能夠在特定事件發生時觸發自訂的行為,這樣可以讓 Claude Code 更加靈活,並且能夠根據你的需求來進行操作。

舉例來講,當你每次提交程式碼之前,你可以讓 Claude Code 幫你檢查程式碼的品質,提高程式碼的品質。

而 Claude Code 支援的 Hooks 事件有以下幾種:

  • SessionStart:當 Claude Code 會話開始時觸發。
  • UserPromptSubmit:當你提交 Prompt,在 Claude Code 處理之前觸發。
  • PreToolUse:在使用工具之前觸發。
  • PermissionRequest:當 Claude Code 請求權限時觸發。
  • PostToolUse:當工具呼叫成功後。
  • PostToolUseFailure:當工具呼叫失敗後。
  • Notification:當 Claude Code 發出通知時觸發。
  • SubagentStart:當子代理開始時觸發。
  • SubagentEnd:當子代理結束時觸發。
  • Stop:當 Claude Code 停止時觸發。
  • PreCompact:在壓縮對話記錄之前觸發。
  • SessionEnd:當 Claude Code 會話結束時觸發。

底下是一張 Mermaid 應該可以方便你釐清 Hooks 的運作流程:

Mermaid

Hook events

那為什麼會介紹這個呢?其實非常的少人使用,但這個 Hook 用於某些情境下非常的有用,例如:

  • 完成特定任務後,先執行 tslint 或是 prettier 來格式化程式碼,而這個就很適合在 PostToolUse 這個 Hook 來實現。
  • 如果 Claude Code 完成本次任務之後,可以透過 Slack、Discord 等等即時通訊工具來通知相關人員,這就可以使用 Notification Hook 來實現。
  • 當使用者提交 Prompt 時,可以先進行一些預處理,例如過濾敏感詞彙,這就可以使用 UserPromptSubmit Hook 來實現。
  • 如果 Claude Code 要執行 rm -rf 的時候,可以先進行二次確認,這樣可以避免誤刪重要檔案,這就可以使用 PermissionRequest Hook 來實現。
  • Claude Code 跑去讀取 .env、AWS credentials 等等敏感資訊的時候,可以先進行加密處理,這樣可以確保敏感資訊的安全性,這就可以使用 PreToolUse Hook 來實現。
  • 建立檔案跟編輯檔案之前,可以先要求 Claude Code 進行程式碼審查,確保程式碼品質,這就可以使用 PostToolUse Hook 來實現。

那麼它的格式該怎麼寫呢?這個又牽扯到放置位置的問題

  • 個人 Hooks(~/.claude/setting.json):這個是針對你個人的 Hooks 設定,會影響你這台電腦上所有專案的 Hooks 行為。
  • 專案 Hooks(<project-root>/.claude/setting.json):這個是針對這份專案的 Hooks 設定,會影響這個專案的 Hooks 行為,可以上傳到 GitHub 與其他開發者共享。
  • 私人專案 Hooks(<project-root>/.claude/setting.local.json):這個是針對這份專案的私人 Hooks 設定,通常是一些個人偏好的設定,所以會把這份文件加入 .gitignore,避免被上傳到遠端倉庫。

而內容格式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"hooks": {
"PreToolUse": [
{
"matcher": "Edit|Write",
"hooks": [
{
"type": "command",
"command": "your-script.sh"
}
]
}
]
}
}

其中 matcher 是用來過濾要觸發的工具,例如 Edit|Write 就是當 Claude Code 執行編輯或寫入檔案時才會觸發,而 command 則是要執行的指令。

那麼 Hook 會透過 stdin 傳入 JSON 格式的資料,你可以透過 jq 來解析這些資料,例如:

1
2
3
4
5
6
7
8
9
{
"session_id": "abc123",
"tool_name": "Edit",
"tool_input": {
"file_path": "/path/to/file.js",
"old_string": "const x = 1",
"new_string": "const x = 2"
}
}

開發常用 Hooks 範例

接下來就來介紹一些開發上常用的 Hooks 範例,讓你能夠更快上手 Claude Code 的 Hooks 功能。

自動格式化(Prettier)

當 Claude Code 編輯檔案後,自動執行 Prettier 來格式化程式碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write",
"hooks": [
{
"type": "command",
"command": "jq -r '.tool_input.file_path' | xargs npx prettier --write"
}
]
}
]
}
}

自動 ESLint 修復

編輯檔案後自動執行 ESLint 修復:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write",
"hooks": [
{
"type": "command",
"command": "jq -r '.tool_input.file_path' | xargs npx eslint --fix"
}
]
}
]
}
}

編輯前自動 Git Commit(建立備份點)

在 Claude Code 修改檔案之前,先建立一個備份 commit,方便之後 rollback:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"hooks": {
"PreToolUse": [
{
"matcher": "Edit|Write",
"hooks": [
{
"type": "command",
"command": "git add -A && git commit -m 'backup: before Claude edit' --allow-empty || true"
}
]
}
]
}
}

任務完成後自動 Commit

當 Claude Code 停止時,自動提交所有變更:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"hooks": {
"Stop": [
{
"matcher": "",
"hooks": [
{
"type": "command",
"command": "git add -A && git commit -m 'feat: Claude Code auto-commit' || true"
}
]
}
]
}
}

阻止危險操作

攔截 rm -rf 等危險指令,避免誤刪重要檔案:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"hooks": {
"PreToolUse": [
{
"matcher": "Bash",
"hooks": [
{
"type": "command",
"command": "~/.claude/hooks/block-dangerous.sh"
}
]
}
]
}
}

~/.claude/hooks/block-dangerous.sh

1
2
3
4
5
6
7
8
9
10
11
#!/bin/bash
INPUT=$(cat)
COMMAND=$(echo "$INPUT" | jq -r '.tool_input.command // empty')

# 攔截危險指令
if [[ "$COMMAND" == *"rm -rf"* ]] || [[ "$COMMAND" == *"rm -r /"* ]]; then
echo "禁止執行危險指令:$COMMAND" >&2
exit 2 # exit 2 = 阻止操作
fi

exit 0

完整的格式化 + Lint + TypeScript 檢查

如果你想要一次做完格式化、Lint 和 TypeScript 檢查,可以寫成一個腳本:

~/.claude/hooks/format-lint.sh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#!/bin/bash
INPUT=$(cat)
FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // empty')

# 只處理 JS/TS 檔案
if [[ ! "$FILE_PATH" =~ \.(js|jsx|ts|tsx)$ ]]; then
exit 0
fi

# 1. Prettier 格式化
npx prettier --write "$FILE_PATH" 2>/dev/null

# 2. ESLint 修復
npx eslint --fix "$FILE_PATH" 2>/dev/null

# 3. TypeScript 型別檢查
npx tsc --noEmit 2>&1 | head -20

exit 0

settings.json

1
2
3
4
5
6
7
8
9
10
11
12
{
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write",
"hooks": [
{ "type": "command", "command": "~/.claude/hooks/format-lint.sh" }
]
}
]
}
}

使用 JavaScript 撰寫 Hook

如果你不熟悉 Bash,也可以使用 JavaScript 來撰寫 Hook:

~/.claude/hooks/format-lint.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#!/usr/bin/env node
const { execSync } = require("child_process");

async function main() {
// 讀取 stdin
const chunks = [];
for await (const chunk of process.stdin) {
chunks.push(chunk);
}
const input = JSON.parse(Buffer.concat(chunks).toString());
const filePath = input.tool_input?.file_path;

// 只處理 JS/TS 檔案
if (!filePath?.match(/\.(js|jsx|ts|tsx)$/)) {
process.exit(0);
}

try {
// Prettier 格式化
execSync(`npx prettier --write "${filePath}"`, { stdio: "inherit" });

// ESLint 修復
execSync(`npx eslint --fix "${filePath}"`, { stdio: "inherit" });
} catch (error) {
// 忽略錯誤,繼續執行
}
}

main();

記得給腳本執行權限:

1
chmod +x ~/.claude/hooks/format-lint.js

Hooks 重點整理

Hook 事件 用途 Exit Code
PreToolUse 執行前攔截(可阻止操作) exit 2 阻止
PostToolUse 執行後處理(格式化、lint) exit 0 成功
Stop Claude 完成時(自動 commit) -

使用 Hook 很吃 Token 嗎?

這個問題要看你使用的 Hook 類型而定,因為 Hook 有三種執行方式:

Hook 類型 Token 消耗 說明
type: "command" 純本地腳本執行,不需要 AI 介入
type: "prompt" 使用 LLM 做決策判斷
type: "agent" 使用 AI agent 進行多工具驗證

如果你只是想做自動格式化、自動 commit 這類簡單的自動化流程,使用 command 類型就足夠了,完全不會消耗 Token。

但如果你需要讓 AI 來判斷「這段程式碼是否符合規範」或「這個操作是否安全」,那就需要使用 promptagent 類型,這時候就會消耗 Token。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"hooks": {
"Stop": [
{
"hooks": [
{
"type": "prompt",
"prompt": "檢查對話中是否完成了所有請求的任務。如果還有未完成的工作,回應 {\"ok\": false, \"reason\": \"還需要完成:...\"}。"
}
]
}
]
}
}

所以結論是:大部分的自動化場景使用 command 類型就夠用了,不會消耗 Token。只有在需要 AI 介入判斷的情境下才需要使用 promptagent 類型。

發現了嗎?這個 Hook 功能其實非常的強大,就像一個團隊再開發的時候會有一些固定的流程,這也是為什麼會特別介紹這個功能,因為這個功能可以讓你把這些流程自動化,讓 Claude Code 更加符合你的需求。

底下就是我用 Hook 的通知,當任務、呼叫工具等行為時,都會發送 WebHook 通知給我:

Hook Notification

Permission modes

介紹了很多東西,但一直沒介紹一個東西,也就是 Mode。

在 Claude Code 中,Mode 是用來定義 Claude Code 在執行任務時的行為模式,不同的 Mode 會影響 Claude Code 如何處理指令、使用工具以及與使用者互動。

  • Default Mode(預設模式):這是預設的模式,Claude Code 在執行檔案編輯或 shell 命令前會詢問使用者確認,確保每個操作都在使用者的控制下進行。
    • 適合場景:初次使用 Claude Code、處理重要專案、需要仔細審查每個變更時。
  • Plan Mode(規劃模式):這是一個唯讀模式,Claude Code 只能探索程式碼和制定計劃,不能實際修改檔案。
    • 適合場景:分析陌生的程式碼庫、規劃大型重構、在動手之前先了解影響範圍。
  • Auto-accept Edits Mode(自動接受編輯模式):自動接受檔案編輯,但仍會對 shell 命令進行確認。
    • 適合場景:快速迭代開發、處理大量檔案修改、信任 Claude Code 的編輯但仍想控制系統命令。

你可以使用 Shift+Tab 來切換這三種模式。

Permission modes

常用快捷鍵

在使用 Claude Code 的時候,有一些快捷鍵可以讓你更有效率地操作:

快捷鍵 功能
Enter 送出訊息(單行模式)
Shift+Tab 切換 Permission modes(Default → Plan → Auto-accept)
Ctrl+C 取消目前的輸入或中斷執行中的操作
Ctrl+L 清除終端機畫面(不會清除對話紀錄)
Ctrl+D 退出 Claude Code
/ 瀏覽歷史輸入紀錄

查看 Claude 思考過程

在處理複雜任務時,你可能會想讓 Claude Code 進行更深入的思考。Claude Code 提供了 Extended Thinking(擴展思考)功能,讓你可以觸發並查看它的推理過程。

查看 Claude 思考過程

查看思考內容

當 Claude Code 完成回應後,思考過程會以灰色斜體文字顯示在終端機中。如果想要回顧之前的思考內容,可以使用以下快捷鍵:

  1. 按下 Ctrl+O
  2. 再按下 Ctrl+E
  3. 往上滾動查看思考過程

Note
這個操作目前確實比較繁瑣,社群已在 GitHub issue #8477 提出希望增加「總是顯示思考過程」的功能。

透過 Prompt 關鍵詞觸發

你可以在 Prompt 中加入特定關鍵詞來觸發不同程度的思考模式:

關鍵詞 思考深度
think 基礎思考
think hard 較深入思考
think harder 更深入思考
ultrathink 最深入思考

例如:

1
請幫我重構這個函式,ultrathink

Note
根據 Claude Code v2.0.0 之後的更新,建議使用 ultrathink 來獲得最完整的思考過程。

透過環境變數設定思考預算

你也可以透過環境變數來設定思考的 Token 預算:

1
export MAX_THINKING_TOKENS=50000

數值越高,Claude Code 就有越多的「思考空間」來進行推理。最低預算是 1,024 tokens,建議從最低開始,根據需求逐步增加。

為什麼要使用 Extended Thinking?

  1. 處理複雜問題:當任務涉及多步驟推理、架構設計或複雜的 debug 時,擴展思考可以讓 Claude Code 更全面地分析問題。
  2. 提高準確度:更多的思考時間通常意味著更準確的回答。
  3. 理解推理過程:你可以看到 Claude Code 是如何一步步得出結論的。

Context 管理技巧

在使用 Claude Code 的過程中,Context(上下文)管理是非常重要的一環,因為 Context 過量會導致 Token 消耗過快,甚至影響 Claude Code 的回答品質。

什麼是 Context?

Context 就是 Claude Code 在處理任務時所參考的所有資訊,包含:

  • 對話紀錄:你輸入的 Prompt、Claude Code 的回應
  • 記憶文件:CLAUDE.md、rules/*.md 等專案規範文件
  • 讀取的檔案內容:Claude Code 在對話過程中讀取的程式碼或文件
  • 執行結果:指令執行的輸出、錯誤訊息等
  • MCP Server 資料:如果有啟用 MCP,相關的回應資料也會計入
  • Skills 內容:被觸發的 Skills 文件內容

這些資訊會累積在記憶體中,讓 Claude Code 能夠理解整個對話的脈絡。但也因為如此,Context 會隨著對話進行而不斷增長。

Context 過載的徵兆

當你發現以下情況時,可能就是 Context 過載了:

  • Claude Code 開始「忘記」之前討論過的內容
  • 回答品質明顯下降,開始出現重複或矛盾的內容
  • 執行速度變慢
  • 出現 Token 限制警告

如何管理 Context

  1. 使用 /compact 指令:這個指令會壓縮目前的對話紀錄,保留重要資訊但減少 Token 使用量。建議在長時間對話後定期使用。
  2. 使用 /clear 指令:如果你要開始一個全新的任務,可以直接清除對話紀錄,從頭開始。
  3. 善用 /resume 指令:如果你需要回顧之前的對話,可以使用這個指令來載入歷史對話。
  4. 拆分大型任務:與其一次讓 Claude Code 處理整個大型重構,不如拆分成多個小任務,每個任務完成後使用 /compact/clear
  5. 精準描述需求:避免模糊的描述,精準的 Prompt 可以減少來回溝通的次數,進而減少 Context 累積。

監控 Token 使用量

你可以隨時輸入 /usage 來查看目前的 Token 使用狀況,這樣可以幫助你決定是否需要進行 Context 管理。

Note
但需注意這個模式僅限訂閱可以使用。

Headless Mode(非互動模式)

除了互動式的對話模式之外,Claude Code 還支援 Headless Mode(非互動模式),讓你能夠直接透過命令列執行單次任務,這對於自動化腳本或 CI/CD 整合非常有用。

基本用法

使用 -p--print 參數可以直接執行單次任務:

1
claude -p "請幫我檢查這個專案的 package.json 有沒有過時的套件"

執行完成後,Claude Code 會輸出結果並自動結束,不會進入互動模式。

搭配管線使用

你也可以透過管線(pipe)將內容傳給 Claude Code:

1
cat error.log | claude -p "請幫我分析這個錯誤日誌,找出問題原因"

或是將 git diff 的結果傳給 Claude Code 進行程式碼審查:

1
git diff HEAD~1 | claude -p "請審查這些程式碼變更,指出潛在問題"

在 CI/CD 中使用

Headless Mode 非常適合整合到 CI/CD pipeline 中,例如:

1
2
3
4
# GitHub Actions 範例
- name: Code Review with Claude
run: |
git diff ${{ github.event.before }} ${{ github.sha }} | claude -p "審查這些變更,如果有嚴重問題請回傳 'FAIL',否則回傳 'PASS'"

常用參數

參數 說明
-p "prompt" 執行單次任務並輸出結果
--output-format json 以 JSON 格式輸出結果
--max-turns N 限制最大執行回合數
--allowedTools 限制可使用的工具
--verbose 顯示詳細執行過程

Git 工作流整合

Claude Code 與 Git 的整合非常緊密,可以大幅提升你的版本控制效率。

自動生成 Commit Message

這是我最常用的功能之一,你只需要告訴 Claude Code:

1
請幫我 commit 目前的變更

Claude Code 會自動:

  1. 執行 git status 查看變更
  2. 執行 git diff 分析變更內容
  3. 根據變更內容生成適當的 commit message
  4. 詢問你是否確認執行 commit

自動建立 Pull Request

你也可以讓 Claude Code 幫你建立 PR:

1
請幫我建立一個 PR 到 main 分支

Claude Code 會:

  1. 確認目前分支的變更
  2. 推送到遠端
  3. 使用 gh CLI 建立 PR
  4. 自動生成 PR 標題和描述

Git 相關的實用 Prompt

以下是一些我常用的 Git 相關 Prompt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 查看最近的 commit 歷史
請幫我看一下最近 10 個 commit 的內容

# 分析特定 commit
請幫我分析 commit abc1234 做了什麼變更

# 解決合併衝突
請幫我解決目前的 merge conflict

# 回復特定變更
請幫我 revert 最後一個 commit

# 建立新分支並切換
請幫我建立一個新分支 feature/new-feature 並切換過去

搭配 Hooks 自動化

如同前面介紹的 Hooks 功能,你可以設定在特定事件時自動執行 Git 操作:

  • 任務完成後自動 commit:使用 Stop Hook
  • 編輯前建立備份點:使用 PreToolUse Hook
  • 每次對話結束時推送到遠端:使用 SessionEnd Hook

這些整合可以讓你的開發流程更加順暢,減少手動操作的時間。

操作跟指令速查表

底下這邊我也提供一個更完整的速查表,讓你能夠快速找到你需要的指令或操作方式。

Slash Commands

基本操作

指令 說明
/help 顯示所有可用指令
/init 初始化專案,產生 CLAUDE.md
/login 登入 Claude 帳號
/logout 登出 Claude 帳號
/exit 結束 Claude Code
/usage 查看使用量限制
/status 顯示版本、模型、帳號等狀態
/stats 顯示使用統計與活動
/feedback 提交意見回饋

對話管理

指令 說明
/clear 清除對話紀錄與 Context
/compact 壓縮對話紀錄,可加參數指定摘要方式
/resume 恢復之前的對話
/fork 從目前位置建立對話分支
/rename 重新命名目前對話
/copy 複製 Claude 最後回應到剪貼簿
/export 匯出對話到檔案或剪貼簿
/rewind 回復程式碼或對話到之前的狀態

設定管理

指令 說明
/config 開啟設定面板
/model 設定 AI 模型
/keybindings 開啟或建立快捷鍵設定檔
/theme 更換主題
/output-style 設定輸出風格
/permissions 管理工具權限規則
/privacy-settings 查看與更新隱私設定

Context 與記憶

指令 說明
/context 視覺化目前 Context 使用量
/memory 編輯 Claude 記憶文件
/plan 啟用規劃模式或查看目前計劃
/todos 列出目前待辦事項

進階功能

指令 說明
/mcp 管理 MCP Server
/skills 列出可用的 Skills
/hooks 管理工具事件的 Hook 設定
/agents 管理 Agent 設定
/plugin 管理 Claude Code 插件
/tasks 列出與管理背景任務

開發工具

指令 說明
/doctor 診斷並驗證安裝與設定
/ide 管理 IDE 整合與狀態
/add-dir 新增工作目錄
/terminal-setup 安裝 Shift+Enter 換行快捷鍵
/vim 切換 Vim / Normal 編輯模式
/sandbox 設定沙箱模式
/statusline 設定狀態列 UI

Git / GitHub 整合

指令 說明
/review 審查 Pull Request
/pr-comments 取得 GitHub PR 留言
/install-github-app 設定 Claude GitHub Actions
/security-review 對目前分支的變更進行安全審查

其他

指令 說明
/upgrade 升級到 Max 方案
/release-notes 查看版本更新日誌
/chrome Claude in Chrome(Beta)設定
/install-slack-app 安裝 Claude Slack App
/mobile 顯示下載 Claude 手機 App 的 QR Code
/remote-env 設定遠端環境

輸入前綴

前綴 說明
@ 提及檔案路徑
! 進入 Bash 模式
& 背景執行

快捷鍵

快捷鍵 功能
Enter 送出訊息
Shift+Enter 多行輸入(換行)
Shift+Tab 切換自動接受編輯模式
Esc Esc 清除輸入
Ctrl+C 中斷執行 / 退出
Ctrl+O 顯示詳細輸出(verbose output)
Ctrl+T 顯示待辦事項
Ctrl+V 貼上圖片
Ctrl+S 暫存 Prompt
Ctrl+G 在 $EDITOR 中編輯
Ctrl+Z 暫停
Ctrl+Shift+- 復原
Meta+P 切換模型
/ 瀏覽歷史輸入

CLI 參數

參數 說明
claude 啟動互動模式
claude -p "prompt" Print 模式(非互動,執行完即結束)
claude -c 繼續上一個 Session
claude --resume "id" 恢復特定 Session
--model sonnet/opus/haiku 指定模型
--output-format json JSON 格式輸出
--max-turns N 限制最大回合數
--add-dir 新增目錄
--allowedTools 預先允許特定工具
--disallowedTools 禁用特定工具
--dangerously-skip-permissions 跳過權限確認(危險)

MCP 管理指令

指令 說明
claude mcp list 列出所有 MCP Server
claude mcp add <name> <command> 新增 MCP Server
claude mcp remove <name> 移除 MCP Server
claude mcp reset-project-choices 重設權限選擇

Config 管理指令

指令 說明
claude config list 顯示所有設定
claude config set <key> <value> 設定特定項目
claude config set --global <key> <value> 設定全域項目

思考模式關鍵詞

關鍵詞 思考深度
think 基礎思考
think hard 較深入思考
think harder 更深入思考
ultrathink 最深入思考

檔案位置速查

類型 路徑
個人記憶 ~/.claude/CLAUDE.md
專案記憶 <project>/CLAUDE.md
專案規則 <project>/rules/*.md
私人專案記憶 <project>/CLAUDE.local.md
個人 Hooks ~/.claude/settings.json
專案 Hooks <project>/.claude/settings.json
私人 Hooks <project>/.claude/settings.local.json
專案 Commands <project>/.claude/commands/*.md
個人 Commands ~/.claude/commands/*.md
專案 Skills <project>/.claude/skills/*/SKILL.md

常見問題

這邊我記錄了一些我自己使用 Claude Code 時候遇到的問題,並且提供了解決方案給大家參考。

使用了 Claude Code 安裝後無法使用 nvm 切換 Node.js 版本

這個主要是我安裝 Claude Code 時發生的特殊狀況,但我重新還原一次卻無法還原,可是為了確保其他讀者不會遇到同樣的問題,所以我還是把這個問題寫出來分享給大家。

當時我是使用 Homebrew 來安裝,安裝之後,我就發生了無法使用 nvm 來切換 Node.js 版本的問題,反查了一下是因為被安裝了一個 Global 版本的 Node.js 給覆蓋掉了,所以 nvm 套件就無法正常運作。

解決方式也很簡單,首先先移除 Homebrew 安裝的 Claude Code:

1
brew uninstall claude-code

接著移除被附帶安裝的 Node.js:

1
brew uninstall --ignore-dependencies node

Note
--ignore-dependencies 這個參數是用來忽略相依性的,確保只移除 Node.js 而不會影響其他套件。

到目前為止你的 nvm 應該就可以正常運作了。

如果你是因為安裝 curl 版本的 Claude Code 而發生這個問題的話,你可以輸入以下指令來移除看看:

1
rm ~/.local/bin/claude

出現「installMethod is native, but claude command not found at /Users/users/.local/bin/claude」

這個是因為 Claude Code 會去呼叫並使用位於 /Users/users/.local/bin/claude 的執行檔案,但有時候會因為安裝方式或是系統環境導致找不到這個路徑的執行檔案。

你可以先輸入底下指令確定一下 Claude Code 路徑目前安裝於哪處:

1
which -a claude

以我來講,我是透過 Homebrew 安裝的,所以會顯示:

1
/opt/homebrew/bin/claude

這個路徑就是正確的,但卻還是出現「installMethod is native, but claude command not found at /Users/users/.local/bin/claude」的錯誤訊息,這就代表著 Claude Code 被初始化路徑給卡死了,這時候你只需要輸入以下指令:

1
rm -rf ~/.claude

.claude 資料夾移除,接著重新啟動 Claude Code 並重新跑一下初始化設定跟登入應該就不會再次出現這個錯誤訊息了。

整理這些技術筆記真的很花時間,如果你願意 關閉 Adblock 支持我,我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你!ヽ(・∀・)ノ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間,
也許你可以請我喝杯咖啡,讓我繼續當個不是 Array 的 Ray ☕

buymeacoffee | line | portaly

Terminal

分享這篇文章

留言

© 2026 Ray. All rights reserved.

Powered by Ray Theme