Cursor版本
当前Cursor版本：0.45.14
Project Rules简介
Project Rules 是 Cursor 0.45 版本新增的功能，和 .cursorrules 一样是项目特定的规则，有助于人工智能理解并遵循项目的约定。
为什么要有Project Rules
在思考这个问题前，我们可以先回想一下 .cursorrules 存在的问题，有哪些痛点是 .cursorrules 解决不了的：
- 单文件限制：实际项目中规则通常写在一起，当规则多时 .cursorrules 文件会变得异常庞大、难以维护
- 规则冲突：我们可以设置全局Rules for AI，项目中我们可以设置项目Rules，两者极易发生冲突且覆盖规则不可控，会导致很多意想不到的结果
- 功能单一：实际开发过程中，项目通常采用前后端分离，一个项目中不可能只有一种语言，.cursorrules 文件很难处理多种语言规则
- 不适用团队开发：在团队中共同维护一套规则是比较困难的，大量规则写到一起，维护成本较高且容易引起规冲突
再来看一下Project Rules的功能：
- 多文件管理：可以创建多个规则文件，分类管理
- glob 匹配模式：使用glob模式匹配指定文件或者目录使用的规则
- 规则继承：支持规则文件之间的引用作为上下文
- 自动加载：当匹配到文件自动加载规则，规则变更后自动更新生效
- 版本控制：精细灵活的规则模式方便团队协作
其次Cursor官方宣布将来会废弃 .cursorrules，主推Project Rules，提前学习一下以备不时之需。
迁移.cursorrules
从老项目迁移 .cursorrules 也很简单，只需将 .cursorrules 文件名修改为 文件名.mdc，然后移动到 .cursor/rules 目录下即可
shell
$ mv .cursorrules .cursor/rules/pre-rules.mdc新建Project Rules
创建Project Rules有两种方式，一种是 可视化方式，一种是 手动创建
可视化方式
进入Cursor设置页面，点击【General】找到【Project Rules]
点击【Add new rule】，输入规则文件名称
创建完成就可以看到在项目根目录多了一个 .cursor/rules 目录，目录是刚刚创建的 vue3-rules.mdc 文件
手动创建
在项目根目录创建一个 .cursor/rules 目录（注意是两级目录）或者使用命令行创建
shell
$ mkdir -p .cursor/rules在 .cursor/rules 目录下新建 typescript-rules.mdc 文件，内容如下：
yaml
---
description: TypeScript coding standards
globs: **/*.ts,**/*.tsx
priority: 1
---
# TypeScript Coding Standards
## 基本规范
- 使用 `const` 而不是 `let` 来声明常量
- 使用 `const` 而不是 `let` 来声明变量
- 使用2个空格缩进
- 显式声明函数返回类型
- 使用单引号
- 使用箭头函数
- 使用解构赋值
- 避免使用 `any` 类型Project Rules规则格式
mdc规则
新规则文件采用 .mdc 格式，主要由两部分组成:
- YAML格式头部配置
- name：项目规则名称
- description：项目规则描述
- priority：项目规则优先级，默认优先级为0，数字越大优先级越高，相同优先级按文件名排序
- globs：匹配规则
- when：规则生效条件，满足条件的规则才会生效
- Markdown或者XML格式规则内容
glob规则
常用的 glob 语法规则:
- *：匹配任意文件名
- **：匹配任意目录深度
- !：排除匹配
- {}：组合匹配
glob的基本语法非常灵活可以任意组合，我们可以组合出更多满足日常需求的规则
bash
# 多内容匹配
**/*.{ts, tsx, js}
# 匹配所有 .ts 文件
**/*.ts
# 排除测试文件
!**/*.test.ts
# 排除构建目录
!**/dist/**
!**/build/**
# 匹配特定目录
src/components/**/*.tsx规则继承复用
Project Rules的规则继承、复用也很简单，就是在一个 .mdc 文件中通过 @file 引入其他规则作为上下文使用
条件规则
Project Rules支持根据环境变量设置规则：
yaml
---
name: develop-rules
description: Development environment rules
when: ${NODE_ENV} === 'development'
---Project Rules分类管理？
看到有小伙伴将Project Rules做了分类管理，如下：
arduino
.cursor/rules
├─ common
│ └─ base.mdc // 通用规则
├─ frontend
│ ├─ vue3-rules.mdc // 前端vue3规则
│ └─ typescript-rules.mdc // 前端ts规则
└─ styles
└─ less.mdc // 样式less规则 经本人测试该方式不会被系统识别会导致Project Rules失效，Cursor该版本不建议做Project Rules分类管理。
使用Project Rules
在Chat中使用
通常Project Rules是不用手动调用的，当Project Rules不生效时，可以考虑在Chat中Project Rules可以作为上下文引入使用
|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| |
|
在Composer中使用
同样当Project Rules不生效时，可以考虑在Chat中Project Rules可以作为上下文引入使用
官方mdc
官网地址：cursor.directory/generate
cursor.directory提供了生成Project Rules的功能，只需按提示上传文件即可
最佳实践案例
以下几个规则案例来自：article.juejin.cn/post/747104...
React规则
yaml
---
name: react-rules
description: React project best practices and coding standards
globs:
- 'src/**/*.tsx'
- 'src/**/*.jsx'
- 'src/**/*.ts'
priority: 2
---
# React 项目规范
## 组件规范
### 基础规则
- 使用函数组件 + Hooks 模式
- 组件文件使用 .tsx 扩展名
- 组件名使用 PascalCase 命名
- 文件名与组件名保持一致
### 目录结构
src/
├── components/ # 通用组件
├── pages/ # 页面组件
├── hooks/ # 自定义 hooks
├── utils/ # 工具函数
├── services/ # API 服务
├── types/ # TypeScript 类型
└── styles/ # 样式文件
### Hooks 使用规范
- 自定义 Hook 以 `use` 开头
- 避免在循环/条件语句中使用 Hooks
- 合理使用 useMemo 和 useCallback
- 使用 useContext 管理全局状态
### 性能优化
- 合理拆分组件
- 使用 React.memo 避免不必要渲染
- 使用 React.lazy 实现代码分割
- 图片使用 next/image 优化
### TypeScript 集成
- 为 Props 定义接口
- 使用 FC 类型声明组件
- 避免使用 any
- 合理使用泛型
## 状态管理
- 小型项目使用 Context + useReducer
- 大型项目推荐使用 Redux Toolkit
- 遵循不可变数据原则
- 合理划分 state 结构Vue规则
yaml
---
name: vue-rules
description: Vue.js project best practices and coding standards
globs:
- "src/**/*.vue"
- "src/**/*.ts"
priority: 2
---
# Vue 项目规范
## 组件规范
### 基础规则
- 使用 Composition API
- 组件名使用 PascalCase
- Props 定义使用 defineProps
- 事件使用 defineEmits
### 目录结构
src/
├── components/ # 通用组件
├── views/ # 页面视图
├── composables/ # 组合式函数
├── utils/ # 工具函数
├── api/ # API 接口
├── types/ # TypeScript 类型
└── assets/ # 静态资源
### 组合式函数规范
- 以 `use` 开头命名
- 一个函数只做一件事
- 返回响应式数据
- 注意依赖收集
### 性能优化
- 合理使用 computed
- v-show vs v-if
- 使用 defineAsyncComponent
- keep-alive 缓存
### TypeScript 集成
- 使用 defineComponent
- Props 类型声明
- 组件实例类型
- 响应式类型
## 状态管理
- 小型项目使用 provide/inject
- 大型项目使用 Pinia
- 模块化状态管理
- 合理使用 storeToRefsStyles规则
less
---
name: style-rules
description: CSS/LESS/SCSS styling best practices
globs:
- 'src/**/*.css'
- 'src/**/*.less'
- 'src/**/*.scss'
- 'src/**/*.module.*'
priority: 1
---
# 样式规范
## 命名规范
### BEM 命名
- Block: 独立实体
- Element: 使用双下划线 \_\_
- Modifier: 使用双横线 --
.block {}
.block\_\_element {}
.block--modifier {}
### CSS Modules
- 文件名使用 .module.css
- 类名使用小驼峰
- 避免全局样式
- 合理使用组合
## 目录结构
styles/
├── global/ # 全局样式
├── themes/ # 主题文件
├── variables/ # 变量定义
├── mixins/ # 混入
└── components/ # 组件样式
## 响应式设计
- 使用相对单位
- 移动优先原则
- 合理使用媒体查询
- 避免固定宽度
### 断点设置
@screen-xs: 480px;
@screen-sm: 576px;
@screen-md: 768px;
@screen-lg: 992px;
@screen-xl: 1200px;
## 性能优化
- 避免深层嵌套
- 合理使用选择器
- 压缩和合并
- CSS 代码分割
## 主题定制
- 使用 CSS 变量
- 设计 Token 系统
- 暗黑模式支持
- 主题切换方案
## 最佳实践
- 避免 !important
- 模块化样式
- 注释规范
- 代码复用参考
article.juejin.cn/post/747104...
友情提示
见原文：【Cursor】Cursor中的Project Rules是什么？
本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。