Back to Details

yy-frontend-vue2-review

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Vue2 前端代码审核助手

Vue2 Frontend Code Review Assistant

审核 Vue2 项目中 
src
目录下所有改动文件，检查组件规范、代码风格、命名规范、逻辑错误、网络请求、computed 规范、安全漏洞、最佳实践及绝对禁止项。
绝不审核 
src
之外的文件，绝不用 React 或 Vue3 标准，绝不修改代码（除非用户明确要求修复）。
Reviews all modified files in the 
src
directory of Vue2 projects, checking component specifications, code style, naming conventions, logical errors, network requests, computed specifications, security vulnerabilities, best practices, and absolute prohibitions.
Never review files outside the 
src
directory, never use React or Vue3 standards, and never modify code (unless the user explicitly requests fixes).

何时使用

When to Use

  • 默认审核 
    git diff
    获取的 
    src
    目录下所有变动文件。
  • 用户指定 
    src
    目录下特定文件或文件夹范围。
  • 代码合并前全面审核。
  • 代码提交前质量检查。
  • By default, reviews all changed files in the 
    src
    directory obtained via 
    git diff
    .
  • Users specify specific files or folder scopes within the 
    src
    directory.
  • Comprehensive review before code merging.
  • Quality check before code submission.

不适用场景

Inapplicable Scenarios

  • 非 Vue2 项目（React、Vue3、Angular 等）。
  • 项目不存在 
    src
    目录结构。
  • 审核 
    src
    目录之外的文件。
  • 直接修改代码自动化修复（除非用户明确要求）。
  • Non-Vue2 projects (React, Vue3, Angular, etc.).
  • Projects without an 
    src
    directory structure.
  • Reviewing files outside the 
    src
    directory.
  • Automatically modifying code for fixes (unless the user explicitly requests it).

支持审核的文件类型

Supported File Types for Review

扩展名审核内容
.vue
Vue2 单文件组件（模板、脚本、样式）
.js
JavaScript 文件（代码风格、导入顺序、命名规范、逻辑错误）
.css
CSS 样式（BEM 命名、格式、scoped 使用）
.scss
SCSS 样式（BEM 命名、格式、嵌套规范）
.less
Less 样式（BEM 命名、格式、变量使用）
ExtensionReview Content
.vue
Vue2 single-file components (template, script, style)
.js
JavaScript files (code style, import order, naming conventions, logical errors)
.css
CSS styles (BEM naming, formatting, scoped usage)
.scss
SCSS styles (BEM naming, formatting, nesting rules)
.less
Less styles (BEM naming, formatting, variable usage)

审核工作流

Review Workflow

Step 1：目录验证 + 获取变动文件

Step 1: Directory Validation + Obtain Changed Files

  1. 检查项目是否存在 
    src
    目录。不存在则回复：
    当前项目不符合 Vue2 前端代码审核的目录要求，本技能仅支持包含 src 目录的前端项目。 并终止。
  2. 执行 
    git diff --name-only HEAD
    和 
    git diff --cached --name-only
    获取所有变动文件，合并去重后严格过滤出 
    src
    目录下的文件    。
  3. 若无匹配文件，回复：
    当前 src 目录下没有需要审核的改动文件。 并终止。
  1. Check if the project has an 
    src
    directory. If not, reply:
    The current project does not meet the directory requirements for Vue2 frontend code review. This skill only supports frontend projects containing an src directory. And terminate.
  2. Execute 
    git diff --name-only HEAD
    and 
    git diff --cached --name-only
    to get all changed files, merge and deduplicate them, then strictly filter out files under the 
    src
    directory    .
  3. If no matching files are found, reply:
    There are no modified files in the current src directory that need review. And terminate.

Step 2：多维代码审核

Step 2: Multi-Dimensional Code Review

按以下 9 个维度逐项审核（详细规则见 references 目录）：
#维度参考文件
1Vue2 组件规范（脚本结构、元素特性顺序、props、emit、生命周期、命名）
references/component.md
2代码风格（缩进、引号、分号、尾随逗号、箭头函数、9 组导入顺序）
references/code-style.md
3命名规范（API 函数、事件函数、常量、props、组件名、emit 事件）
references/naming.md
4逻辑错误（空指针、数组越界、逻辑判断、方法内部顺序）
references/logic-and-request.md
5网络请求规范（async/await + try/catch、统一响应模式、扁平化）
references/logic-and-request.md
6computed 规范（必须 try/catch、有意义命名）
references/logic-and-request.md
7安全漏洞（XSS、敏感信息泄露）
references/best-practice.md
8最佳实践（调试代码清理、BEM + scoped、未使用变量）
references/best-practice.md
9绝对禁止项（连续解构、修改子组件数据、修改 data 类型、修改 props）
references/best-practice.md
注意事项：
  • 注释相关问题默认忽略，不检查。
  • 使用 
    ==
    不视为问题。
  • catch
    块中的 
    console.warn
    不视为问题。
  • emit 事件必须在白名单范围内（interaction / popup / operation 三类）。
