重度Cursor用户 最强 Cursor Rules 和 Cursor 配置 mcp 以及最佳实践配置方式

大家好，我是鱼樱！！！最近一直忙项目，赚钱为主！！今天给大家分享一个时下超级有用的文章

关注公众号【鱼樱AI实验室】持续分享更多前端和AI辅助前端编码新知识~~

写点笔记写点生活~写点经验。

在当前环境下，纯前端开发者可以通过技术深化、横向扩展、切入新兴领域以及产品化思维找到突破口。

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

什么是 Cursor Rules

Cursor Rules，中文翻译过来是 Cursor 规则。就是给Cursor制定一系列规则，约束AI生成的代码。

当一条规则被触发后，规则中的内容会被附加到提示词中，为 AI 提供参考，无论是在自动补全、代码生成、重构还是错误修复时都能遵循这些规范。

在 Cursor 当中，支持两种级别的规则：

• 全局规则（User Rules） ：针对所有项目通用的规则
• 项目规则（Project Rules） ：存放于项目目录下的 .cursor/rules 中，只用于约束当前项目。

比如输入 /Generate Cursor Rules 让系统自动生成规则

马上生成对应的规则

Vue 3 + TypeScript Project Rules

Project Structure

src/
├── api/            # API configuration and service calls
├── assets/         # Static assets (images, fonts, etc.)
├── components/     # Reusable components
├── config/         # Global configurations
├── constants/      # System constants
├── directives/     # Custom directives
├── hooks/          # Custom composition hooks
├── layouts/        # Layout components
├── pages/          # Page views
├── router/         # Vue Router configuration
├── store/          # Pinia state management
├── style/          # Global styles and variables
├── types/          # TypeScript types and interfaces
└── utils/          # Utility functions

Coding Standards

Component Structure

• Use the Composition API with <script setup lang="ts"> syntax
• Use PascalCase for component names (e.g., UserProfile.vue)
• Use Single File Components (SFC) structure
• Organize imports by type (Vue core, third-party libraries, internal imports)

<script setup lang="ts">
// Vue core imports
import { ref, computed, onMounted } from 'vue'

// Third-party libraries
import { storeToRefs } from 'pinia'

// Internal imports
import { useUserStore } from '@/store/user'
import type { User } from '@/types/user'

// Props definition
const props = defineProps<{
  userId: string
}>()

// Component logic
</script>

<template>
  <!-- Template content -->
</template>

<style lang="less" scoped>
/* Component styles */
</style>

TypeScript Usage

• Define proper interfaces and types for all data structures
• Use type annotations for function parameters and return types
• Leverage TypeScript's advanced features (generics, utility types, etc.)
• Avoid using any type; use proper typing or unknown when necessary

// Good practice
interface UserData {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}

// Function with proper typing
const fetchUser = async (id: string): Promise<UserData> => {
  // Implementation
}

Composition Hooks

• Name custom hooks with use prefix (e.g., useUserList)
• Keep hooks focused on a single responsibility
• Return reactive data to maintain reactivity in consuming components
• Document hook parameters and return values with JSDoc comments

/**
 * Hook for managing user data
 * @param initialFilter - Initial filter criteria
 * @returns User data and operations
 */
export function useUsers(initialFilter?: UserFilter) {
  const users = ref<User[]>([])
  const isLoading = ref(false)
  const error = ref<Error | null>(null)

  // Implementation

  return {
    users,
    isLoading,
    error,
    fetchUsers,
    createUser,
    updateUser,
    deleteUser
  }
}

State Management (Pinia)

• Create modular stores for different domains
• Use defineStore with the composition API style
• Define proper state types
• Use actions for async operations
• Use getters for derived state

export const useUserStore = defineStore('user', () => {
  // State
  const users = ref<User[]>([])
  const currentUser = ref<User | null>(null)
  const isLoading = ref(false)

  // Getters
  const isAdmin = computed(() => 
    currentUser.value?.role === 'admin'
  )

  // Actions
  async function fetchUsers() {
    isLoading.value = true
    try {
      users.value = await userApi.getAll()
    } catch (error) {
      console.error('Failed to fetch users:', error)
    } finally {
      isLoading.value = false
    }
  }

  return {
    users,
    currentUser,
    isLoading,
    isAdmin,
    fetchUsers
  }
})

