如何用Hook在everything-claude-code中实现Prettier自动格式化：新手完整指南

如何用Hook在everything-claude-code中实现Prettier自动格式化新手完整指南【免费下载链接】everything-claude-codeClaude Code toolkit - agents, commands, skills, rules, and hooks for productive AI-assisted development项目地址: https://gitcode.com/GitHub_Trending/eve/everything-claude-codeeverything-claude-code是一个 Claude Code 配置工具包内置了丰富的 agents、commands、skills、rules 与 hooks。其中Hook钩子能力尤为实用每次 AI 编辑完 JS/TS 文件Prettier 自动格式化都会随之触发代码排版从此不用操心。本文将带你用 5 分钟看懂它的实现原理并把它装进自己的工作流。一、先搞懂 HookClaude Code 的自动化开关 Hook 是 Claude Code 的事件驱动自动化机制你预先定义好规则当事件触发时对应命令自动执行无需人工干预。项目文档 rules/hooks.md 把 Hook 归纳为三类Hook 类型触发时机典型用途PreToolUse工具执行前拦截危险操作、参数校验PostToolUse工具执行后Prettier 自动格式化、跑检查Stop会话结束时最终验证Prettier 自动格式化属于PostToolUse——文件编辑Edit完成的瞬间自动运行这正是编辑即格式化的关键。二、Prettier 自动格式化配置在哪里一行 matcher 说清 ⚙️完整配置就在 hooks/hooks.json 文件中核心逻辑简化后如下{ matcher: tool \Edit\ tool_input.file_path matches \\\.(ts|tsx|js|jsx)$\, hooks: [{ type: command, command: npx prettier --write 被编辑的文件 }] }只需看懂两处matcher匹配规则仅当 Edit 工具生效、且文件后缀是.ts/.tsx/.js/.jsx时才触发。Markdown、CSS 等文件完全不受影响不会误伤。command执行命令调用npx prettier --write原地重写文件格式瞬间统一。原始实现用 Node.js 从标准输入读取事件信息并提取文件路径详见 hooks/hooks.json若文件不存在则静默跳过绝不打断主流程——这也是生产环境配置讲究的优雅降级。三、工作流程从编辑到格式化完成 Claude Code 修改了 app.ts ↓ PostToolUse Hook 捕获 Edit 事件 ↓ 文件后缀是 .ts/.tsx/.js/.jsx 吗 → 否静默跳过 ↓ 是 运行 npx prettier --write app.ts ↓ 你看到格式统一、排版干净的结果全程零手动操作AI 写完代码的同时格式就已经是干净的你再也不用记着手动跑一遍npx prettier --write .。四、3 种快速启用方法 方法 1插件方式推荐在 Claude Code 中直接安装插件即可一次性获得全部 commands、agents、skills 和 hooks/plugin marketplace add affaan-m/everything-claude-code方法 2手动配置git clone https://gitcode.com/GitHub_Trending/eve/everything-claude-code把 hooks/hooks.json 中的PostToolUse节点复制进你的~/.claude/settings.json重启会话即可生效。方法 3按需摘取只想要自动格式化复制那一条 PostToolUse 配置即可想要全套自动化整段复制。完整 Hook 清单参见 rules/hooks.md。五、实用技巧让格式化如虎添翼 格式化更快npx首次调用可能需要拉取 Prettier建议在项目里预装npm i -D prettier后续触发更迅捷。组合使用同一个 PostToolUse 区块还内置了 TypeScript 类型检查tsc --noEmit与console.log残留警告见 hooks/hooks.json。与 Prettier 搭配即组成格式化 类型检查 残留提醒三件套。改完记得验证项目自带测试套件运行node tests/run-all.js后tests/hooks/hooks.test.js 会自动校验 hooks.json 结构与完整性。小结一句话总结在配置里加一行matcher commandClaude Code 每次写完代码都会自动帮你跑 Prettier。而项目 hooks/hooks.json 里还有更多经过实战检验的 Hook 范例——拦截 tmux 外启动的 dev server、git push 前提醒审查等——都可以直接借鉴让你的 AI 开发工作流更专业、更省心。【免费下载链接】everything-claude-codeClaude Code toolkit - agents, commands, skills, rules, and hooks for productive AI-assisted development项目地址: https://gitcode.com/GitHub_Trending/eve/everything-claude-code创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考