Trae IDE Vue2、uni-app 自定义规则完整配置教程

来杯柠檬水加醋

390人浏览 · 2026-06-23 11:08:53

来杯柠檬水加醋 · 2026-06-23 11:08:53 发布

Trae 的自定义规则分为全局个人规则（user_rules.md）、项目专属规则（project_rules.md，优先级更高），采用 Markdown 语法编写，用来约束 AI 生成代码的技术栈、编码规范、目录结构、语法限制；同时搭配项目原生 ESLint 做代码静态校验，二者配合使用。

一、创建规则入口（操作步骤）

打开 Vue2/uni-app 项目，点击 Trae 右上角设置图标 → 切换到【规则】面板。
全局个人规则（所有项目生效）：个人规则区域 → 点击 + 创建 user_rules.md，全局通用规范。
项目规则（仅当前项目生效，推荐）：项目规则区域 → 点击 + 创建 project_rules.md，自动在项目根目录生成路径：.trae/rules/project_rules.md，可提交 Git 同步团队规范。
写完内容直接保存，规则实时生效。

二、Vue2 项目完整自定义规则示例（project_rules.md）

# Vue2 Webpack 项目 AI 生成强制规则
## 1. 技术栈硬性约束
1. 固定技术栈：Vue2.6 + Vue-Router3 + Vuex3 + axios，禁止生成Vue3、Composition API、setup语法糖代码。
2. UI组件库固定使用 Element UI，不引入Element Plus、AntD Vue3版本。
3. 构建工具为webpack，不要生成Vite配置、vite.config.js相关代码。

## 2. 文件与命名规范
1. 页面组件：PascalCase大驼峰命名（UserList.vue、OrderDetail.vue），存放路径 src/views/。
2. 公共组件：大驼峰，存放 src/components/，通用全局组件放在 src/components/common。
3. JS工具函数：小驼峰 camelCase（formatTime.js、request.js），常量全大写下划线 BASE_URL、PAGE_SIZE。
4. 禁止使用拼音命名变量/文件，缩写仅限通用行业词汇（id、uid、api）。

## 3. Vue组件写法强制规则
1. 组件必须使用 Options API 完整结构，顺序固定：name → components → props → data → computed → watch → methods → 生命周期钩子。
2. props必须定义type、required、default默认值，必须添加注释说明字段含义。
3. 禁止使用var声明变量，优先const，后let；字符串统一使用单引号，末尾不强制分号。
4. 模板标签属性顺序：v-if/v-show → v-for → ref → class → style → 自定义属性，v-for必须绑定key。
5. 生命周期优先使用created、mounted，销毁必须在beforeDestroy清理定时器、事件监听。

## 4. 业务与请求规范
1. axios请求统一封装在 src/utils/request.js，所有接口调用必须使用封装实例，禁止直接new axios。
2. Vuex模块划分：modules分user、order，state/mutations/actions严格分层，禁止直接在组件修改state。
3. 所有异步请求必须加try/catch捕获异常，生产环境禁止console.log、debugger代码。

## 5. 目录结构强制要求
src
├── views        # 页面视图
├── components  # 公共组件
├── store       # vuex状态管理
├── api         # 接口请求函数
├── utils       # 工具类、请求封装
├── assets      # 静态资源、样式
├── router      # 路由配置
└── styles      # 全局scss样式

## 6. 注释要求
1. 组件顶部写文件用途注释，methods内每个函数必须写JSDoc注释（入参、返回值、业务作用）。
2. 复杂业务逻辑行内添加中文注释，注释语言全程中文。

三、uni-app（Vue2 版）专属自定义规则示例

# uni-app Vue2 跨端项目 AI 生成规则
## 1. 技术栈约束
1. 底层为Vue2，使用uni原生API，禁止使用浏览器window/document DOM API，禁止DOM操作。
2. UI框架使用 uview-ui v2（Vue2版本），不使用Vue3组件库。
3. 适配微信小程序/H5双端，代码必须兼容两端，生成代码时备注平台差异。

