Back to Details

yy-frontend-vue2-code-optimization

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

yy-frontend-vue2-code-optimization

yy-frontend-vue2-code-optimization

针对 Vue2 页面组件、JavaScript 和 CSS/SCSS/Less 文件的代码优化技能。通过统一代码结构、语义化命名、BEM 样式规范、逻辑分层和关键注释，提升代码可读性与团队协作效率，降低维护与交接成本。
边界：不用于生成新组件、修改业务逻辑或生成提交信息。
A code optimization skill for Vue2 page components, JavaScript and CSS/SCSS/Less files. Improve code readability and team collaboration efficiency, and reduce maintenance and handover costs by unifying code structure, semantic naming, BEM style specifications, logical layering and key comments.
Boundaries: Not used for generating new components, modifying business logic or generating commit messages.

何时使用

When to Use

  • 用户未指定文件时，优化当前 git 变动文件（含暂存区）
  • 用户明确指定文件或文件夹，优化其中 
    .vue
    、
    .js
    、
    .css
    、
    .scss
    、
    .less
    文件
  • Code Review 时需要优化代码结构
  • 用户明确要求优化前端代码（Vue2 组件、JS 或 CSS）
  • When the user does not specify files, optimize current git changed files (including staging area)
  • When the user explicitly specifies files or folders, optimize the .vue, .js, .css, .scss, .less files within them
  • Need to optimize code structure during Code Review
  • Users explicitly request frontend code optimization (Vue2 components, JS or CSS)

何时不要使用

When Not to Use

  • 生成新组件或新功能代码
  • 修改业务逻辑
  • 生成 git 提交信息
  • 非 Vue2 项目（Vue3 使用 yy-frontend-vue3-code-optimization）
  • Generate new components or new feature code
  • Modify business logic
  • Generate git commit messages
  • Non-Vue2 projects (use yy-frontend-vue3-code-optimization for Vue3)

支持的文件类型

Supported File Types

扩展名优化内容
.vue
Vue2 单文件组件（模板、脚本、样式）
.js
JavaScript 文件（代码风格、导入排序、命名规范、注释）
.css
CSS 样式（BEM 命名、格式、注释）
.scss
SCSS 样式（BEM 命名、格式、注释）
.less
Less 样式（BEM 命名、格式、注释）
ExtensionOptimization Content
.vue
Vue2 single-file components (template, script, style)
.js
JavaScript files (code style, import sorting, naming conventions, comments)
.css
CSS styles (BEM naming, formatting, comments)
.scss
SCSS styles (BEM naming, formatting, comments)
.less
Less styles (BEM naming, formatting, comments)

优化工作流

Optimization Workflow

步骤一：确定优化目标

Step 1: Determine Optimization Targets

  1. 若用户指定了文件/文件夹：递归收集所有支持的文件类型
  2. 若未指定：执行 
    git diff --name-only HEAD
    和 
    git diff --cached --name-only
    ，合并去重后过滤出支持的文件类型
  3. 若无匹配文件，回复「当前没有需要优化的改动文件（支持 .vue、.js、.css、.scss、.less）。你可以指定文件或文件夹让我优化。」并终止
  1. If the user specifies files/folders: Recursively collect all supported file types
  2. If not specified: Execute 
    git diff --name-only HEAD
    and 
    git diff --cached --name-only
    , merge and deduplicate, then filter out supported file types
  3. If no matching files are found, reply with "There are currently no changed files that need optimization (supports .vue, .js, .css, .scss, .less). You can specify files or folders for me to optimize." and terminate

步骤二：读取详细规范

Step 2: Read Detailed Specifications

在执行优化前，根据需要读取以下参考文件获取详细规则：
  • 需要 Vue2 组件结构、props、computed、methods、emit、模板属性顺序等规则 → 读取 
    references/component.md
  • 需要代码风格、导入顺序（9 组）、引号/分号/缩进/行宽/尾随逗号等规则 → 读取 
    references/code-style.md
  • 需要注释规范（JSDoc、模板注释、脚本注释、关键注释场景） → 读取 
    references/comments.md
  • 需要命名约定（API 函数、事件函数、布尔值命名、模块拆分建议） → 读取 
    references/naming.md
  • 需要 CSS/BEM 命名和样式格式规则 → 读取 
    references/css-style.md
