🪝 Custom Hooks Development

Welcome to the Custom Hooks tutorial! In this course, you'll learn how to create your own ECC hooks to automate repetitive tasks — making your development workflow run like a Swiss watch.

Prerequisites

We recommend familiarizing yourself with Hooks core concepts first.

🎮 Experience the Hook System

ECC hooks trigger automatically at specific moments. Try these commands to explore different hook types:

ECC Command Simulator

❯

Available Commands:

📚 Create a Custom Hook from Scratch

Let's create a practical custom hook step by step:

Create an auto-format Hook

Step 1 of 5

Understand Hook Structure

Every ECC hook consists of 4 core properties: name (identifier), trigger (trigger condition), filePattern (file matching), and command (execution command). Think of it like setting an alarm — what time (trigger), which days (filePattern), what ringtone (command).

// Hook structure
{
  "name": "hook-name",        // Unique identifier
  "trigger": "edit_file",      // When to trigger
  "filePattern": "*.{ts,tsx}",  // Which files to watch
  "command": "npx prettier --write ${file}"  // What to execute
}

💡${file} is a built-in variable that automatically resolves to the edited file path

💻 Write Your Own Hook

Write a complete hook configuration in the code playground. Try adding your own rules:

Custom Hook Configurationjson

{
"hooks": {
  "postToolUse": [
    {
      "name": "auto-format",
      "trigger": "edit_file",
      "filePattern": "*.{ts,tsx}",
      "command": "npx prettier --write ${file}"
    },
    {
      "name": "type-check",
      "trigger": "edit_file",
      "filePattern": "*.{ts,tsx}",
      "command": "npx tsc --noEmit"
    },
    {
      "name": "console-detect",
      "trigger": "edit_file",
      "filePattern": "*.{ts,tsx}",
      "pattern": "console.log",
      "severity": "warn",
      "message": "Avoid console.log in production code!"
    }
  ],
  "preCommit": [
    {
      "name": "lint-staged",
      "command": "npx lint-staged"
    },
    {
      "name": "no-debug-code",
      "command": "grep -rn 'debugger\\|console.log' --include='*.ts' src/",
      "onMatch": "block",
      "message": "Remove debug statements before committing"
    }
  ],
  "stop": [
    {
      "name": "session-summary",
      "command": "git diff --stat",
      "severity": "info"
    },
    {
      "name": "todo-reminder",
      "command": "grep -rn 'TODO\\|FIXME' --include='*.ts' src/",
      "severity": "warn",
      "message": "Don't forget about these TODOs!"
    }
  ]
}
}

❓ Knowledge Check

❓

Which hook type is best suited for 'automatically running Prettier after each file save'?

ApreCommit

BpostToolUse

Cstop

DonSave

❓

If a preCommit hook detects console.log, what's the best practice?

AIgnore and continue committing

BOnly issue a warning

CBlock the commit and require removal

DAutomatically delete the console.log

❓

What is the key difference between stop hooks and preCommit hooks?

Astop hooks are faster

Bstop hooks run at session end, preCommit runs before commits

Cstop hooks cannot block operations

DpreCommit hooks cannot run commands

🎉 Congratulations!

You've completed the Custom Hooks tutorial! You've mastered:

✅ Three hook types: postToolUse, preCommit, stop
✅ Core hook configuration structure
✅ Auto-formatting and type-checking hooks
✅ console.log detection and commit blocking
✅ Session-end audit hooks

📖 Next Steps

E2E Testing Strategies - Master end-to-end testing
Hooks Deep Dive - Learn all about hooks

🎮 Experience the Hook System​

📚 Create a Custom Hook from Scratch​

Create an auto-format Hook

Understand Hook Structure

💻 Write Your Own Hook​

❓ Knowledge Check​