前端工程师的日常往往被「写代码 → 调试 → 提交」这条闭环束缚。若再把 AI 助手拉进来却发现它总是“只会写”，缺乏对团队规范、CI/CD 流程的感知。幸运的是Claude Code 为我们提供了类似 Vue 生命周期的 Hook 机制，让 AI Neng像插件一样在关键节点自动介入，从而把“写代码”升级为“一键交付”。下面我把这些概念拆成一段段易懂的前端示例，帮助你在项目里快速落地。

回顾一下我们熟悉的几类

onMounted / onBeforeUnmount —— 组件加载与销毁时插入逻辑。

pre-commit / post-commit —— Git 操作前后执行脚本。

webpack.tap —— 编译过程中挂载自定义插件。

这些点dou恰好对应了 Claude Code 中的生命周期事件SessionStart, PreToolUse, PostToolUse, Stop 等。把两者对齐后你就Ke以像写 Vue 组件那样，把 AI 的“检查”“补全”“上报”功Neng塞进每一次工具调用。

# 项目根目录
mkdir -p .claude/hooks
touch .claude/settings.json
# 把示例脚本放进去
cp ~/my-hooks/* .claude/hooks/
chmod +x .claude/hooks/*.sh .claude/hooks/*.py
git add .claude
git commit -m "chore: 初始化 Claude Hook 配置"

.claude/settings.json 是整个系统的入口，下面给出一个Zui小可运行的模板：

{
  "hooks": {
    "PreToolUse": 
      }
    ],
    "PostToolUse": 
          }
        ]
      }
    ]
  }
}

只要把环境变量 DING_TOKEN 加到 CI 环境里提交后就会自动向钉钉机器人推送一条消息——和我们平时在 GitHub Action 中写 webhook 完全一样，只不过这次是由 AI 自己触发。

下面这段 Python 脚本会读取 Claude 通过 stdin 传来的 JSON，Ru果检测到诸如 rm -rf /, sudo rm *, 或者强制推送等高危指令，就直接以非零退出码终止会话，并把错误信息写入 stderr：

#!/usr/bin/env python3
import json, sys, re
BLOCKED = 
def main:
    payload = json.load
    if payload.get != "Bash":
        sys.exit
    cmd = payload.get.get
    for pat, msg in BLOCKED:
        if re.search:
            print
            sys.exit
    sys.exit
if __name__ == "__main__":
    main

把它挂到 "PreToolUse" 后无论是手动执行还是 CI 中的 Bash 步骤，douNeng先经过安全门禁。

#!/usr/bin/env bash
# .claude/hooks/format-code.sh
read -r INPUT   # 从 stdin 接收完整 JSON
FILE=$(echo "$INPUT" | python3 -c "
import sys,json;obj=json.load;
print.get)
")
# 简单判断文件类型，再调用对应工具
case "$FILE" in
  *.js|*.jsx|*.ts|*.tsx|*.vue)
      command -v prettier &>/dev/null && prettier --write "$FILE"
      command -v eslint   &>/dev/null && eslint --fix "$FILE"
      ;;
  *.css|*.scss|*.less)
      command -v stylelint &>/dev/null && stylelint --fix "$FILE"
      ;;
esac
exit 0

当 Claude 用内部工具「Write」或「Edit」生成代码时这段脚本会立刻接手，把文件交给团队统一使用的格式化链路。这样即使是新手同学敲出的代码，也Neng在第一秒符合规范，省掉了人工 lint 的时间。

.claude/settings.json 中Yi经配置了 HTTP 类型的 Hook，只需要确保环境变量正确即可：

export DING_TOKEN=xxxxxxxxxxxxxxxxxxxxxx   # 放到 CI/CD 或者本地 .env 中
# 测试：
curl -X POST \
     -H 'Content-Type: application/json' \
     -d '{"msgtype":"text","text":{"content":"测试 Hook Neng否成功"}}' \
     https://oapi.dingtalk.com/robot/send?access_token=$DING_TOKEN

当每一次「Write」结束后Claude 会把完整的调用上下文POST 到上述地址。团队成员只需打开钉钉群，即可kan到谁在什么时候生成了哪个文件，透明度大幅提升。

A) 在 Markdown 文件的 Frontmatter 区块里声明专属 Hook：

---
hooks:
  PreToolUse:
    - matcher: Bash
      hooks:
        - type: command
          command: "./scripts/check-ci.sh"
---
# 接下来是普通 Prompt 内容…
MD内容……

json
{
  “task”: “生成登录页组件”
}
这里的配置只对当前 Skill 生效，非常适合「仅限 UI 自动生成」这种细分场景。

B) 子 AgentKe以在完成自己的任务后返回一个 Stop 信号，让主会话继续执行。这种模式让我们Neng够把「安全扫描」和「业务代码生成」拆成两条并行流水线，而不是硬塞进同一个 Prompt。

#1 严格限定可执行命令来源：

{
  "blockedCommands": 
}

echo '{"tool_name":"Bash","tool_input":{"command":"ls"}}' |
python3 .claude/hooks/guard-bash.py; echo $?

{
  "hooks": {
    // 会话刚启动时加载 Node 环境版本
    "SessionStart": 
      }
    ],
    // 所有 Bash 调用前Zuo安全校验
    "PreToolUse":
      }
    ],
    // 写文件后自动格式化 + 通知团队
    "PostToolUse":}
        ]
      },
      {
        // Bash 完成后同步快照到内部 CDN 回滚系统
        “matcher”: “Bash”,
        “hooks”: }]
      }
    ],
    // 对话结束时让 LLM 自评任务完成度
    “Stop”:}
    ]
  }
}