Before performing optimization, read the following reference files to obtain detailed rules as needed:
  • Need rules for Vue2 component structure, props, computed, methods, emit, template attribute order, etc. → Read 
    references/component.md
  • Need rules for code style, import order (9 groups), quotes/semicolons/indentation/line width/trailing commas, etc. → Read 
    references/code-style.md
  • Need comment specifications (JSDoc, template comments, script comments, key comment scenarios) → Read 
    references/comments.md
  • Need naming conventions (API functions, event functions, boolean naming, module splitting suggestions) → Read 
    references/naming.md
  • Need CSS/BEM naming and style formatting rules → Read 
    references/css-style.md

步骤三：逐文件优化

Step 3: Optimize File by File

对每个文件应用对应规范：
Apply corresponding specifications to each file:

.vue
文件

.vue
Files

  1. 模板区：调整属性顺序，清理复杂表达式，添加区块注释
  2. 脚本区：按标准顺序排列属性，规范 props/data/computed/watch/methods，添加 JSDoc 注释，统一网络请求写法
  3. 样式区：应用 BEM 命名，确保 scoped，添加模块注释
  1. Template Section: Adjust attribute order, clean up complex expressions, add block comments
  2. Script Section: Arrange properties in standard order, standardize props/data/computed/watch/methods, add JSDoc comments, unify network request writing
  3. Style Section: Apply BEM naming, ensure scoped, add module comments

.js
文件

.js
Files

  1. 按 9 组规则重排 import
  2. 规范命名和代码风格
  3. 为关键方法添加 JSDoc 注释
  1. Reorder imports according to 9-group rules
  2. Standardize naming and code style
  3. Add JSDoc comments for key methods

.css
/ 
.scss
/ 
.less
文件

.css
/ 
.scss
/ 
.less
Files

  1. 应用 BEM 命名规范
  2. 统一代码格式
  3. 添加模块注释
  1. Apply BEM naming specifications
  2. Unify code formatting
  3. Add module comments

步骤四：输出结果

Step 4: Output Results

按以下格式输出：
markdown
undefined
Output in the following format:
markdown
undefined

优化结果

Optimization Results

优化文件数：N

Number of Optimized Files: N

[filename]

[filename]

优化内容：
  1. [优化项描述]
  2. [优化项描述]
[优化后的完整代码]
undefined
Optimization Content:
  1. [Optimization item description]
  2. [Optimization item description]
[Full optimized code]
undefined

输出契约

Output Contract

  • 解析组件的模板、脚本、样式区块，应用规范后直接输出优化后的完整代码
  • 不修改业务逻辑，保持原有功能不变
  • 确保 Vue 2 语法正确（
    v-model
    、生命周期等）
  • 语气专业、客观、简洁
  • Parse the template, script, and style blocks of components, and directly output the full optimized code after applying specifications
  • Do not modify business logic, keep original functions unchanged
  • Ensure correct Vue 2 syntax (such as 
    v-model
    , lifecycle, etc.)
  • Tone is professional, objective, and concise

参考文档

Reference Documents

渐进式披露：以下文件按需读取，根据文件类型和优化需要打开。
  • references/component.md
    — Vue2 组件结构顺序、Props 规范、computed 规则、方法排序、网络请求模式、Emit 规范、模板属性顺序
  • references/code-style.md
    — 缩进/引号/分号/行宽/尾随逗号、9 组导入顺序、Prettier 配置、
    ==
    规则
  • references/comments.md
    — JSDoc 格式、模板/脚本注释格式、关键注释场景
  • references/naming.md
    — API/事件/常量/组件/Props 命名、布尔值前缀、模块拆分建议
  • references/css-style.md
    — BEM 命名定义、代码格式、样式注释格式、作用域标注
Progressive Disclosure: The following files are read on demand, opened according to file types and optimization needs.
  • references/component.md
    — Vue2 component structure order, Props specifications, computed rules, method sorting, network request patterns, Emit specifications, template attribute order
  • references/code-style.md
    — Indentation/quotes/semicolons/line width/trailing commas, 9-group import order, Prettier configuration, 
    ==
    rules
  • references/comments.md
    — JSDoc format, template/script comment formats, key comment scenarios
  • references/naming.md
    — API/event/constant/component/Props naming, boolean prefixes, module splitting suggestions
  • references/css-style.md
    — BEM naming definition, code formatting, style comment formats, scope labeling