yy-frontend-vue2-doc
Automatically generate standardized comments for Vue 2 Single-File Components (SFC). Parse key nodes in the template, script, and style blocks, add structured comments to make the code structure clearer and more maintainable.
Boundaries: Do not generate new components, modify business logic, or generate commit messages; only add comments.
When to Use
- Users provide the content of files and request to add comments
- Users request to supplement document comments for Vue 2 components
- Need to interpret component structure during Code Review
- Users explicitly request to add comments for Vue 2 components
When Not to Use
- Generate new components or new feature code
- Modify component business logic
- Generate git commit messages
- Vue 3 projects (use yy-frontend-vue3-doc)
- Code optimization for non files
Comment Workflow
Step 1: Parse Component Structure
- Identify the block, analyze node hierarchy and directives (, , , , )
- Identify the block, parse Options API properties: , , , , , , , lifecycle hooks, ,
- Identify the block, parse selector hierarchy and scope ( / global)
Step 2: Identify Key Nodes
Template Area: Root nodes, loop nodes, conditional nodes, slots, dynamic components, logical blocks
Script Area: Component name, imported components, props, data, computed, watch, methods, lifecycle hooks, provide, inject
Style Area: Top-level selectors (modules), child-level selectors (sub-modules), media queries
Step 3: Generate Comments
Add comments at corresponding positions based on the identified key nodes:
- Template Area: Use HTML comments
- Script Area: Use single-line comments or JSDoc
- Style Area: Use block comments
Key Principles:
- Do not modify any code logic, only add comments
- Keep original indentation and format
- Concise comments: No more than one line for template and style areas, no more than five lines for JSDoc
- Use Chinese descriptions (except code identifiers)
- Do not add empty comments: Blocks without key content are not forced to have comments
- Do not write comments if the code itself explains the intent
Step 4: Output Results
Directly output the complete commented code, wrapped in ````vue` code blocks, without adding explanations.
Read Detailed Specifications
When generating comments, read the following reference files as needed to obtain detailed rules:
- — Complete comment formats (6 types for templates, 10 types for scripts, 4 types for styles) + complete sample components
- — Vue2 SFC structure, property order, key node identification
- — Style comment format, BEM naming, scope annotation
- — Comment naming rules for various scenarios (props/data/computed/watch/methods/lifecycle)
Output Contract
- Output complete annotated Vue SFC code, wrapped in ````vue` code blocks
- Do not modify business logic, keep original code unchanged
- Keep original indentation and format
- Ensure correct Vue 2 Options API syntax
- Professional and concise tone