尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

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

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),仅供参考
返回列表