ECC Angular 钩子实战:用 PostToolUse 与 Stop 钩子构建 Angular 代码质量自动化防线

发布时间:2026/11/7 22:42:30

ECC Angular 钩子实战:用 PostToolUse 与 Stop 钩子构建 Angular 代码质量自动化防线 ECC Angular 钩子实战用 PostToolUse 与 Stop 钩子构建 Angular 代码质量自动化防线【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC本指南围绕 ECCEverything Claude Code仓库中面向 Angular 工程的钩子规则展开系统讲解如何通过PostToolUse工具执行后与Stop会话收尾两类钩子在 Claude Code / Codex / Opencode / Cursor 等 Agent 编辑 Angular 源码时自动完成格式化、Lint、类型检查与构建校验。读完本文你将掌握 ECC 钩子规则的配置位置、Angular 专属匹配路径、底层实现原理格式化器检测、tsconfig 定位、批处理审计以及如何与仓库内其他 Angular 规则联动落地一套可复用的质量闭环。一、规则分层从 common 到 Angular 的扩展机制ECC 在 rules/ 目录下按技术栈组织规则集angular、react、vue、golang、rust 等每套规则又分为coding-style、patterns、hooks、security、testing等主题文件。这种分层设计的关键在于通用规则只写一份语言/框架专属规则通过扩展机制增量补充。关联文档 docs/ja-JP/rules/angular/hooks.md英文原版见 rules/angular/hooks.md开篇即声明此文件以 Angular 专属内容扩展 common/hooks.md。也就是说Angular 钩子规则是通用钩子系统 Angular 增量的合体。通用部分钩子类型、自动批准权限、TodoWrite 最佳实践位于 docs/ja-JP/rules/common/hooks.md而 Angular 增量部分则聚焦于 PostToolUse 与 Stop 两类钩子的具体检查项。Angular 文件匹配路径文档 frontmatter 通过paths字段声明规则生效的文件范围这是钩子matcher配对的依据paths: - **/*.component.ts - **/*.component.html - **/*.service.ts - **/*.directive.ts - **/*.pipe.ts - **/*.spec.ts从源码结构看这份路径清单几乎覆盖了 Angular 应用的典型源文件类型组件组件类 模板、服务、指令、管道和单元测试。钩子应主要作用于这些文件——例如编辑.component.html后触发模板格式化编辑.ts后触发类型检查编辑.spec.ts后无需触发构建。二、钩子系统基础生命周期与触发时机要理解 Angular 钩子先要掌握 ECC 钩子系统的整体模型。根据 docs/ja-JP/rules/common/hooks.md 与 hooks/README.md钩子按生命周期分为五类钩子类型触发时机典型用途PreToolUse工具执行前参数校验、参数修改可拦截exit code 2或警告PostToolUse工具执行后自动格式化、质量检查可分析输出但不能阻断Stop每次 Agent 响应结束 / 会话收尾最终验证、批量审计PreCompact上下文压缩前保存状态SessionStart / SessionEnd会话开始 / 结束会话生命周期管理hooks/README.md 用一条链路描述整体流程User request → Claude picks a tool → PreToolUse hook runs → Tool executes → PostToolUse hook runs仓库中真实的钩子注册清单位于 hooks/hooks.json它展示了 ECC 如何把大量守护逻辑挂到各个生命周期上PreToolUse下有 Bash 前置分发器pre:bash:dispatcher、文档文件警告pre:write:doc-file-warning、配置保护pre:config-protection、MCP 健康检查pre:mcp-health-check、GateGuard 事实强制pre:edit-write:gateguard-fact-force等PostToolUse下则有同步/异步分发器post:dispatcher:sync/post:dispatcher:asyncStop下挂载了stop:format-typecheck、stop:check-console-log、stop:session-end、stop:cost-tracker、stop:desktop-notify等。Angular 钩子规则正是建议你在自己的工程中按同一套生命周期模型把 Angular 特有的检查项接入 PostToolUse 与 Stop。三、PostToolUse 钩子编辑后的即时质量守护原文档明确指出PostToolUse 钩子在~/.claude/settings.json中配置关于仓库推荐的安装方式差异详见第五节。针对 Angular 工程文档列出四项核心检查。3.1 Prettier编辑后自动格式化.ts与.html规则要求编辑完成后对.ts与.html文件自动格式化保证代码风格统一避免 Agent 产出与团队 prettier 配置不一致的代码。ECC 仓库本身就有可对照的参考实现——scripts/hooks/post-edit-format.js。该脚本的核心逻辑如下文件匹配仅对\.(ts|tsx|js|jsx)$文件生效Angular 场景即.ts.html模板通常由 prettier 的angular插件或项目自身的 HTML formatter 处理项目根发现调用 scripts/lib/resolve-formatter.js 的findProjectRoot()自被编辑文件所在目录向上逐级查找package.json、biome.json、.prettierrc*等标记文件见PROJECT_ROOT_MARKERS格式化器检测detectFormatter()按优先级返回biome或prettier——先查biome.json/biome.jsonc再查package.json中的prettier键最后遍历十种 prettier 配置文件.prettierrc、.prettierrc.json、.prettierrc.js/.cjs/.mjs/.yml/.yaml/.toml、prettier.config.js/.cjs/.mjs二进制解析resolveFormatterBin()优先使用项目本地node_modules/.bin下的可执行文件省去 npx 每次约 200500ms 的解析开销缺失时才回退到包管理器执行命令npx/pnpm/yarn/bunxWindows 下映射为.cmdshim非阻塞失败格式化器未安装或执行失败时静默跳过绝不影响 Agent 正常流程。值得注意的工程细节Biome 场景下该脚本使用check --write格式化 Lint 一步完成避免与 quality-gate 钩子重复执行Windows 场景下对含 shell 元字符的路径做注入防护UNSAFE_PATH_CHARS检查。3.2 ESLint / ng lintAngular 源码的语义与风格检查规则要求编辑 Angular 源文件后运行ng lint以捕获**装饰器误用decorator misuse、模板错误template errors、样式违规style violations**三类问题。这三类问题正是 Angular Lint 相对通用 Lint 最有价值的增量装饰器误用如Input/Output/HostListener使用不当、Component元数据配置错误模板错误模板语法、绑定表达式、指令使用错误*ngIf/ngSwitch/[property]绑定等样式违规组件样式作用域、命名约定等团队规范问题。在实际工程中ng lint的执行依赖angular.json中配置的 lint targetAngular 现代版本基于 ESLint。该命令应在编辑component.ts、directive.ts、service.ts等文件后触发属于即时反馈型检查应在 PostToolUse 阶段完成而不是拖到会话结束。3.3 TypeScript 检查tsc --noEmit规则要求编辑.ts文件后运行tsc --noEmit在类型层面第一时间拦截错误。这条规则的仓库级参考实现是 scripts/hooks/post-edit-typecheck.js其实现要点非常契合 Angular 场景tsconfig 定位从被编辑文件所在目录向上逐级查找tsconfig.json最多 20 层防止死循环在找到的目录下执行npx tsc --noEmit --pretty falseWindows 使用npx.cmd以避免shell: true带来的命令注入风险超时 30 秒错误过滤tsc输出的是整个项目的错误脚本只筛选与当前编辑文件相关的行——它同时比对原始路径、绝对路径、相对路径三种形式并刻意避免使用裸 basename 匹配防止src/utils.ts与tests/utils.ts同名文件互相误报仅报告不阻断将相关错误行写入 stderr 提示最多截取 10 行然后原样透传输入。3.4 构建检查ng build规则要求在生成或大幅修改Angular 代码后运行ng build尽早捕获模板与类型错误。ng build是三者中代价最高的检查涉及 AOT 编译与打包因此规则明确限定触发条件为生成新代码或大规模变更而非每次小编辑——这与 3.3 的tsc --noEmit形成互补高频小步用tsc --noEmit低频大幅变更用ng build做整包验证。四、Stop 钩子会话收尾的批量审计4.1 Lint 审计原文档规定会话结束前对本次会话修改过的文件整体运行ng lint捕获尚未解决的违规。这弥补了 PostToolUse 只检查当前编辑文件的盲区——当一个功能涉及多文件联动修改时跨文件的 lint 问题如未使用的导入、组件间引用关系只有在会话收尾的全局审计中才能完整暴露。4.2 批处理机制的仓库级实现对修改过的文件整体执行检查这一思想在 ECC 中有成熟的批处理实现——scripts/hooks/stop-format-typecheck.js。该 Stop 钩子的设计非常值得 Angular 工程借鉴累积器accumulator每次编辑时scripts/hooks/post-edit-accumulator.js 把被编辑文件路径写入临时文件ecc-edited-sessionId.txt位于系统临时目录Stop 钩子读取后去重解析并立即删除该文件保证重复触发不会重复处理按项目根分组格式化同一项目根下的所有 JS/TS 文件合并为一次 formatter 调用Biome 用check --writePrettier 用--write避免每个文件单独启动进程按 tsconfig 目录分组类型检查.ts/.tsx文件按最近的tsconfig.json目录分组每个目录只跑一次tsc --noEmit错误行按文件过滤输出预算管理总预算 270 秒按批次数量均分TOTAL_BUDGET_MS / totalBatches确保在 Stop 钩子 300 秒墙钟时限内完成即使面对大型 monorepo 也不会超时插件克隆保护isPluginClonePath()跳过~/.claude/plugins等第三方检出目录——这些代码不属于用户不应被批量重写。该实现的正确性由测试 tests/hooks/stop-format-typecheck.test.js 保障测试覆盖了原样透传输入无效 JSON 透传无 file_path 透传累积器文件创建/去重/清理等边界行为。五、配置与安装方式5.1 规则文档给出的配置位置Angular 钩子规则文档docs/ja-JP/rules/angular/hooks.md指出 PostToolUse 钩子在~/.claude/settings.json中配置。结合文档的四项检查可得到如下示意配置需按项目实际命令路径调整{ hooks: { PostToolUse: [ { matcher: **/*.{ts,html}, hooks: [ { type: command, command: npx prettier --write $CLAUDE_FILE_PATH } ] }, { matcher: **/*.ts, hooks: [ { type: command, command: npx ng lint }, { type: command, command: npx tsc --noEmit } ] } ], Stop: [ { matcher: .*, hooks: [ { type: command, command: npx ng lint } ] } ] } }说明上例为基于规则文档要点整理的示意结构实际使用时matcher应结合第二节的 Angular 文件路径清单细化命令建议使用项目本地node_modules/.bin中的可执行文件性能更优并参考 scripts/hooks/post-edit-format.js 的做法为钩子设置合理的timeout。5.2 ECC 仓库推荐的安装方式需要特别说明的是hooks/README.md 明确指出不要把仓库自带的 hooks/hooks.json 直接粘贴到~/.claude/settings.json——该文件是面向插件/仓库形态的其中的命令路径会被 ECC 安装器改写为实际 Claude 根目录。正确方式是使用 ECC 安装器bash ./install.sh --target claude --modules hooks-runtime --enable-hookspwsh -File .\install.ps1 --target claude --modules hooks-runtime --enable-hooks安装后钩子会被解析写入~/.claude/hooks/hooks.jsonWindows 为%USERPROFILE%\.claude。这一区分对 Angular 开发者同样成立如果你只是在自己的 Angular 工程中配置少量钩子直接编辑~/.claude/settings.json即可如果需要完整启用 ECC 的钩子运行时则应走安装器。六、配套最佳实践自动批准权限与 TodoWriteAngular 钩子规则继承自 docs/ja-JP/rules/common/hooks.md 的通用约束其中两条对钩子工作流至关重要自动批准权限Auto-Accept Permissions需谨慎使用仅在可信、定义清晰的计划上启用在探索性工作中禁用绝不使用dangerously-skip-permissions标志应改在~/.claude.json中通过allowedTools配置允许的工具白名单。这条约束与钩子体系天然互补钩子负责事后把关格式化、Lint、类型检查权限控制负责事前约束哪些工具可以免确认执行二者共同构成质量防线而不是用一刀切的跳过权限来换取速度。TodoWrite 工具最佳实践对于多步骤任务使用 TodoWrite 跟踪进度、验证对指令的理解、支持实时调整并展示细粒度实现步骤。Todo 列表的价值在于暴露顺序错误的步骤、缺失的条目、多余的无谓条目、粒度错误的需求理解。在 Angular 功能开发组件 → 服务 → 模板 → 测试这类典型多步任务中配合钩子的即时检查可以形成计划可见、执行可查、质量可控的闭环。七、与 Angular 规则集联动完整的质量闭环钩子只是 Angular 质量体系的一环。在 rules/angular/ 下ECC 还提供了与之配套的规则文件推荐组合使用rules/angular/testing.mdAngular 测试规范——ng test --no-watch的 CI 模式、standalone 组件 TestBed 配置、signal input 通过fixture.componentRef.setInput()注入、优先使用 Angular CDK component harness 而非直接 DOM 查询、fakeAsync tick与waitForAsync whenStable的异步策略、provideHttpClientTesting的 HTTP 测试以及服务、管道、守卫的覆盖目标rules/angular/patterns.md 与 rules/angular/coding-style.md架构模式与编码风格基线rules/angular/security.mdAngular 安全实践如模板注入、XSS 防护相关约束。将本文的钩子配置与上述规则组合后一个典型的 Angular Agent 开发闭环是编辑组件/服务 → Prettier 自动格式化 ng linttsc --noEmit即时反馈PostToolUse→ 生成新模块后ng build整包验证 → 会话结束前全局ng lint批量审计Stop全程辅以allowedTools白名单与 TodoWrite 计划跟踪。这套模式既适合在个人 Angular 工程中手工配置~/.claude/settings.json也适合通过 ECC 安装器启用完整的钩子运行时后参照 hooks/hooks.json 与 scripts/hooks/ 中的现成实现格式化、类型检查、控制台日志检测、成本跟踪等快速搭建属于自己的质量防线。【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
延伸阅读

