---

title: Cursor date: 2024-12-01 10:00:00 background: bg-[#000000] tags: - AI - IDE - Coding - Editor categories: - AI intro: Cursor AI editor cheat sheet with shortcuts, AI features, prompt tips and best practices plugins: - copyCode

Overview

What is Cursor

• AI-powered code editor based on VS Code
• Built-in AI assistant (Claude/GPT-4)
• Supports code completion, chat, editing
• Understands entire codebase context

Core Features

Keyboard Shortcuts

AI Features {.row-span-2}

Editing

Navigation

Multi-Cursor

Search & Replace

Chat Feature

Opening Chat

Cmd/Ctrl + L

Or click the Chat icon in sidebar

@ References {.row-span-2}

File Reference

@filename.ts
Explain what this file does

Symbol Reference

@functionName
What's wrong with this function?

Folder Reference

@src/components
Analyze the code structure in this directory

Documentation Reference

@Docs
Look up React hooks documentation

Web Reference

@Web
Search for latest TypeScript 5.0 features

Git Reference

@Git
What changed in recent commits?

Codebase Reference

@Codebase
Where is user authentication implemented?

Common Chat Prompts

Code Explanation

Explain what this code does and why

Bug Finding

What bugs are in this code? How do I fix them?

Performance

How can I optimize this code for better performance?

Generate Tests

Write unit tests for this function

Add Comments

Add detailed comments to this code

Refactor

Refactor this to follow best practices

Chat Tips

• Select code before opening Chat
• Use @ references for context
• Be specific in your questions
• Use multi-turn conversation to clarify

Cmd K Inline Edit

Basic Usage

1. Select code (or place cursor)
2. Press Cmd/Ctrl + K
3. Type your instruction
4. Review diff and confirm

Common Instructions {.cols-2}

Code Improvement

Refactor

Refactor using clearer variable names

Add Types

Add TypeScript type annotations

Error Handling

Add error handling and edge case checks

Optimize

Optimize for better performance

Simplify

Simplify this code

Code Transformation

Convert to Async

Convert to async/await syntax

Extract Function

Extract this logic into a separate function

Add Validation

Add input validation

Make Reusable

Make this more reusable and generic

Code Generation

Generate at empty line with Cmd/Ctrl + K:

React Component

Create a React component that displays a user profile card
with name, avatar, and bio

Utility Function

Write a function to validate email format
using regex

API Handler

Create an Express route handler for user registration
with validation and error handling

Algorithm

Implement binary search algorithm
with TypeScript generics

Cmd K Tips

• More precise selection = more accurate changes
• Be specific about your goal
• Use Esc to cancel
• Use Cmd/Ctrl + Z to undo

Composer Multi-File

Opening Composer

Cmd/Ctrl + I

Fullscreen mode:

Cmd/Ctrl + Shift + I

Use Cases

• Creating features across multiple files
• Refactoring code across files
• Adding new API endpoints
• Creating components with styles/tests

Example Prompts {.cols-2}

Feature Creation

New Feature

Create a user authentication feature including:
- Login form component
- API route handler
- State management
- Form validation
- Error handling

CRUD Operations

Create a full CRUD API for blog posts:
- Model definition
- API routes (GET, POST, PUT, DELETE)
- Input validation
- Error responses

Code Organization

Component Split

Split this large component into smaller
sub-components, each in its own file:
- Header section
- Content area
- Footer section

Add Tests

Add comprehensive unit tests for all functions
in the src/utils directory using Jest

Migration

Migrate this JavaScript code to TypeScript:
- Add type definitions
- Create interfaces
- Update imports

Composer Tips

• Clearly describe the scope
• Use @ references for related files
• Review all changes before accepting
• You can accept changes partially

Tab Completion

Trigger Methods

• Auto-trigger: Shows while typing
• Manual: Shows after pause

Accepting Completions

Completion Types

• Single line completion
• Multi-line completion
• Function body completion
• Comment completion

Improving Completion Quality

Good Comments

// Calculate days between two dates
// Returns negative if date2 is before date1
function daysBetween(date1, date2) {

Clear Function Signature

function validateEmail(email: string): boolean {

Related Context

const users = await fetchUsers();
// Completion will be more accurate
const activeUsers = users.filter(

Configuration

Model Selection

1. Open Settings (Cmd/Ctrl + ,)
2. Search "model"
3. Select AI model:
   • Claude 3.5 Sonnet (recommended)
   • GPT-4
   • GPT-4 Turbo

Common Settings

Privacy Mode

"cursor.privacy.mode": "enabled"

Autocomplete Delay

"cursor.autocomplete.delay": 200

Trigger Length

"cursor.autocomplete.triggerLength": 2

.cursorrules File

Create .cursorrules in project root:

# Project Standards
- Use TypeScript for all new files
- Follow ESLint rules strictly
- Use functional React components
- Style with Tailwind CSS

# Code Style
- Variables: camelCase
- Components: PascalCase
- Files: kebab-case

# Documentation
- JSDoc comments for functions
- Inline comments for complex logic

# Testing
- Jest for unit tests
- React Testing Library for components
- Minimum 80% coverage

Custom Docs

1. Open Settings
2. Find Docs configuration
3. Add custom documentation URLs
4. Use @Docs in Chat

Prompt Examples

Code Review

@file.ts
Review this file for:
1. Code quality issues
2. Potential bugs
3. Performance problems
4. Security vulnerabilities
5. Suggest improvements

Architecture Analysis

@Codebase
Analyze the project architecture:
- What's the overall structure?
- What are the main modules?
- How do they communicate?
- Any architectural concerns?

Learning Codebase

@src/
I'm new to this project. Explain:
- What does this directory do?
- What are the key files?
- How does data flow through it?

Debugging

This code throws an error:

<error>
TypeError: Cannot read property 'map' of undefined
</error>

Related code:
@component.tsx

How do I fix this?

Feature Planning

I want to add dark mode to this app.
@Codebase

Suggest:
- Which files need changes?
- What's the best approach?
- Any existing patterns to follow?

Refactoring Plan

@component.tsx
This component is 500+ lines.
How should I split it?
- Follow React best practices
- Maintain functionality
- Improve testability

Best Practices

Effective Prompting

1. Provide clear context
2. Specify expected behavior
3. Mention tech stack
4. Include edge cases

Getting Better Results

• Use @ references extensively
• Select relevant code before asking
• Be specific about requirements
• Iterate with follow-up questions

Common Mistakes

• Vague instructions
• Missing context
• Not using @ references
• Accepting without review

Troubleshooting

Inaccurate Completions

• Add more context
• Use type annotations
• Write clear comments
• Reference related files with @

Composer Changes Too Much

• Be more specific about scope
• Execute in smaller steps
• Use @ to limit files

API Rate Limits

• Free: Limited requests
• Pro: More quota
• Consider using local models