Review item by item according to the following 9 dimensions (detailed rules can be found in the references directory):
#DimensionReference File
1Vue2 Component Specifications (script structure, element attribute order, props, emit, lifecycle, naming)
references/component.md
2Code Style (indentation, quotes, semicolons, trailing commas, arrow functions, 9 groups of import order)
references/code-style.md
3Naming Conventions (API functions, event functions, constants, props, component names, emit events)
references/naming.md
4Logical Errors (null pointers, array out of bounds, logical judgments, internal method order)
references/logic-and-request.md
5Network Request Specifications (async/await + try/catch, unified response mode, flattening)
references/logic-and-request.md
6Computed Specifications (must use try/catch, meaningful naming)
references/logic-and-request.md
7Security Vulnerabilities (XSS, sensitive information leakage)
references/best-practice.md
8Best Practices (cleanup of debugging code, BEM + scoped, unused variables)
references/best-practice.md
9Absolute Prohibitions (continuous destructuring, modifying child component data, modifying data types, modifying props)
references/best-practice.md
Notes:
  • Issues related to comments are ignored by default and not checked.
  • Using 
    ==
    is not considered a problem.
  • console.warn
    in the 
    catch
    block is not considered a problem.
  • Emit events must be within the whitelist (three categories: interaction / popup / operation).

Step 3：输出审核结果

Step 3: Output Review Results

按 Output contract 规定的格式输出审核报告。问题按文件分组、按严重程度排序（严重 → 中等 → 轻微）。
Output the audit report in the format specified by the Output contract. Issues are grouped by file and sorted by severity (Critical → Medium → Minor).

Step 4：自动提交判断

Step 4: Automatic Submission Judgment

  • 通过（无问题或仅轻微问题）：输出审核通过报告，调用 
    yy-frontend-commit
    技能执行提交。
  • 不通过（存在严重或中等问题）：输出完整审核结果和修复建议（严重优先 → 中等 → 轻微），等待用户修复后重新审核。
  • Pass (no issues or only minor issues): Output the review pass report and call the 
    yy-frontend-commit
    skill to execute submission.
  • Fail (critical or medium issues exist): Output the complete review results and repair suggestions (prioritize critical → medium → minor), wait for the user to fix and then re-review.

Output contract

Output Contract

审核通过（无问题或仅轻微）

Review Pass (no issues or only minor)

markdown
undefined
markdown
undefined

审核结果：通过

Review Result: Pass

问题统计

Issue Statistics

严重程度数量
严重0
中等0
轻微N
SeverityCount
Critical0
Medium0
MinorN

总结

Summary

所有文件符合 Vue2 前端开发规范，审核通过。

然后调用 `yy-frontend-commit` 技能。
All files comply with Vue2 frontend development specifications, review passed.

Then call the `yy-frontend-commit` skill.

审核不通过（存在严重或中等问题）

Review Fail (critical or medium issues exist)

markdown
undefined
markdown
undefined

审核结果：不通过

Review Result: Fail

问题统计

Issue Statistics

严重程度数量
严重N
中等N
轻微N
SeverityCount
CriticalN
MediumN
MinorN

问题详情

Issue Details

[文件名]

[File Name]

严重问题：
  1. 问题类型：[类型描述]
    • 位置：文件路径:行号
    • 描述：[详细描述]
    • 代码片段：[涉及代码]
    • 修复建议：[具体建议]
中等问题：
...
轻微问题：
...

不自动调用提交技能，等待用户修复后重新审核。
Critical Issues:
  1. Issue Type: [Type Description]
    • Location: File path: line number
    • Description: [Detailed Description]
    • Code Snippet: [Involved Code]
    • Repair Suggestion: [Specific Suggestion]
Medium Issues:
...
Minor Issues:
...

Do not automatically call the submission skill, wait for the user to fix and then re-review.