更多相关文章

2026/11/1 20:39:00

Goldie:用编码Agent自动生成App Store上架截图与预览视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/11/1 23:54:44

Pico MicroPython低功耗实战:lightsleep调度与串口调试全流程

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/11/2 2:56:38

G-Helper:华硕笔记本的单文件轻量控制中心

G-Helper:华硕笔记本的单文件轻量控制中心 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivobook, Zenbook, Expertbook, R…

2026/11/7 22:40:20

电工作业防护装备在哪考?别被中介坑了,看这篇就够了

电工作业防护装备在哪考?别被中介坑了,看这篇就够了 你是不是也遇到过这种情况:想考个电工作业防护装备证书,但不知道在哪考?怕被中介骗钱?其实,流程比你想象中简单,关键是要选对地方、走对流程。今天我就从许昌市政公用工程从业者的角度,告诉你怎么…

2026/11/7 22:40:20

你学历不高怕报不上名?建设局特种工图片保姆级教程来了

你学历不高怕报不上名?建设局特种工图片保姆级教程来了 你学历不高怕报不上名?别担心,建设局特种工图片保姆级教程来了,让你轻松搞定特种作业证,别再被“学历门槛”拦住脚步。今天我们就来聊聊建设局特种工图片相关的政策,以及如何顺利报考、考试、复审…

