Claude Code 系列文 (4/5)：Hook 自動化 — 讓機器做重複工作

前提：已有 CLAUDE.md + 設計文檔 時間投入：15 分鐘設置 + 自動化 省時：每週 5-10 小時（再也不用手動 lint/test）

---

核心觀點

傳統流程：
1. 你寫代碼
2. 你手動 npm run lint
3. 你修復 lint 錯誤
4. 你手動 npm test
5. 你看測試結果... 有 bug
6. 你修復 bug
7. 你再手動 lint 一遍
8. 最後才提交

時間：45 分鐘 / 功能

===

Hook 自動化：
1. 你寫代碼
2. 保存檔案 → Hook 自動 lint + fix ✅
3. 提交 git → Hook 自動測試 ✅
4. 測試通過 → 允許提交 ✅

時間：10 分鐘 / 功能

節省時間：35 分鐘 × 10 功能 / 月 = 6 小時 / 月！

---

一人公司最需要的 3 個 Hook

Hook 1: after-edit（保存檔案時自動格式化）

作用：自動執行 prettier + eslint –fix

好處：

• 不用手動 npm run lint
• 代碼永遠符合格式
• Code review 不再被卡在「縮排問題」

設置（5 分鐘）：

# 編輯 ~/.claude/settings.json
cat >> ~/.claude/settings.json << 'EOF'
{
  "hooks": {
    "after-edit": {
      "enabled": true,
      "commands": [
        {
          "patterns": ["**/*.ts", "**/*.tsx", "**/*.js"],
          "run": "prettier --write {file_path} && eslint --fix {file_path}",
          "on_failure": "warn",
          "timeout": 5000
        }
      ]
    }
  }
}
EOF

驗證（1 分鐘）：

# 寫一個格式很爛的檔案
echo "const  x   =   1" > src/test.ts

# 通過 Claude 編輯它（或手動編輯）
# 檢查：是否自動格式化為 "const x = 1;"
cat src/test.ts

Hook 2: before-commit（提交前自動測試）

作用：提交前必須通過所有測試

好處：

• 永遠不會提交有 bug 的代碼
• 主分支永遠綠色（測試都通過）
• 不用事後才發現 bug

設置（5 分鐘）：

cat >> ~/.claude/settings.json << 'EOF'
{
  "hooks": {
    "before-commit": {
      "enabled": true,
      "commands": [
        {
          "name": "test",
          "run": "npm test -- --onlyChanged --passWithNoTests",
          "on_failure": "block",
          "timeout": 60000,
          "message": "Tests failed. Fix before committing."
        },
        {
          "name": "lint",
          "run": "npm run lint -- {staged_files}",
          "on_failure": "warn"
        }
      ]
    }
  }
}
EOF

驗證（1 分鐘）：

# 破壞一個測試
echo "test('fail', () => expect(1).toBe(2));" > src/__tests__/test.ts

# 嘗試提交
git add .
git commit -m "test: add failing test"

# 結果：被 Hook 擋住 ✅
# 訊息：Tests failed. Fix before committing.

Hook 3: scheduled（每週自動檢查依賴）

作用：每週一自動檢查 npm 依賴更新 + 安全漏洞

好處：

• 不用手動 npm audit
• 自動 npm audit fix（修復已知漏洞）
• 依賴永遠最新，安全性更好

設置（5 分鐘）：

cat >> ~/.claude/settings.json << 'EOF'
{
  "hooks": {
    "scheduled": {
      "enabled": true,
      "jobs": [
        {
          "name": "weekly_dependency_audit",
          "cron": "0 10 * * MON",
          "run": "npm audit fix --audit-level=moderate",
          "description": "Check and fix dependencies every Monday 10 AM"
        }
      ]
    }
  }
}
EOF

---

Hook 完整配置（給一人公司）

把這個存到 ~/.claude/settings.json：

{
  "hooks": {
    "after-edit": {
      "enabled": true,
      "description": "Auto-format and lint after editing files",
      "commands": [
        {
          "patterns": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
          "run": "prettier --write {file_path} && eslint --fix {file_path}",
          "on_failure": "warn",
          "timeout": 5000
        },
        {
          "patterns": ["**/*.json"],
          "run": "prettier --write {file_path}",
          "on_failure": "warn",
          "timeout": 3000
        }
      ]
    },

    "before-commit": {
      "enabled": true,
      "description": "Run tests and lint before committing",
      "commands": [
        {
          "name": "test",
          "run": "npm test -- --onlyChanged --passWithNoTests",
          "on_failure": "block",
          "timeout": 60000,
          "message": "Tests failed. Fix before committing."
        },
        {
          "name": "lint",
          "run": "npm run lint",
          "on_failure": "warn",
          "timeout": 30000
        }
      ]
    },

    "scheduled": {
      "enabled": true,
      "description": "Automated background tasks",
      "jobs": [
        {
          "name": "weekly_dependency_audit",
          "cron": "0 10 * * MON",
          "description": "Check and fix dependencies every Monday 10 AM",
          "run": "npm audit fix --audit-level=moderate || true"
        },
        {
          "name": "daily_test_report",
          "cron": "0 9 * * *",
          "description": "Run full test suite daily at 9 AM",
          "run": "npm test"
        }
      ]
    }
  }
}

---

一週省下的時間

假設你一週寫 5 個功能

