🪝 自定义 Hooks 开发

欢迎来到自定义 Hooks 教程！在本课程中，你将学习如何创建自己的 ECC 钩子来自动化重复性任务 — 让你的开发流程像瑞士钟表一样精准运行。

前置知识

建议先熟悉 Hooks 钩子核心概念。

🎮 体验钩子系统

ECC 的钩子在特定时机自动触发。试试这些命令来了解不同的钩子类型：

ECC Command Simulator

❯

Available Commands:

📚 从零创建自定义 Hook

让我们一步一步创建一个实用的自定义钩子：

创建 auto-format Hook

Step 1 of 5

理解钩子结构

每个 ECC 钩子由 4 个核心属性组成：name（名称）、trigger（触发条件）、filePattern（文件匹配）、command（执行命令）。就像设置闹钟 — 什么时间(trigger)、闹哪些天(filePattern)、播什么铃声(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} 是内置变量，会自动替换为被编辑的文件路径

💻 编写你自己的 Hook

在代码实验室中编写一个完整的钩子配置。尝试添加你自己的规则：

自定义 Hook 配置json

{
"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!"
    }
  ]
}
}

❓ 知识检测

❓

以下哪种钩子类型最适合'每次保存文件后自动运行 Prettier'？

ApreCommit

BpostToolUse

Cstop

DonSave

❓

如果 preCommit 钩子检测到 console.log，最佳做法是什么？

A忽略并继续提交

B仅发出警告

C阻止提交并要求移除

D自动删除 console.log

❓

stop 钩子和 preCommit 钩子的关键区别是什么？

Astop 钩子更快

Bstop 钩子在会话结束时执行，preCommit 在提交前执行

Cstop 钩子不能阻止操作

DpreCommit 钩子不能运行命令

🎉 恭喜！

你已完成自定义 Hooks 教程！你掌握了：

✅ 三种钩子类型：postToolUse、preCommit、stop
✅ 钩子的核心配置结构
✅ 自动格式化与类型检查钩子
✅ console.log 检测与提交阻止
✅ 会话结束审计钩子

📖 下一步

E2E 测试策略 - 掌握端到端测试
Hooks 钩子详解 - 深入了解所有钩子

🎮 体验钩子系统​

📚 从零创建自定义 Hook​

创建 auto-format Hook

理解钩子结构

💻 编写你自己的 Hook​

❓ 知识检测​