API Calls

• Organize API calls by domain/entity
• Use axios or fetch with proper error handling
• Define response and request types
• Implement interceptors for common operations (auth, error handling)

// userApi.ts
import axios from 'axios'
import type { User, CreateUserDTO } from '@/types/user'

const API_URL = '/api/users'

/**
 * Fetches all users
 * @returns List of users
 */
export async function getAll(): Promise<User[]> {
  const response = await axios.get<User[]>(API_URL)
  return response.data
}

/**
 * Creates a new user
 * @param userData - User data to create
 * @returns Created user
 */
export async function create(userData: CreateUserDTO): Promise<User> {
  const response = await axios.post<User>(API_URL, userData)
  return response.data
}

Routing

• Use named routes
• Implement lazy loading for route components
• Use route guards for authentication/authorization
• Group routes by features or domains

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/pages/Home.vue')
  },
  {
    path: '/users',
    name: 'UserList',
    component: () => import('@/pages/users/UserList.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/users/:id',
    name: 'UserDetail',
    component: () => import('@/pages/users/UserDetail.vue'),
    props: true,
    meta: { requiresAuth: true }
  }
]

Style Guidelines

• Use Less for CSS preprocessing
• Follow BEM methodology for class naming
• Use variables for colors, spacing, and typography
• Prefer scoped styles unless global styles are needed

// variables.less
@primary-color: #1890ff;
@text-color: #333;
@spacing-base: 8px;

// Component styles
.user {
  &__header {
    margin-bottom: @spacing-base * 2;
    color: @text-color;
  }

  &__content {
    padding: @spacing-base * 2;
  }
}

Performance Optimization

• Use computed properties for derived values
• Use v-show for frequent toggles, v-if for conditional rendering
• Implement defineAsyncComponent for code splitting
• Use keep-alive for components that should maintain state
• Add key attributes to v-for loops with unique values

Error Handling

• Implement global error handling
• Use try/catch for async operations
• Display user-friendly error messages
• Log errors for debugging purposes

Testing

• Write unit tests for components and hooks
• Write integration tests for critical user flows
• Use Vitest or Jest for unit testing
• Use Testing Library or Cypress for component/e2e testing

ThreeJS Integration

• Separate Three.js logic into dedicated hooks/services
• Clean up Three.js resources when components unmount
• Use ref to access DOM elements for canvas mounting
• Optimize rendering cycles and resource usage

export function useThreeJsScene() {
  const canvasRef = ref<HTMLCanvasElement | null>(null)
  let scene: THREE.Scene | null = null
  let renderer: THREE.WebGLRenderer | null = null
  let camera: THREE.PerspectiveCamera | null = null
  
  onMounted(() => {
    if (!canvasRef.value) return
    
    // Initialize Three.js scene
    scene = new THREE.Scene()
    renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value })
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    
    // Setup scene
    
    // Start animation loop
    animate()
  })
  
  onUnmounted(() => {
    // Clean up resources
    if (renderer) {
      renderer.dispose()
    }
    // Dispose of geometries, materials, textures, etc.
  })
  
  // Animation loop
  function animate() {
    if (!scene || !camera || !renderer) return
    
    requestAnimationFrame(animate)
    // Update scene
    renderer.render(scene, camera)
  }
  
  return {
    canvasRef,
    // Expose methods to manipulate the scene
  }
}

Documentation

• Add JSDoc comments to functions, hooks, and components
• Document component props, events, and slots
• Keep README and other documentation up-to-date
• Document complex business logic and architectural decisions

全局规则

- - 全局规则（User Rules） ‌ ：通过Cursor Settings > Rules > User Rules配置，适用于所有项目，例如强制中文输出或通用编码规范。‌‌‌‌

User Rules是全局性的，适用于用户本地 Cursor 环境下的所有项目 。

它们在 Cursor 的设置中以纯文本格式定义，不支持 .mdc 格式 。

用户规则通常用于设定全局偏好，例如期望 AI 回复的语言风格、语气，或者个人常用的编码习惯和原则。