任務	次數	時間 / 次	舊方式	Hook 方式	省下
手動 lint	5	2 min	10 min	0 min	10 min
手動測試	5	5 min	25 min	0 min	25 min
修復 lint bug	5	3 min	15 min	0 min	15 min
手動 npm audit	1	10 min	10 min	0 min	10 min
總計			60 min	0 min	60 min

一週省 1 小時，一年省 52 小時！

---

一人公司老闆應該知道的 Hook 細節

細節 1: on_failure 的三種選擇

"on_failure": "block"   ← Hook 失敗就停止
            (測試失敗時用)

"on_failure": "warn"    ← Hook 失敗但繼續
            (建議性檢查，不強制)

"on_failure": "ignore"  ← Hook 失敗完全忽視
            (做了無關的操作時)

建議：

• 測試失敗 → block（必須通過）
• 格式化失敗 → warn（不影響功能）
• npm audit → warn（有漏洞但不阻止提交）

細節 2: timeout 設定

"timeout": 5000   ← 5 秒超時（快速操作）
"timeout": 30000  ← 30 秒超時（複雜操作）
"timeout": 60000  ← 60 秒超時（完整測試）

建議：

• prettier/eslint：5 秒
• 單個檔案 lint：10 秒
• 單個 component 測試：30 秒
• 全部測試：60 秒

細節 3: patterns（針對特定檔案類型）

"patterns": ["**/*.ts", "**/*.tsx"]
            ↓ 只對 TypeScript 檔案執行

"patterns": ["**/*.js"]
            ↓ 只對 JavaScript 檔案執行

"patterns": ["src/**"]  (可選)
            ↓ 只對 src/ 資料夾執行

---

常見問題

Q: Hook 會拖慢我的開發速度嗎？

A: 不會，反而加快。

Hook 執行時間：< 5 秒
傳統修復時間：15-30 分鐘

所以快 180-360 倍。

Q: 如果我想跳過 Hook（緊急情況）？

A: 可以，但不推薦。

# 跳過 before-commit hook
git commit -m "message" --no-verify

# 但這很危險！只在真正緊急時用

一人公司建議：不要跳過。多花 1 分鐘讓 Hook 通過，比之後修 bug 便宜。

Q: 我已經有自己的 lint 設定，怎樣整合？

A: Hook 尊重你的 .eslintrc 和 .prettierrc

# 如果你已經有這些檔案，Hook 會自動用它
ls -la .eslintrc .prettierrc

# 如果沒有，建議建立預設的
touch .eslintrc.json .prettierrc.json

---

設置 Hook 的完整步驟

Step 1: 確認已安裝工具（2 分鐘）

npm --version          # Node.js
npm list prettier      # Prettier 已裝
npm list eslint        # ESLint 已裝

# 如果沒裝，安裝它們
npm install --save-dev prettier eslint

Step 2: 複製配置（3 分鐘）

# 如果你沒有 settings.json
touch ~/.claude/settings.json

# 貼上上面「完整配置」的內容
# 或用模板
cp ~/claude-code-guide/templates/settings.json.template \
   ~/.claude/settings.json

Step 3: 驗證設置（5 分鐘）

按照上面「驗證」部分，測試 3 個 Hook 是否工作。

Step 4: 提交到 Git（1 分鐘）

# 可選：把配置存在 repo 裡（方便分享給團隊）
cp ~/.claude/settings.json .claude/settings.json
git add .claude/settings.json
git commit -m "chore: add hooks configuration"

---

進階：自訂你的 Hook

假設你想在每次提交前自動檢查台灣稅務規則：

{
  "before-commit": {
    "commands": [
      {
        "name": "tax_rule_check",
        "run": "grep -r 'TODO.*tax' src/ && echo 'WARNING: Tax rules need attention' || true",
        "on_failure": "warn"
      }
    ]
  }
}

---

一人公司的 Hook 最佳實踐

✅ DO

1. 保持 Hook 快（< 10 秒）
2. 從必須有的開始（測試、格式化）
3. 定期檢查 Hook 日誌

“bash tail -50 ~/.claude/logs/hooks.log “

1. 團隊共享 Hook 配置

“bash git commit .claude/settings.json “

❌ DON’T

1. 不要太多 Hook（> 5 個會累）
2. 不要 Hook 做複雜邏輯（只做檢查和格式化）
3. 不要在 Hook 裡執行部署（太危險）

---

下一步

現在就做

1. 複製完整配置到 ~/.claude/settings.json
2. 測試 3 個 Hook（1-2 分鐘）
3. 編輯一個檔案，檢查是否自動格式化
4. 提交代碼，檢查是否自動測試
5. 享受節省下來的時間！

---

重點回顧

CLAUDE.md：規則（永遠不變）
設計文檔：需求（每功能一份）
Hook：自動化（一次設置，永遠運行）

一人公司工作流：
規劃 → 寫代碼（自動格式化）
   → 提交（自動測試）
   → 完成

時間：30% 規劃 + 70% 實施（不是傳統的 20% 規劃 + 80% 改動）

---

下一篇預告

第 5 篇：實戰案例 – Taiwan Invoice 3 天完成

前四篇教了理論和細節。

最後一篇會示範完整的一人公司工作流：

1. Day 1：規劃 + 寫 CLAUDE.md + 設計文檔
2. Day 2：Claude 實施 + 自動化驗證
3. Day 3：部署 + 監控

看完了，你就可以套用到自己的項目。

---

現在就設置 Hook，開始自動化！ 👋

還有一篇，堅持到最後！💪