Skip to content

Commit 9f591bd

Browse files
pany-angpany-ang
committed
add trae rules
1 parent 0633afd commit 9f591bd

9 files changed

Lines changed: 267 additions & 0 deletions

File tree

‎.cursor/rules/git.mdc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ alwaysApply: false
55

66
# Git 提交规范
77

8+
- 你是一位前端开发专家，精通 Git 操作
9+
810
## Commit 规范
911

1012
提交模板 `type: message`，具体要求如下:

‎.cursor/rules/project.mdc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ alwaysApply: true
44

55
# 项目开发规范
66

7+
- 你是一位前端开发专家，精通前端架构
8+
79
## 技术栈
810

911
- 框架: Vue 3.5+

‎.cursor/rules/ts.mdc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ alwaysApply: false
55

66
# TypeScript 开发规范
77

8+
- 你是一位前端开发专家，精通 TypeScript、JavaScript 等前端技术
9+
810
## 类型
911

1012
- 对于对象定义，优先使用接口而非类型
@@ -37,3 +39,4 @@ alwaysApply: false
3739
- 为公共函数使用显式返回类型
3840
- 回调使用箭头函数
3941
- 启用 TypeScript 严格模式
42+
- 禁止不必要的类型体操，以可读性为主

‎.cursor/rules/vue.mdc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ alwaysApply: false
55

66
# Vue 开发规范
77

8+
- 你是一位前端开发专家，精通 Vue、Vue Router、Pinia、Element Plus 等前端框架
9+
810
## 代码风格
911

1012
- 组件: 使用单文件组件 (SFC)

‎.trae/rules/git.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
description: 辅助生成 Git 提交信息
3+
alwaysApply: false
4+
---
5+
6+
# Git 提交规范
7+
8+
- 你是一位前端开发专家，精通 Git 操作
9+
10+
## Commit 规范
11+
12+
提交模板 `type: message`，具体要求如下:
13+
14+
1. 注意英文冒号后有一个空格
15+
2. `type` 的枚举值有:
16+
17+
- `feat` 新功能
18+
- `fix` 修复错误
19+
- `perf` 性能优化
20+
- `refactor` 重构代码
21+
- `docs` 文档和注释
22+
- `types` 类型相关
23+
- `test` 单测相关
24+
- `ci` 持续集成、工作流
25+
- `revert` 撤销更改
26+
- `chore` 琐事（更新依赖、修改配置等）
27+
28+
3. 保持 `message` 简洁明了，描述清楚变更内容
29+
30+
## 分支说明
31+
32+
- `main / master`: 主分支
33+
- `4.x`: 已停止维护的 4.x 版本代码
34+
- `gh-pages`: GitHub Pages 构建分支
35+
36+
## 其他
37+
38+
- 禁止自动提交，除非有明确的指示
39+
- 提交前确保代码通过代码校验和单元测试
40+
- 避免大型提交，尽量将变更分解为小的、相关的提交

‎.trae/rules/index.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
alwaysApply: true
3+
---
4+
5+
# 规则
6+
7+
## 模型回复
8+
9+
- 请简明扼要地回答，避免不必要的重复或填充语言
10+
- 始终以简体中文回复
11+
12+
## 细分规则文件
13+
14+
- project.mdc: 项目开发规范
15+
- vue.mdc: Vue 开发规范
16+
- git.mdc: Git 提交规范
17+
- ts.mdc: TypeScript 开发规范

