重度使用Cursor的你，必看！最强Cursor规则和最佳配置实践大揭秘！

项目开发中的实用小技巧

最近我一直在忙项目，对我来说，赚钱是最重要的！今天想和大家聊聊一些目前特别实用的内容。

我会记录一些笔记，分享生活中的点滴和经验。

你可能感兴趣：Cursor 再次调价，包月套餐的美好时光真的要告别了吗？

在现在这种环境下，前端开发者可以通过深入技术、扩展技能、探索新领域和培养产品思维来找到新的机会。

Cursor 规则是什么呢？

Cursor 规则，简单来说就是为 Cursor 制定一些规范，帮助约束AI生成的代码。

当某条规则被触发时，它的内容会被自动加入到提示词中，让AI在自动补全、生成代码、重构或修复错误时都能遵循这些规定。
Cursor 规则分为两种：

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

比如你可以输入 /Generate Cursor Rules 来让系统自动生成规则，

这样就能迅速生成相应的规则了。

Vue 3 + TypeScript 项目的规则

项目结构

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

编码标准
组件结构

• 使用 语法的组合式 API
• 组件名称用 PascalCase（例如：UserProfile.vue）
• 采用单文件组件（SFC）结构
• 按类型组织导入（Vue核心、第三方库、内部导入）

// 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()

// Component logic



  



/* Component styles */

TypeScript 使用

• 为所有数据结构定义合适的接口和类型
• 为函数参数和返回值添加类型注释
• 利用 TypeScript 的高级特性（泛型、工具类型等）
• 尽量避免使用 any 类型；必要时请使用合适的类型或 unknown

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

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

组合钩子

• 自定义钩子命名时加上 use 前缀（例如：useUserList）
• 保持钩子专注于单一职责
• 返回响应式数据以维持消费组件的响应性
• 用 JSDoc 注释记录钩子的参数和返回值

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

  // Implementation

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

状态管理（Pinia）

• 为不同领域创建模块化的 store
• 使用组合式 API 风格的 defineStore
• 定义合适的状态类型
• 使用 actions 进行异步操作
• 使用 getters 获取派生状态

export const useUserStore = defineStore('user', () => {
  // State
  const users = ref([])
  const currentUser = ref(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 调用

• 按领域/实体组织 API 调用
• 使用 axios 或 fetch 并做好错误处理
• 定义请求和响应的类型
• 实现拦截器以处理常见操作（认证、错误处理）

 // 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 {
  const response = await axios.get(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 {
  const response = await axios.post(API_URL, userData)
  return response.data
}

路由

• 使用命名路由
• 为路由组件实现懒加载
• 使用路由守卫进行认证/授权
• 按功能或领域对路由进行分组

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 }
  }
]

样式指南

• 使用 Less 进行 CSS 预处理
• 遵循 BEM 方法论命名类
• 使用变量管理颜色、间距和排版
• 除非必要，优先使用局部样式

// 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;
  }
}

性能优化

• 使用 computed 属性来获取派生值
• 使用 v-show 处理频繁切换，使用 v-if 进行条件渲染
• 实现 defineAsyncComponent 进行代码分割
• 对需要保持状态的组件使用 keep-alive
• 为 v-for 循环添加唯一值的 key 属性

错误处理

• 实现全局错误处理
• 对异步操作使用 try/catch
• 展示用户友好的错误消息
• 记录错误以便调试

测试

• 为组件和钩子编写单元测试
• 为关键用户流程编写集成测试
• 使用 Vitest 或 Jest 进行单元测试
• 使用 Testing Library 或 Cypress 进行组件/e2e 测试

ThreeJS 集成

• 将 Three.js 逻辑分离到专用钩子/服务中
• 当组件卸载时清理 Three.js 资源
• 使用 ref 访问 DOM 元素以进行画布挂载
• 优化渲染周期和资源使用

export function useThreeJsScene() {
  const canvasRef = ref(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
  }
}

文档

• 为函数、钩子和组件添加 JSDoc 注释
• 记录组件的 props、事件和插槽
• 保持 README 和其他文档的更新
• 记录复杂的业务逻辑和架构决策

全局规则

轻松上手 Cursor 的用户规则和 MCP 概念

你知道吗？在 Cursor 中，用户规则可以通过设置来配置，适用于所有项目，比如你想强制输出中文或者制定一些通用的编码规范。这些用户规则是全局性的，可以在任何地方的 Cursor 环境中使用。

不过要注意，这些规则以纯文本的形式定义，不支持 .mdc 格式。一般来说，它们用于设定一些全局偏好，比如你希望 AI 回复时的语言风格、语气，或者是你个人常用的编码习惯。

说到 .mdc 文件格式，它其实就是一种轻量级的 Markdown 文件格式。

如果你想设置项目规则，可以在 <a href="https://link.juejin.cn/?target=">- - ‌项目规则（Project Rules） ‌：存储在.cursor 中找到相关信息，这些规则仅限于当前项目生效，并且可以根据文件后缀、路径等条件来触发，比如说在 .tsx 文件中应用 React 的规范。