如何用 ECC 开发 Vue 应用并做代码审查【免费下载链接】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如果你在用 agent如 Claude Code开发 Vue 3 / Nuxt / Pinia 项目常见的问题是响应式丢失、v-html带来 XSS、composable 缺清理、v-for用了下标做 key。ECC 把 Vue 开发规范和审查流程做成了可直接挂载的组件vue-patternsskill 在 Vue 相关任务中自动激活rules/vue/规则包作为常驻上下文约束写法vue-revieweragent 配合/vue-review命令在合并前产出按严重级别分类的审查报告。本文的目标是装好 ECC 后在你的 Vue 项目里按这套流程完成开发自查并跑出一份可据此决定 Approve 或 Block 的代码审查报告。安装 ECC 并挂载 Vue 规则包前置条件来自 README使用npx ecc-universal setup路径需要 Node.js 18 或更新版本、Git以及PATH上的 Claude Code 2.1 或更新版本。npx ecc-universal setupClaude Code 插件无法分发rules所以 Vue 规则包需要你手动复制这是 README 中 “Claude Code details” 一节给出的做法克隆仓库地址以该节的官方安装说明为准mkdir -p ~/.claude/rules/ecc cp -R rules/common ~/.claude/rules/ecc/ cp -R rules/vue ~/.claude/rules/ecc/README 的建议是从rules/common加一个你实际使用的栈的 pack 开始如果你的 Vue 项目用 TypeScript按同一节中的示例再复制rules/typescript。复制时保留整个语言目录而不是单个文件以免相对引用失效和文件名冲突。rules/vue/目录下共 5 个规则文件frontmatter 中的paths: [**/*.vue]决定它们作用于 Vue 文件hooks.md额外覆盖*.ts/*.tsxcoding-style.mdSFC 结构、响应式纪律、宏与模板约束patterns.mdcomposables、Pinia、vue-router、vue-query 模式security.mdv-html、URL/样式/事件注入、客户端密钥testing.mdVitest Vue Test Utils 用法hooks.md编辑后 lint 与 typecheck 的顺序开发阶段vue-patterns skill 何时生效skills/vue-patterns/SKILL.md 的激活条件项目使用 Vue.js任意版本、Nuxt、Vite Vue 或 Pinia用户在问组件架构、composables、响应式或状态管理审查.vue文件配置 Vue Router / Pinia / Vite / Vitest或讨论 Vue 特有的性能、安全、SSR 模式。命中这些情况时 skill 自动加载无需手动触发。开发时值得对照 skill 中几条硬约束均与 rules/vue 一致SFC 一律script setup langts块顺序script setup→template→style scoped组件文件 PascalCasecomposable 文件useCamelCase命名。组件内禁止解构reactive对象或 Pinia store必须走toRefs/storeToRefs否则响应式静默丢失。每个v-for放稳定的唯一原始值:key绝不用数组下标v-if和v-for不得放同一元素用template v-for包内层v-if或预计算过滤列表。Composable 必须use前缀、返回响应式值、在onUnmounted或 watcheronCleanup里清理定时器、监听器与订阅。安全底线见 security.md{{ }}和动态属性绑定自动转义但v-html、:href/:src、:style、事件属性绑定不转义——用户内容过v-html前必须用 DOMPurify 等白名单方案消毒。自查先 lint 再 typecheckhooks.md 给出编辑后检查的顺序先对变更文件做 lint 与格式化最后跑全项目类型检查让类型错误反映格式化后的源码# 只对变更文件$FILE 代表本次改动的那个文件 eslint --fix $FILE prettier --write $FILE # 全项目、建议防抖或延后执行 vue-tsc --noEmit两点必须注意类型检查必须用vue-tsc --noEmit。普通tsc读不了.vue单文件组件不能作为本项目的 typecheck 命令。ESLint 需要配置eslint-plugin-vueflat config 下用vue/vue3-recommended模板和 script 两侧都会覆盖建议 Prettier-via-ESLint避免双重格式化互相打架。执行代码审查/vue-review在写完或修改组件、composable、Pinia store 之后、合并之前运行/vue-review。该命令调用 vue-reviewer agent流程是通过git diff找出变更的.vue文件与 Vue 相关的.ts/.js文件PR 场景下用gh pr view --json baseRefName确定真实基线而不是硬编码main。运行 lint确认eslint-plugin-vue已配置与vue-tsc --noEmit类型检查。只审查 Vue 专属 lane响应式正确性、composables、模板安全v-html、URL 绑定、可访问性、Vue 性能、Pinia/Router。按 CRITICAL / HIGH / MEDIUM 生成报告。涉及.vue文件的 PR 应同时运行vue-reviewer和typescript-reviewer两者分工不重叠any滥用、async 正确性、Node 安全归typescript-reviewer响应式、模板安全、composables、路由守卫、SSR 安全归vue-reviewer。纯.ts改动且不含 Vue 导入时只需typescript-reviewer如果 diff 里没有任何.vue改动vue-reviewer会直接交给typescript-reviewer并停止。vue-reviewer 在审查前还会自己跑一组诊断命令# 必跑 npx eslint . --ext .vue,.ts,.js vue-tsc --noEmit npm run typecheck --if-present # 常用 npx eslint . --rule vue/multi-word-component-names: error npx eslint . --rule vue/no-v-html: warn npx eslint . --rule vue/require-default-prop: warn npx prettier --check . npm audit如果项目里没有eslint-plugin-vue或vue-tsc审查会把缺口标记为 HIGH 配置问题并继续而不是中断。解读审查报告每条发现按固定格式输出始终带文件路径与行号[SEVERITY] short title File: path/to/file.vue:42 Issue: One-sentence description. Why: Explanation of the impact. Fix: Concrete recommended change.报告以汇总表收尾判定标准来自 vue-reviewer 的 Approval Criteria## Review Summary | Severity | Count | Status | |----------|-------|--------| | CRITICAL | 0 | pass | | HIGH | 1 | block | | MEDIUM | 2 | info | Verdict: BLOCK — HIGH issues must be fixed before merge.对应三种结论无 CRITICAL 和 HIGH 问题为 Approve仅 MEDIUM 为 Warning谨慎合并发现 CRITICAL 或 HIGH 即 Block。上面的表格是文档示例数值随你的实际代码变化。vue-review 命令文档 中还有一个完整示例报告示例结果CRITICAL 级 “未消毒的v-html渲染用户 bio”HIGH 级 “composable 内 watcher 缺清理导致过期响应覆盖新数据”建议 FAIL 阻断合并直到 CRITICAL 修复。边界与限制vue-reviewer只报告发现不重构或改写代码“You DO NOT refactor or rewrite code — you report findings only”修复动作由你或实施 agent 完成。审查基于 diff优先 staged 与未暂存的git diff历史浅或单提交时回退到git show --patch HEAD。Vue 3.5 的差异要注意3.5 起响应式 props 解构默认可用但 Vue 3.5 中解构defineProps()会拿到快照副本属于 CRITICAL 级问题3.5 中直接watch()解构 prop 会编译报错需用 getter 包装。如果项目用 NuxtuseRuntimeConfig().public里的内容一律视为暴露给客户端secret 不得放入。跑完/vue-review后以报告末尾的 Verdict 行为准Approve 可以进入合并流程Block 则按报告中的 Fix 逐条处理后再复审。需要更深的非 Vue 关注点通用 TS/JS、异步正确性时对同一 PR 再跑一次typescript-reviewer即可两者的发现互不重复。【免费下载链接】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），仅供参考
