Menguasai Claude Code Hooks: Auto-Format, Auto-Test, dan Lainnya

Apa Itu Hooks?

Claude Code hooks memungkinkanmu menjalankan command kustom secara otomatis sebelum atau sesudah aksi tertentu. Kamu bisa mengatur auto-formatting setelah file disimpan, auto-run test setelah kode berubah, dan masih banyak lagi.

Hooks didefinisikan di .claude/settings.json dan mengeksekusi shell command saat Claude Code melakukan operasi tertentu.

Jenis-Jenis Hook

Claude Code mendukung hooks pada event point berikut:

Hook Event	Kapan Terpicu
PreToolUse	Sebelum tool dieksekusi
PostToolUse	Setelah tool dieksekusi
Notification	Saat notifikasi dikirim
Stop	Saat Claude Code selesai merespons

Konfigurasi Dasar

Hooks didefinisikan di field hooks pada .claude/settings.json:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "command": "npx prettier --write \"$CLAUDE_FILE_PATH\""
      }
    ]
  }
}

Struktur Konfigurasi

• matcher: Pattern regex yang mencocokkan nama tool yang memicu hook
• command: Shell command yang akan dieksekusi

Use Case 1: Auto-Formatting

Jalankan Prettier secara otomatis setelah setiap pengeditan file:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "command": "npx prettier --write \"$CLAUDE_FILE_PATH\""
      }
    ]
  }
}

Dengan setup ini, setiap kali Claude Code membuat atau mengedit file, Prettier otomatis memformatnya. Coding style tim tetap konsisten tanpa effort manual.

Use Case 2: Auto-Linting

Berikut cara mengintegrasikan ESLint auto-fix:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "command": "npx eslint --fix \"$CLAUDE_FILE_PATH\" 2>/dev/null || true"
      }
    ]
  }
}

Suffix || true mencegah error lint menyebabkan hook gagal, sehingga Claude Code bisa melanjutkan pemrosesan.

Use Case 3: Auto-Testing saat Ada Perubahan

Jalankan test terkait secara otomatis setelah pengeditan file dan kirimkan hasilnya kembali:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "command": "npx vitest related \"$CLAUDE_FILE_PATH\" --run 2>&1 | tail -20"
      }
    ]
  }
}

Opsi related pada Vitest hanya menjalankan test yang relevan dengan file yang diubah, memberikan feedback yang jauh lebih cepat daripada full test suite.

Use Case 4: Auto Type-Checking

Jalankan TypeScript type checking setelah perubahan file:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "command": "npx tsc --noEmit 2>&1 | head -30"
      }
    ]
  }
}

Use Case 5: Memblokir Command Berbahaya

Hook PreToolUse yang mencegah eksekusi command berisiko:

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "command": "if echo \"$CLAUDE_TOOL_INPUT\" | grep -qE 'rm -rf|drop table|git push.*force'; then echo 'BLOCKED: Dangerous command detected' >&2; exit 1; fi"
      }
    ]
  }
}

Ketika hook keluar dengan kode 1, Claude Code melewatkan eksekusi tool sepenuhnya.

Use Case 6: Notifikasi Selesai

Kirim notifikasi saat Claude Code menyelesaikan task:

{
  "hooks": {
    "Stop": [
      {
        "matcher": "",
        "command": "notify-send 'Claude Code' 'Task completed' 2>/dev/null; echo 'Done'"
      }
    ]
  }
}

Di macOS, kamu bisa menggunakan:

{
  "hooks": {
    "Stop": [
      {
        "matcher": "",
        "command": "osascript -e 'display notification \"Task completed\" with title \"Claude Code\"'"
      }
    ]
  }
}

Menggabungkan Beberapa Hooks

Di project nyata, menggabungkan beberapa hooks adalah pendekatan yang paling efektif:

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "command": "if echo \"$CLAUDE_TOOL_INPUT\" | grep -qE 'rm -rf /'; then exit 1; fi"
      }
    ],
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "command": "npx prettier --write \"$CLAUDE_FILE_PATH\" 2>/dev/null || true"
      },
      {
        "matcher": "Write|Edit",
        "command": "npx eslint --fix \"$CLAUDE_FILE_PATH\" 2>/dev/null || true"
      }
    ],
    "Stop": [
      {
        "matcher": "",
        "command": "echo '✓ Task completed'"
      }
    ]
  }
}

Tips Menulis Hooks

1. Jaga Waktu Eksekusi Tetap Singkat

Hooks berjalan secara sinkron, jadi operasi berat akan memperlambat respons Claude Code. Gunakan opsi seperti related untuk mempersempit scope test, dan head atau tail untuk memotong output.

2. Tangani Error dengan Baik

Hook yang keluar dengan error bisa mengganggu workflow Claude Code. Gunakan || true dan 2>/dev/null agar tetap aman.

3. Manfaatkan Environment Variable

Manfaatkan environment variable yang tersedia di hooks. $CLAUDE_FILE_PATH memberikan path file yang sedang dioperasikan.

Kesimpulan

Hooks memungkinkanmu mengkustomisasi workflow Claude Code secara mendalam. Kombinasi auto-formatting dan auto-testing sangat powerful untuk menjaga kualitas kode. Mulai dengan auto-formatting Prettier dan kembangkan dari sana.