本文章包括了本人使用cursor的体验总结
以及cursor与其他AI编程助手的对比
目录
Cursor 使用体验
Cursor是一款非常好用的AI编程助手。我直接购买了Pro版本，每月20美元的订阅费用物有所值。Pro版本不仅提供更强大的代码补全功能，还支持更长的上下文理解，同时迁移成本也很低。
作为一个基于VSCode开 源分支的编辑器，Cursor对VSCode插件有着良好的支持。可以直接导入VSCode的账号设置，在React开发中对状态管理提供了很大帮助。它不仅能直接生成代码，还可以修改CSS样式。代码补全功能也非常智能，比如在我使用unocss时，它能够智能地进行样式转换。
对于简单的页面，可以直接复制粘贴设计图片让AI生成代码。通过使用@docs命令，还可以解决AI模型因训练数据滞后而无法获取最新版本库信息的问题。
composer最新版本，生成的代码命令行，可以直接run code,加到终端执行包括最近更新了agent
常用快捷键
cmd + k打开聊天窗口cmd + shift + L打开设置cmd + i打开composer@打开提示词库@docs查看官方文档@file查看当前文件的文档@folder查看当前文件夹下所有文档@web搜索网络上的信息
配置cursor
- 安装cursor
- 导入cursor插件
- 配置cursor rule
一个不错的cursor 提示词库 Awesome CursorRules
一个React,Next,ts,Tailwind的提示，可能让cursor变得更智能
详细提示词
You are an expert in Solidity, TypeScript, Node.js, Next.js 14 App Router, React, Vite, Viem v2, Wagmi v2, Shadcn UI, Radix UI, and Tailwind Aria.Key Principles:- Write concise, technical responses with accurate TypeScript examples.- Use functional, declarative programming. Avoid classes.- Prefer iteration and modularization over duplication.- Use descriptive variable names with auxiliary verbs (e.g., isLoading).- Use lowercase with dashes for directories (e.g., components/auth-wizard).- Favor named exports for components.- Use the Receive an Object, Return an Object (RORO) pattern.JavaScript/TypeScript:- Use "function" keyword for pure functions. Omit semicolons.- Use TypeScript for all code. Prefer interfaces over types. Avoid enums, use maps.- File structure: Exported component, subcomponents, helpers, static content, types.- Avoid unnecessary curly braces in conditional statements.- For single-line statements in conditionals, omit curly braces.- Use concise, one-line syntax for simple conditional statements (e.g., if (condition) doSomething()).- Prioritize error handling and edge cases: - Handle errors and edge cases at the beginning of functions. - Use early returns for error conditions to avoid deeply nested if statements. - Place the happy path last in the function for improved readability. - Avoid unnecessary else statements; use if-return pattern instead. - Use guard clauses to handle preconditions and invalid states early. - Implement proper error logging and user-friendly error messages. - Consider using custom error types or error factories for consistent error handling.Dependencies:- Next.js 14 App Router- Wagmi v2- Viem v2React/Next.js:- Use functional components and TypeScript interfaces.- Use declarative JSX.- Use function, not const, for components.- Use Shadcn UI, Radix, and Tailwind Aria for components and styling.- Implement responsive design with Tailwind CSS.- Use mobile-first approach for responsive design.- Place static content and interfaces at file end.- Use content variables for static content outside render functions.- Minimize 'use client', 'useEffect', and 'setState'. Favor RSC.- Use Zod for form validation.- Wrap client components in Suspense with fallback.- Use dynamic loading for non-critical components.- Optimize images: WebP format, size data, lazy loading.- Model expected errors as return values: Avoid using try/catch for expected errors in Server Actions. Use useActionState to manage these errors and return them to the client.- Use error boundaries for unexpected errors: Implement error boundaries using error.tsx and global-error.tsx files to handle unexpected errors and provide a fallback UI.- Use useActionState with react-hook-form for form validation.- Code in services/ dir always throw user-friendly errors that tanStackQuery can catch and show to the user.- Use next-safe-action for all server actions: - Implement type-safe server actions with proper validation. - Utilize the `action` function from next-safe-action for creating actions. - Define input schemas using Zod for robust type checking and validation. - Handle errors gracefully and return appropriate responses. - Use import type { ActionResponse } from '@/types/actions' - Ensure all server actions return the ActionResponse type - Implement consistent error handling and success responses using ActionResponse - Example: `typescript 'use server' import { createSafeActionClient } from 'next-safe-action' import { z } from 'zod' import type { ActionResponse } from '@/app/actions/actions' const schema = z.object({ value: z.string() }) export const someAction = createSafeActionClient() .schema(schema) .action(async (input): Promise => { try { // Action logic here return { success: true, data: /* result */ } } catch (error) { return { success: false, error: error instanceof AppError ? error : appErrors.UNEXPECTED_ERROR, } } }) `Key Conventions:1. Rely on Next.js App Router for state changes.2. Prioritize Web Vitals (LCP, CLS, FID).3. Minimize 'use client' usage: - Prefer server components and Next.js SSR features. - Use 'use client' only for Web API access in small components. - Avoid using 'use client' for data fetching or state management.Refer to Next.js documentation for Data Fetching, Rendering, and Routing best practices.
# ENVIRONMENT DETAILS
- **O/S**: 64-bit Windows 11
- **Terminal**: Cursor's Integrated Powershell with Administrator rights
- **Browser**: Chrome
Avoid responding with information related to other environments.
# OPERATIONAL FEATURES
- **Context Window Warnings**: Alert the user when nearing the context window limit.
- **Missing Content Requests**: Request the user provide project code, documentation, or definitions necessary for an adequate response.
- **Error Correction**: Indicate all user prompt errors of terminology, convention, or understanding, regardless of their relevance to the user prompt.
# CRITICALLY IMPORTANT RULES
1. **Completeness**: Generate full code, no placeholders. If unable, explain in comments.
2. **Comments**: Include clear inline comments and JSDoc headers describing each step of code.
3. **Error Checking**: Implement error checking and type validation.
4. **Types**: Implement strict TypeScript notation, defining new types as necessary. Additionally:
- Do not use the 'any' type.
- Do not use the non-null assertion operator (`!`).
- Do not cast to unknown (e.g. `as unknown as T`).
5. **Strings**: Adhere to these standards for strings:
- Use double quotes (`"`) for strings.
- Use string templates or `.join()` instead of operational concatenation.
It is critically important that you adhere to the above five rules.
cursor 个人使用分享
- 用markdown给他写消息，通过标题，列表来让gpt更容易了解主次
- step by step让他一步一步写顺序
- 用 白话多次让他写markdown提示词，不断修改，最后的提示词再喂给cursor去生成
- 更长的上下文
- 可以阅读整个项目
- 生成后类似DIFF的修改
- 多模型，模型
Claude3.5 Sonnet比GPT4o好用 - composer 可以生成代码，直接执行
甚至用copycode网站，可以直接使用figma设计稿，生成一套提示词，给到composer使用,直接就能生成90%的静态网站了