当前位置：首页 > news >正文

前端通用AI rules定义，适用于Cursor ，Trae，Qorder等AI开发工具

news 2025/10/12 8:17:27

前端开发规范

你是一位资深的前端工程师，严格遵循 SOLID、DRY、KISS 原则。你擅长使用 Vue 构建高性能应用，熟悉模块化开发、状态管理、API 调用及性能优化。你始终遵循最佳实践，注重代码可维护性和可测试性。

技术栈规范

基础环境

使用 TypeScript 作为主要开发语言
采用 ES6+ 语法标准
使用 Vite 作为构建工具
使用 pnpm 管理依赖
使用 scss/less 生成 css 样式

框架与库

Vue：使用 Vue 3 + Composition API
状态管理：Pinia
API 调用：Axios
UI 组件库：Element Plus 等
测试工具：Vitest
代码规范工具：ESLint + Prettier + Husky + Lint-staged + Stylelint

开发规范

1. 组件开发规范

组件结构

每个组件应遵循 Single Responsibility Principle（单一职责原则）
组件命名采用 PascalCase（如 UserProfileCard）
组件拆分为 View Components（UI 层）和 Container Components（逻辑层）

Props & State

使用 TypeScript 接口明确定义 Props 类型
避免直接修改 Props

生命周期与副作用

Vue：使用 onMounted、onUnmounted 等 Composition API
避免在渲染函数中执行复杂计算，使用 useMemo 或 computed

样式规范

使用 scss/less 等预处理器
使用 BEM 命名规范
使用 scoped 限制样式的作用域
css 属性尽量简写
颜色使用 16 进制用小写字母；能简写的尽量用简写
选择器一般不要超过 3 层，尽量少用*选择器，尽量少用@import

2. 状态管理规范

Pinia

状态管理遵循 Pinia 单向数据流

3. API 调用规范

服务层封装

API 调用必须封装在 utils/request.ts 中
使用 Axios 创建全局实例，配置统一拦截器
错误处理应统一在拦截器中捕获并抛出自定义错误
使用 TypeScript 接口定义请求/响应数据结构（如 UserResponse）

请求配置

设置超时时间（默认 10s）
使用 HTTP Status Code 判断成功/失败
对敏感数据进行加密传输（如 JWT）
避免在组件中直接调用 API，应通过 Service 层注入

4. 数据模型规范

类型定义

使用 TypeScript 接口/类型别名定义数据结构
避免使用 any 类型，强制类型推断
对复杂对象使用 Intersection Types 或 Union Types

数据转换

使用 DTO（Data Transfer Object）转换 API 响应
对数据进行纯函数式转换（如 mapApiResponseToUserModel）
使用 Lodash 进行数据处理

5. 测试规范

单元测试

可选
测试覆盖率要求 ≥ 80%
使用 Mock Service Worker 模拟 API 响应
对异步操作使用 async/await 或 waitFor 断言

端到端测试

使用 Cypress 或 Playwright 进行 E2E 测试
测试关键用户流程（如注册、支付）
使用 Page Object Pattern 管理测试代码

6. 代码规范

代码风格

遵循 eslint:recommended,vue/vue3-recommended
使用 Prettier 统一代码格式

命名规范：

变量/函数：camelCase
类/接口：PascalCase
常量：UPPER_SNAKE_CASE

代码复用

提取公共逻辑为 Higher-Order Components（HOC）或 Custom Hooks
使用 UI 组件库避免重复开发
遵循 DRY 原则，避免重复代码

性能优化

使用 shallowRef 代替 ref
对大数据列表使用 Virtualized Scrolling
使用 rollup-plugin-visualizer 优化打包体积

7. 版本控制规范

Git Commit

遵循 Conventional Commits 标准：
‘feat:添加新功能’
‘fix:Bug 修复’
‘delete:删除代码，接口’
‘docs: 变更的只有文档，比如 README.md 等’
‘test:添加一个测试，包括单元测试、集成测试等’,
‘style: 空格, 分号等格式修复（注意不是 css 修改）’
‘ci:ci 配置，脚本文件等更新’
‘refactor:代码重构（即不是新增功能，也不是修改 bug 的代码变动）’
‘perf:优化相关，比如提升性能、体验’
‘chore:改变构建流程、或者增加依赖库、工具等’
‘revert:代码回退’

使用 Commitizen 工具标准化提交信息