## 2. 样式&单位强制规则
1. 尺寸单位**必须使用rpx**，禁止px固定尺寸；字体最小rpx适配小程序规范。
2. 全局样式写在App.vue，页面私有样式scoped；css兼容小程序样式限制，不使用小众css属性。
3. 如需平台差异化样式，必须使用uni条件编译：
   /* #ifdef H5 */ H5专属样式 /* #endif */
   /* #ifdef MP-WEIXIN */ 微信小程序样式 /* #endif */

## 3. 路由与页面规则（pages.json）
1. 新增页面必须同步修改pages.json注册路径，页面路径层级清晰，tabBar页面严格配置tab栏。
2. 页面跳转统一使用uni.navigateTo/uni.switchTab，禁止原生location.href跳转H5。
3. 页面onLoad接收路由参数，onReady操作节点，onUnload销毁定时器、监听。

## 4. API与跨端规范
1. 网络请求统一封装uni.request，封装token自动携带、请求拦截、响应拦截、统一错误提示。
2. 本地存储只用uni.setStorageSync，不使用localStorage；弹窗只用uni.showToast/uni.showModal。
3. 图片使用uni-image组件，网络图片配置合法域名，优先使用cdn地址。

## 5. 目录规范（uni标准结构）
src
├── pages        # 页面，严格对应pages.json路由
├── components   # 全局公共组件
├── uni_modules  # uni插件目录，不随意修改内部文件
├── api          # 接口请求
├── utils        # 工具函数、时间、加密、公共方法
├── static       # 静态图片资源
├── store        # vuex全局状态
└── common       # 全局样式、常量

## 6. 额外禁止项
1. 禁止生成微信小程序私有wx.xxx API，必须用uni封装API做抹平。
2. v-for循环数组时，key绑定唯一id，不要用index索引。
3. 上传图片使用uni.chooseMedia，适配新旧小程序API。

四、配套项目 ESLint 自定义校验规则（Trae 联动校验）

Trae 规则管控 AI 生成逻辑，配合项目 .eslintrc.js 做实时代码报错校验，Vue2、uni-app 通用配置，安装依赖：

# Vue2 依赖
npm i eslint eslint-plugin-vue@7 babel-eslint eslint-config-prettier eslint-plugin-prettier -D
# uni-app Vue2 额外依赖同上

Vue2 .eslintrc.js 完整配置

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  parser: 'babel-eslint',
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/prettier'
  ],
  plugins: ['vue'],
  rules: {
    // 自定义强制规则
    'no-var': 'error', // 禁止var
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
    // Vue专属规则
    'vue/multi-word-component-names': 'off', // 允许单字组件名
    'vue/order-in-components': 'error', // 强制Options API顺序
    'vue/prop-name-casing': 'error', // props驼峰命名
    'vue/require-default-prop': 'warn', // props必须默认值
    // 格式化规则
    'prettier/prettier': 'warn'
  }
}

uni-app ESLint 额外忽略配置 `.eslintignore`

过滤 uni 插件、编译目录，避免报错：

src/uni_modules/
src/static/
unpackage/
node_modules/
dist/

五、全局个人规则 user_rules.md 通用模板（所有 Vue 项目生效）

# 全局前端编码通用规则
1. 所有代码注释全程中文，函数必须添加JSDoc说明。
2. 包管理器统一使用pnpm，禁止npm/yarn混用。
3. 工具函数做好防抖节流封装，重复逻辑抽离公共utils，禁止代码冗余。
4. 生成代码附带完整使用示例，关键代码增加实现思路说明。
5. 代码写完附带ESLint兼容，不会生成会报校验错误的代码。

六、规则生效与测试方法

保存 project_rules.md 后，直接对话 Trae，让其生成【新增 Vue2 页面】/【新增 uni-app 接口】，AI 会严格按照规则输出代码。
ESLint 校验：在 Trae 编辑器内安装 ESLint 插件，开启保存自动修复，不符合规则代码会标红警告。
优先级：项目规则 > 个人全局规则 > Trae 默认内置规则，项目规则会覆盖全局冲突配置。