Cursor Rules怎么配置前端项目规范？-人工智能-PHP中文网

必须在项目根目录配置.cursorrules文件，否则cursor ai无法识别vue3技术栈、目录结构和编码规范，生成代码将与项目脱节；需定义框架版本、目录结构、命名规则、typescript/composition api约束及代码风格，并执行eslint自动修复。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

cursor rules怎么配置前端项目规范？

要让Cursor AI在Vue3项目中自动生成符合团队规范的代码，必须在项目根目录配置.cursorrules文件，否则AI无法识别技术栈、目录结构和编码习惯，生成的代码大概率与项目实际脱节。

创建.cursorrules文件并写入基础技术栈

在项目根目录新建纯文本文件，命名为 .cursorrules（注意开头是英文点号，无后缀）。

用任意编辑器打开，粘贴以下内容（根据你真实项目调整框架版本和库名）：

# 技术栈约束
frameworks:
  - vue: 3.4+
  - ui: element-plus@2.4+
languages:
  - typescript: '>=5.1'
features:
  - composition-api: required
  - script-setup: required

这一步必须做，否则AI会默认按通用JavaScript逻辑补全，比如把defineProps()写成Options API风格的props: {}，直接导致编译报错。

定义前端目录结构与文件命名规则

在.cursorrules文件末尾追加结构声明，明确告诉AI“你的src下每个文件夹是干什么的”：

# 目录结构
src/
  views/: 页面级组件，文件名小写中划线，如 user-list.vue
  components/: 可复用原子组件，文件名PascalCase，如 UserProfileCard.vue
  composables/: 组合式函数，必须以use开头，如 useTablePagination.ts
  stores/: Pinia store，文件名小写中划线，如 user-store.ts
  api/: 请求封装，按模块分组，如 api/user/index.ts
  router/: 路由配置，仅包含 router/index.ts

⚠️ 注意：views/ 和 components/ 的命名规则完全相反——前者强制小写中划线（便于URL映射），后者强制PascalCase（Vue组件注册要求）。AI若混淆这两条，生成的组件名会触发Vue运行时警告。

嵌入TypeScript与Composition API硬性规范

方法一：直接写进.cursorrules主文件

## TypeScript规范
- 禁止使用 any，必须用 unknown + 类型守卫或具体接口
- 所有 defineProps() 必须带泛型参数，如 defineProps()
- 组件导出必须标注类型：export default defineComponent({}) as ComponentPublicInstance

面向设计的AXUI前端框架表单

面向设计的AXUI前端框架表单是一款包含表格、列表、弹窗等的AXUI前端框架表单下载。

下载

方法二：为.vue文件单独设规则（推荐）

在项目根目录新建 .cursor/rules/vue-component.rules 文件，内容为：

filetype: .vue
rules:
- 模板中所有绑定属性必须用双引号，如 :class="xxx"
- <script setup> 中必须用 import type { XXX } from 'xxx' 声明类型<br> - 响应式变量必须用 ref() 或 reactive() 显式声明，禁止 let xxx = {}</script>

这种拆分方式能让AI对.vue文件的理解精度提升，尤其避免它把ref()误写成reactive()后导致模板响应失效。