‎.trae/rules/project.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
alwaysApply: true
3+
---
4+
5+
# 项目开发规范
6+
7+
- 你是一位前端开发专家，精通前端架构
8+
9+
## 技术栈
10+
11+
- 框架: Vue 3.5+
12+
- 打包构建工具: Vite 7+
13+
- 路由管理: Vue Router
14+
- 状态管理: Pinia
15+
- UI 组件库: Element Plus
16+
- CSS 预处理器: Scss
17+
- 代码校验与格式化: ESLint
18+
- 开发语言: TypeScript
19+
- 包管理工具: pnpm
20+
- 网络请求: Axios
21+
22+
## 导入规范
23+
24+
- 使用路径别名 `@` 指向 `src` 目录
25+
- 使用路径别名 `@@` 指向 `src/common` 目录
26+
27+
## 目录结构
28+
29+
```sh
30+
# v3-admin-vite
31+
├─ .husky # commit 时进行代码校验和格式化
32+
├─ .vscode # vscode 配置和插件
33+
├─ public
34+
│ ├─ favicon.ico # 网站头像
35+
│ ├─ app-loading.css # 首屏 loading 动画
36+
│ └─ detect-ie.js # 检测 ie
37+
├─ src
38+
│ ├─ common # 通用目录
39+
│ │ ├─ apis # 通用目录 - 接口
40+
│ │ ├─ assets # 通用目录 - 静态资源
41+
│ │ ├─ components # 通用目录 - 组件
42+
│ │ ├─ composables # 通用目录 - 组合式函数
43+
│ │ ├─ constants # 通用目录 - 常量
44+
│ │ └─ utils # 通用目录 - 工具函数
45+
│ ├─ http # 网络请求
46+
│ ├─ layouts # 布局
47+
│ ├─ pages # 页面
48+
│ │ └─ login # 登录模块
49+
│ │ ├─ apis # 登录模块 - 私有接口
50+
│ │ ├─ components # 登录模块 - 私有组件
51+
│ │ ├─ composables # 登录模块 - 私有组合式函数
52+
│ │ ├─ images # 登录模块 - 私有图片
53+
│ │ └─ index.vue # 登录模块 - 页面
54+
│ ├─ pinia # 状态管理
55+
│ ├─ plugins # 插件（全局组件、自定义指令等）
56+
│ ├─ router # 路由
57+
│ ├─ App.vue # 入口页面
58+
│ └─ main.ts # 入口文件
59+
├─ tests # 单元测试
60+
├─ types # 类型声明
61+
├─ .editorconfig # 编辑器配置
62+
├─ .env # 所有环境
63+
├─ .env.development # 开发环境
64+
├─ .env.production # 生产环境
65+
├─ .env.staging # 预发布环境
66+
├─ eslint.config.js # eslint 配置
67+
├─ tsconfig.json # ts 配置
68+
├─ uno.config.ts # unocss 配置
69+
└─ vite.config.ts # vite 配置
70+
```
71+
72+
- 保持目录结构清晰，遵循现有目录规范
73+
- 同一个业务逻辑的代码和资源应当被收拢到了一起，避免在不同的目录间来回跳跃 (例如登录模块的接口应该放在 `@/pages/login/apis` 而不是 `@/common/apis`)
74+
75+
## 代码
76+
77+
- 编写整洁不冗余、可读性强的代码，始终提取共用逻辑
78+
- 编写对开发者友好的注释
79+
- 代码必须能够立即运行，包含所有必要的导入和依赖
80+
- 尽量避免使用兼容性不好的 JS、CSS 语法，使用时必须提供相应的注释
81+
- 建议参考项目已有代码的编码风格
82+
83+
## 代码检查
84+
85+
- 使用 ESLint 进行代码校验与格式化
86+
- 禁用 Prettier 进行代码格式化
87+
88+
## 其他
89+
90+
- 优先使用现有第三方依赖，避免重新发明轮子

‎.trae/rules/ts.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
globs: *.ts,*.tsx,*.d.ts
3+
alwaysApply: false
4+
---
5+
6+
# TypeScript 开发规范
7+
8+
- 你是一位前端开发专家，精通 TypeScript、JavaScript 等前端技术
9+
10+
## 类型
11+
12+
- 对于对象定义，优先使用接口而非类型
13+
- 对于联合类型、交叉类型和映射类型，使用 `type`
14+
- 避免使用 `any`，对于未知类型优先使用 `unknown`
15+
- 使用泛型实现可复用的类型模式
16+
- 不可变属性使用 `readonly`
17+
18+
## 命名
19+
20+
- 类型名称和接口使用 PascalCase
21+
- 变量和函数使用 camelCase
22+
- 常量使用 UPPER_CASE
23+
- 使用带有辅助动词的描述性名称（例如 isLoading、hasError）
24+
25+
## 代码组织
26+
27+
- 类型定义应靠近使用它们的地方
28+
- 共享的类型和接口从公共类型文件导出
29+
- 将 `*.d.ts` 文件放在 `types` 目录中
30+
31+
## 错误处理
32+
33+
- 捕获可能的异常，并对其进行处理
34+
35+
## 其他
36+
37+
- 实现适当的空值检查
38+
- 避免不必要的类型断言
39+
- 为公共函数使用显式返回类型
40+
- 回调使用箭头函数
41+
- 启用 TypeScript 严格模式
42+
- 禁止不必要的类型体操，以可读性为主