.mdc 文件格式，是一种轻量级格式，本质上来讲就是一个Markdown文件

项目规则

- - ‌项目规则（Project Rules） ‌ ：存储在.cursor/rules/*.mdc文件中，仅限当前项目生效，支持按文件后缀、路径等条件触发（如.tsx`文件应用React规范）。‌‌

Cursor 支持四种规则类型：

• Always：始终应用规则
• Auto Attached ：当匹配 globs 模式的文件被引用时自动附加规则
• Agent Requested：根据 AI 代理的判断决定是否应用规则，需要提供规则说明
• Manual ：仅在提示中显式使用 @规则名 时附加规则。

如果你想手动调用规则，用 Manual；想自动触发用 Auto Attached；想始终生效用 Always；想让 AI 自己决定是否用，就用 Agent Requested

对应的 mdc 文件下您可以自定义配置各种最佳实践编码（依据偏好，市面规则、官方建议、项目最佳实践等约束）

- - 官方已弃用旧版.cursorrules文件，推荐迁移至.cursor/rules/*.mdc`模块化配置

最佳实践：规则与 Prompt 协作

要充分发挥 Cursor 规则的效果，需要编写简洁、明确的规则并在 Prompt 中正确调用。以下是一些实践建议：

• 规则简洁具体： 保持规则简洁，控制在 300 - 500 行以内是一个不错的建议
• 拆分复杂任务： 将复杂的任务拆分为多个可组合的小规则
• 使用示例与代码片段： 在有帮助的情况下提供具体示例或引用的文件
• 在提示中引用规则： 当需要时，可以在聊天提示中使用 @规则名 来手动应用特定规则。
• 尽可能清晰： 避免模糊的指导。编写规则的方式应像写一份清晰的内部文档
• 及时更新： 当你发现自己在对话中重复强调某个事情时，可以将其编写成一条规则
• 团队协作： 团队内共享同一份规则，定期与团队讨论和更新，确保它们与当前代码最佳实践保持一致。

举例一个Vue3的项目规则

Vue 项目规范

项目概述

本项目基于 Vue 3、Vue Router、typescript、threejs 和 pinia 构建，适用于中大型管理类项目。项目使用 vite 进行脚手架搭建，支持现代前端开发流程。

组件规范

基础规则

• 使用 Composition API：在组件中使用 Vue 3 的 Composition API 来组织逻辑。
• 组件名使用 PascalCase ：所有组件名应使用 PascalCase 格式，例如 UserProfile。
• Props 定义使用 defineProps ：使用 defineProps 来定义组件的 props。
• 事件使用 defineEmits ：使用 defineEmits 来定义和触发组件事件，确保事件名称清晰且具有描述性给上备注。
• **方法名**：使用 jsdoc` 备注好方法用途。
• **创建组件**：使用 script lang="ts" setup 语法less预处理器` 。

目录结构

src/
├── api/        # api配置
├── assets/           # 静态资源
├── components/      # 公共组件
├── config/      # 全局配置
├── constants/      # 系统常量
├── directives/      # 自定义指令
├── hooks/      # 自定义hook
├── layouts/      # 布局
├── pages/            # 页面视图
├── router/            #  路由配置
├── store/            #  pinia状态管理
├── style/            #  样式
├── types/            #  ts类型
└── utils/            #  工具类相关

组合式函数规范

• 以 use 开头命名 ：所有组合式函数应以 use 开头命名，例如 useUserList。
• 一个函数只做一件事：确保每个组合式函数只负责一个功能，避免功能混杂。
• 返回响应式数据：返回值应为响应式数据，以便在组件中直接使用。
• 注意依赖收集：确保在组合式函数中正确收集依赖，以便响应式更新。

性能优化

• 合理使用 computed ：使用 computed 来缓存计算结果，避免不必要的重新计算。
• v-show vs v-if ：在需要频繁切换显示状态时，优先使用 v-show，以减少 DOM 操作。
• 使用 defineAsyncComponent ：对于大型组件，使用 defineAsyncComponent 进行懒加载，减少初始加载时间。
• keep-alive 缓存 ：使用 keep-alive 来缓存不需要频繁销毁的组件，提升性能。

当然其他技术栈项目也是一样的，这个完全取决于您个人习惯结合所属技术栈的最佳实践来配置

举例一个全局 User Rule

# 前端开发最佳实践规范

## 开发环境

- **编辑器**: 使用 VS Code 或 WebStorm，配置一致的代码格式化工具（ESLint + Prettier）
- **Node 版本**: 使用 LTS 版本，项目中使用 `.nvmrc` 锁定版本
- **包管理器**: 优先使用 pnpm > yarn > npm，保持团队一致性
- **Git 规范**: 遵循 Conventional Commits 规范，使用 husky + lint-staged 强制代码质量

## 代码规范

### 通用规范

- **命名规范**
  - 变量/函数: 使用小驼峰命名法 (camelCase)
  - 类/组件: 使用大驼峰命名法 (PascalCase)
  - 常量: 使用大写下划线 (UPPER_SNAKE_CASE)
  - CSS 类名: 使用 BEM 命名法或项目约定的命名规范

- **注释规范**
  - 使用 JSDoc 风格为函数、组件添加注释
  - 复杂逻辑必须添加注释说明
  - 临时代码使用 `// TODO:` 标记，技术债务使用 `// FIXME:` 标记

- **文件组织**
  - 单一职责原则：一个文件只做一件事
  - 按功能/模块组织代码，而非按文件类型
  - 导入顺序：第三方库 > 内部模块 > 相对路径模块

### Vue 项目规范

- **组件设计**
  - 使用 Composition API 并遵循 `<script setup>` 语法
  - 组件名使用大驼峰 (PascalCase)
  - 基础组件使用 `Base` 前缀 (如 `BaseButton.vue`)
  - 单例组件使用 `The` 前缀 (如 `TheHeader.vue`)
  - 紧密耦合的子组件使用父组件名作为前缀 (如 `UserListItem.vue`)

- **Composition API 最佳实践**
  - 优先使用 `ref`/`reactive` 而非 `data` 选项
  - 使用 `defineProps`/`defineEmits` 定义 props 和事件
  - 将可复用逻辑提取到 composables (自定义 hooks) 中
  - 自定义 hooks 命名以 `use` 开头 (如 `useUserData`)

- **Props 规范**
  - 使用 TypeScript 为 props 添加类型定义
  - 为 props 提供默认值和验证
  - Props 命名使用小驼峰 (camelCase)

- **事件规范**
  - 事件名称使用 kebab-case (如 `@update-value`)
  - 提供详细的事件参数类型

- **模板规范**
  - 保持模板简洁，复杂逻辑移至计算属性或方法
  - v-for 必须搭配 key 使用
  - 避免在模板中使用复杂表达式

### React 项目规范

- **组件设计**
  - 函数组件 + Hooks 优先于类组件
  - 使用 PascalCase 命名组件和文件
  - 将 JSX 与逻辑分离

- **Hooks 最佳实践**
  - 遵循 Hooks 规则（只在顶层调用，只在函数组件中使用）
  - 自定义 hooks 命名以 `use` 开头
  - 使用 `useMemo`/`useCallback` 优化性能
  - 不要过度使用 `useEffect`

- **Props 规范**
  - 使用 TypeScript 为 props 添加类型定义
  - 使用解构赋值接收 props
  - 为非必须的 props 提供默认值

### TypeScript 规范

- **类型定义**
  - 为所有变量、函数参数和返回值定义类型
  - 避免使用 `any`，必要时使用 `unknown`
  - 利用泛型提高代码复用性
  - 使用接口 (interface) 定义对象结构

- **类型文件组织**
  - 共享类型定义放在 `types` 目录下
  - 模块特定的类型与模块代码放在一起
  - 使用 barrel 文件 (index.ts) 统一导出

## 性能优化

- **首屏加载优化**
  - 路由懒加载
  - 组件按需加载
  - 第三方库按需引入
  - 关键 CSS 内联

- **运行时优化**
  - 避免不必要的重渲染
  - 使用 `computed`/`useMemo` 缓存计算结果
  - 列表虚拟化处理大数据
  - 防抖/节流处理频繁事件

- **资源优化**
  - 图片优化（WebP 格式，响应式图片）
  - SVG 图标优先
  - 使用现代构建工具（Vite, Webpack 5）
  - 合理分包，避免主包过大

## 工程化实践

- **构建流程**
  - 使用现代化构建工具 (Vite 优先)
  - 合理配置构建环境变量
  - 优化构建产物 (代码分割，Tree-shaking)

- **测试策略**
  - 单元测试：组件、工具函数 (Vitest/Jest)
  - 集成测试：关键流程 (Cypress/Playwright)
  - 覆盖率目标：关键业务逻辑 > 80%

- **CI/CD**
  - 提交前执行 lint, format, test
  - 主分支合并前进行自动化测试
  - 自动化部署流程

- **监控与分析**
  - 前端性能监控
  - 错误捕获与上报
  - 用户行为分析

## 项目文档

- **README**
  - 项目简介与功能概述
  - 环境要求与安装步骤
  - 开发指南与命令说明

- **组件文档**
  - 使用 Storybook 文档化组件
  - 为每个组件提供使用示例
  - 明确标注 Props, Events, Slots

- **API 文档**
  - 记录所有 API 接口
  - 请求/响应数据结构
  - 错误码说明

## 安全实践

- **输入验证**
  - 前后端同时验证用户输入
  - 防止 XSS 攻击
  - 避免直接使用 innerHTML

- **认证与授权**
  - 安全存储敏感信息 (如 token)
  - CSRF 防护
  - 权限控制

- **数据处理**
  - 敏感数据脱敏展示
  - 避免在前端存储敏感信息
  - 加密传输敏感数据

## 可访问性 (A11Y)

- **基础要求**
  - 语义化 HTML 结构
  - 键盘可访问性
  - 合适的色彩对比度

- **ARIA 规范**
  - 为非语义元素添加 ARIA 属性
  - 为动态内容提供适当的 ARIA 状态
  - 使用 aria-label 为视觉元素提供描述

## 国际化 (i18n)

- **文本管理**
  - 使用键值对管理文本资源
  - 避免硬编码文本
  - 考虑文本长度变化的布局影响

- **本地化考量**
  - 日期/时间/货币格式
  - 排序规则
  - 文化差异

## 团队协作

- **代码审查**
  - 关注代码质量与最佳实践
  - 核对业务逻辑实现
  - 促进知识共享

- **知识管理**
  - 维护团队知识库
  - 记录关键决策与设计方案
  - 定期技术分享

- **持续学习**
  - 跟踪前端技术发展
  - 尝试新技术，评估应用价值
  - 参与开源项目或技术社区 

当然这个也是依据用户个人喜好以及市面标准结合最佳实践来配置的，没有绝度值说法

接下来聊聊 mcp 这个事情和概念

Cursor MCP

‌Cursor MCP 指集成在 Cursor 代码编辑器中的模型上下文协议（Model Context Protocol, MCP），该协议由 Anthropic 推出，旨在实现大语言模型与外部工具的无缝交互‌。通过 MCP，Cursor 能够突破传统代码补全限制，直接调用本地和云端工具完成复杂操作，例如文件转换、数据抓取、版本控制等。‌‌

MCP 的核心功能与价值‌

---

‌双向连接机制‌：

---

支持 LLM 主动调用本地开发工具（如 Git、Node.js 模块）和第三方 API（如 Replicate 图像生成）。‌‌

允许工具服务向模型推送实时反馈数据（如数据库查询结果、系统命令执行日志）。‌‌

---

‌在 Cursor 中的典型应用场景‌：

---

文档自动化处理：通过调用 Markdown2PDF 工具将对话记录转为 PDF 文件。‌‌

依赖管理：实时查询项目依赖包最新版本并提供升级建议。‌‌

跨平台操作：直接执行 GitHub 命令或调用 Blender 进行 3D 建模。‌‌

---

‌技术实现方式‌：

---

通信协议：支持 SSE（Server-Sent Events）和 stdio（标准输入输出）两种模式。‌‌

配置流程：需在 Cursor 设置中添加 MCP 服务器地址或本地可执行命令。‌‌

‌开发者生态价值‌：

---

标准化接口降低接入成本，开发者可快速发布 npm 包形式的 MCP 服务组件。‌‌

通过协议层安全机制（如沙盒执行环境）保障敏感操作可控性。‌‌

接下来说说 MCP 是什么

MCP是一种开放协议，它标准化了应用程序向LLM提供上下文的方式。可以将 MCP 视为 AI 应用程序的 USB-C 端口。正如 USB-C 提供了一种将设备连接到各种外围设备和配件的标准化方式一样，MCP 提供了一种将 AI 模型连接到不同数据源和工具的标准化方式。（MCP的全称是Model Context Protocol，是一个开放协议，它使 LLM 应用与外部数据源和工具之间的无缝集成成为可能。无论你是构建 AI 驱动的 IDE、改善 chat 交互，还是构建自定义的 AI 工作流，MCP 提供了一种标准化的方式，将 LLM 与它们所需的上下文连接起来。）

MCP 是 Claude (Anthropic) 主导发布的一个开放的、通用的、有共识的协议标准。

Function Calling、AI Agent、MCP 这三者之间有什么区别？

Function Calling

Function Calling 指的是 AI 模型根据上下文自动执行函数的机制。 Function Calling 充当了 AI 模型与外部系统之间的桥梁，不同的模型有不同的 Function Calling 实现，代码集成的方式也不一样。由不同的 AI 模型平台来定义和实现。

Model Context Protocol (MCP)

MCP 是一个标准协议，如同电子设备的 Type C 协议（可以充电也可以传输数据），使 AI 模型能够与不同的 API 和数据源无缝交互。 MCP 旨在替换碎片化的 Agent 代码集成，从而使 AI 系统更可靠，更有效。通过建立通用标准，服务商可以基于协议来推出它们自己服务的 AI 能力，从而支持开发者更快地构建更强大的 AI 应用。开发者也不需要重复造轮子，通过开源项目可以建立强大的 AI Agent 生态。 MCP 可以在不同的应用/服务之间保持上下文，从而增强整体自主执行任务的能力。

AI Agent

AI Agent 是一个智能系统，它可以自主运行以实现特定目标。传统的 AI 聊天仅提供建议或者需要手动执行任务，AI Agent 则可以分析具体情况，做出决策，并自行采取行动。 AI Agent 可以利用 MCP 提供的功能描述来理解更多的上下文，并在各种平台/服务自动执行任务。

推荐 mcp 网站

smithery-ai

mcp.so

MCP官方服务

cursor mcp

cursor mcp tools

Cursor 配置mcp 注意我的是1.x目前最新版本

检查MCP Server状态

在上述状态配置完成后，你可以退回到Cursor的MCP界面查看MCP状态。

每个MCP服务名称左侧的灯代表MCP的状态，红灯表示不可用，黄灯表示正在链接中，绿灯表示可用，无颜色表示你关闭了对应的MCP服务；

Cursor 1.0 优势

BugBot 自动审查 PR 自动分析 GitHub Pull Request，定位代码问题，自动生成评论建议。点击"Fix in Cursor"直接跳转一键修复！

后台智能体全量开放 支持代码补全、文件分析、环境配置，彻底后台托管，让你专注写逻辑！

Jupyter Notebook 原生支持 在编辑器中直接操作 Notebook 单元格（目前支持 Claude Sonnet），数据科学党狂喜！

项目级记忆功能（Memories） 让 Cursor 记住你的项目历史，上下文理解更智能！

MCP一键安装 自动配置开发环境，OAuth 授权一气呵成，0配置上线！

UI 全面升级 仪表盘、图表、统计数据一应俱全，对话界面支持 Mermaid 图、Markdown 表格。

最后 cursor白嫖&付费

个人使用的是商业号。。。支持所有模型所有cursor版本和白嫖的对比体验感拉满的。。

写在最后

关于白嫖和付费完全取决于个人需要干什么，学什么，用在哪了。。。没有是非对错，但是尊重技术成果，总喜欢白嫖的思维和习惯总是不好的，滋养了白嫖思维容易捡了芝麻丢了西瓜。。最后请各位技术大咖拒绝负能拒绝不学无术拒绝思想不端正和心态爆炸的以及嘴喷人一起学习探讨，所有有价值含量的技术适当收费！！！