2026/11/7 22:40:20

建设局特种工图片全流程办理指南通过率揭秘

建设局特种工图片全流程办理指南通过率揭秘 实操考试心里没底怕挂科?别慌,很多人在备考特种作业操作证时都遇到过这种情况。其实,只要你掌握了正确的备考方法,配合一些 通过率揭秘 的内部经验,通过考试并不是难事。这篇文章,我以…

2026/11/7 22:40:20

拿了电工证后需要什么全流程办理指南

拿了电工证后需要什么全流程办理指南 证书过期了不知道怎么复审延期?你不是一个人。我认识好几个老电工,因为没及时复审,直接被单位辞退,连项目都接不了。电工证这玩意儿,不是拿了就完事, 在哪考 、 怎么复审 、 哪里用得上…

2026/11/7 22:40:20

没学历也能考电工作业防护装备?在哪考你知道吗?

没学历也能考电工作业防护装备?在哪考你知道吗? 你是不是总觉得自己学历不高,连电工作业防护装备都报不上名?其实不是,这玩意儿 不看学历 ,只看有没有实践经验和通过考试,关键是你得知道 在哪考…

2026/11/7 22:35:20

电工证先给钱怎么报名?许昌转岗工人亲述避坑全过程

电工证先给钱怎么报名?许昌转岗工人亲述避坑全过程 找工作处处碰壁,电工证还没到手,面试官直接pass?你不是一个人在战斗。我之前在许昌做建筑工,听说电工证能拓宽就业面,就赶紧去报名,结果差点被“先给钱再培训”的套路骗了。今天就把我的真实经历…