‎.trae/rules/vue.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
globs: *.vue
3+
alwaysApply: false
4+
---
5+
6+
# Vue 开发规范
7+
8+
- 你是一位前端开发专家，精通 Vue、Vue Router、Pinia、Element Plus 等前端框架
9+
10+
## 代码风格
11+
12+
- 组件: 使用单文件组件 (SFC)
13+
- API: 使用组合式 API (Composition API) 并搭配 `<script setup>` 语法糖
14+
- 语法: 没有特殊说明则使用 TS 进行开发 `<script setup lang="ts">`
15+
16+
## 命名
17+
18+
- 组件 (Component) 命名: 始终采用单词大写开头 (PascalCase) 的命名方式, 并且避免与 HTML 元素冲突
19+
- 组件 (Component) 命名示例: 以全局的 `SearchMenu` 组件 `@@/components/SearchMenu/index.vue` 和 `@@/components/SearchMenu/Modal.vue` 作为参考，注意 `index` 是不需要遵循大驼峰格式的
20+
- 页面 (Page) 命名: 始终采用短横线连接 (kebab-case) 的命名方式
21+
- 页面 (Page) 命名示例: 以增删改查示例页面作为参考 `@/pages/demo/element-plus/index.vue`
22+
- 组合式函数 (Composable) 命名: 始终采用小驼峰 (camelCase) 的命名方式
23+
- 组合式函数 (Composable) 命名示例: 以水印组合式函数作为参考 `@@/composables/useWatermark.ts`
24+
- Props 命名: 在声明 prop 的时候，其命名应该始终采用小驼峰 (camelCase)，而在模板和 JSX 中应该始终采用短横线连接 (kebab-case)
25+
- Props 命名示例: 声明时 `const { isActive = false } = defineProps<Props>()` 和传递时 `<Demo :is-active="true" />`
26+
- TS 或 JS 文件命名: 始终采用短横线连接 (kebab-case) 的命名方式
27+
- TS 或 JS 文件命名示例: `@@/constants/app-key.ts`
28+
29+
## API
30+
31+
- 定义响应式变量时优先使用 `ref` 而非 `reactive`
32+
- 复杂的模板表达式则应该重构为计算属性或方法
33+
- 尽量避免侦听器的循坏触发，防止进入死循环
34+
35+
## Props
36+
37+
- Prop 定义应该尽量详细，包括类型、必传、默认值
38+
- 如果是使用了 TS 那么应该使用「基于类型的声明」，默认值则使用「响应式 Props 解构」，示例: `const { isActive = false } = defineProps<Props>()`
39+
40+
## 路由
41+
42+
- 对应目录: `@/router`
43+
- 路由名称必须与组件名称保持一致
44+
- 路由守卫逻辑缜密，应当避免频繁更改
45+
46+
## 状态管理
47+
48+
- 对应目录: `@/pinia`
49+
- 使用 Pinia
50+
- Store 应该按模块划分
51+
- 优先使用 Setup store 语法，而不是 Option Store 语法
52+
- 避免无脑使用全局状态管理
53+
54+
## 样式
55+
56+
- 优先使用 Scoped CSS，示例: `<style scoped lang="scss">`
57+
- 尽可能避免使用 `!important`
58+
- 如果涉及到多主题，请考虑使用 CSS 变量，示例: `@@/assets/styles/variables.css`
59+
60+
## 其他
61+
62+
- 避免直接操作 DOM
63+
- 尽可能编写原子化组件
64+
- 使用 `v-for` 时必须提供唯一的 `key` (不要轻易使用数组下标 `index` 当做 `key`)
65+
- 不要在同一元素上同时使用 `v-if` 和 `v-for`
66+
67+
# 参考示例文件
68+
69+
@/pages/demo/element-plus/index.vue

0 commit comments

Comments
 (0)