2026/11/7 14:54:47

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

在智慧养宠时代,基于视觉的宠物身份识别技术正逐步从实验室走向家庭应用。然而,与配合度高的人类不同,宠物是典型的“非合作生物识别对象”——它们不会主动配合摄像头调整姿态,更无法控制光照环境。实际应用中,我们常…

2026/11/7 14:50:12

SSM电子书店源码全解析:结构、原理、部署与排错实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/11/7 0:03:08

郑州报考避坑指南:电工证和钳工证怎么选?实操考试心里没底怕挂科

郑州报考避坑指南:电工证和钳工证怎么选?实操考试心里没底怕挂科 实操考试心里没底怕挂科?你不是一个人。特别是在郑州这样的城市,很多施工企业负责人和一线作业人员在报考电工证和钳工证时都面临着同样的困惑。到底该考哪个证?哪个更适合自己?哪个证书…

2026/11/7 0:03:08

广西电工证办理流程全解析:外省证怎么转?在哪考最靠谱?

广西电工证办理流程全解析:外省证怎么转?在哪考最靠谱? 之前考的证在外省能不能转过来?这个问题我遇到太多了,今天就拿广西电工证办理流程来具体说说,别再走弯路了。广西电工证的报考、复审、继续教育这些环节,如果你不了解,真的会吃大亏,尤其对于从…

2026/11/7 0:03:08

电气电工证都有哪些保姆级教程

电气电工证都有哪些保姆级教程 你是不是正愁不知道去哪报名,怕被中介坑?别急,这篇保姆级教程专为河南初次报考人员准备,帮你搞清楚 电气电工证都有哪些 ,以及如何避开那些坑。 电气电工证都有哪些?别被五花八门的证书搞懵了…

2026/11/7 14:54:47

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

在智慧养宠时代,基于视觉的宠物身份识别技术正逐步从实验室走向家庭应用。然而,与配合度高的人类不同,宠物是典型的“非合作生物识别对象”——它们不会主动配合摄像头调整姿态,更无法控制光照环境。实际应用中,我们常…

2026/11/7 14:50:12

SSM电子书店源码全解析:结构、原理、部署与排错实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