Cursor IDE Cheatsheet

# Cursor IDE
- Code editor built on VSCode with AI capabilities
- Powered by Claude and GPT models
- Supports all VSCode extensions
- Available for macOS, Windows, and Linux
- Free to use, Pro version available with additional features

# Key Features
- AI-powered code completion and generation
- Chat with AI about your code
- Edit code using natural language commands
- Explain code functionality
- Fix bugs and optimize code
- Generate documentation
- Convert between programming languages
- Supports many programming languages and frameworks

# Download & Installation
1. Visit https://cursor.sh/
2. Download for your operating system
3. Launch the installer and follow prompts
4. Launch Cursor

# Authentication
- Sign in with GitHub or Google
- Pro version requires a subscription
- Team workspaces available for collaboration

# Settings
- Settings are accessible via F1 > Preferences > Settings
- Keyboard shortcuts can be customized like in VSCode
- Themes and extensions work just like VSCode

# First-time Setup
- Configure preferred theme and settings
- Install needed extensions from VSCode Marketplace
- Set your preferred AI model (Pro)
- Cursor respects .gitignore patterns for AI indexing

# Opening Files and Projects
- File > Open Folder
- File > Open Recent
- Ctrl+O (macOS: Cmd+O) to open files

# Editor Navigation
- Ctrl+G (macOS: Cmd+G): Go to line
- Ctrl+P (macOS: Cmd+P): Quick open file
- Ctrl+Shift+O (macOS: Cmd+Shift+O): Go to symbol
- Ctrl+Tab: Navigate between open files

# Multiple Cursors
- Alt+Click (macOS: Option+Click): Add cursor
- Ctrl+Alt+Up/Down (macOS: Cmd+Option+Up/Down): Add cursor above/below
- Ctrl+D (macOS: Cmd+D): Select next occurrence of selection

# Selections
- Ctrl+L (macOS: Cmd+L): Select current line
- Shift+Alt+Right/Left (macOS: Shift+Option+Right/Left): Expand/shrink selection
- Ctrl+Shift+L (macOS: Cmd+Shift+L): Select all occurrences of current selection

# Editing
- Alt+Up/Down (macOS: Option+Up/Down): Move line up/down
- Shift+Alt+Up/Down (macOS: Shift+Option+Up/Down): Copy line up/down
- Ctrl+/ (macOS: Cmd+/): Toggle comment
- Ctrl+Space: Trigger suggestion

# Main AI Shortcuts
- Ctrl+K (macOS: Cmd+K): Chat with AI
- Ctrl+L (macOS: Cmd+L): Generate code or continue writing
- Ctrl+J (macOS: Cmd+J): Edit code with AI
- Ctrl+I (macOS: Cmd+I): Explain selected code
- Ctrl+; (macOS: Cmd+;): Inline chat with AI

# AI Commands via Command Palette (F1)
- AI: Chat with AI
- AI: Edit with AI
- AI: Explain Code
- AI: Fix Problem
- AI: Generate Tests
- AI: Generate Documentation
- AI: Convert Code to (language)
- AI: Optimize Code

# Basic Chat Prompts
- "How can I optimize this code?"
- "Explain what this function does"
- "How do I fix this error?"
- "What's the best way to implement X?"
- "Can you suggest a better approach for this?"

# Code Generation Prompts
- "Generate a React component for a login form"
- "Write a function to parse CSV data"
- "Create an API endpoint for user authentication using Express"
- "Write a unit test for this function"
- "Implement a binary search tree in Python"

# Code Editing Prompts
- "Refactor this code to use async/await instead of promises"
- "Convert this class component to a functional component with hooks"
- "Optimize this SQL query for better performance"
- "Add error handling to this function"
- "Update this code to use TypeScript"

# Prompt Tips
- Be specific about languages and frameworks
- Include context about your project
- Ask for specific patterns or approaches
- Provide examples when possible
- For complex tasks, break into smaller steps

# Edit with AI Steps
1. Select the code you want to modify
2. Press Ctrl+J (macOS: Cmd+J) or use command palette
3. Describe your changes in natural language
4. Review the AI's suggested changes
5. Accept or reject the changes

# Example Edit Prompts
- "Add TypeScript type definitions to this function"
- "Replace the for loop with map() and filter()"
- "Add input validation with helpful error messages"
- "Update this to handle asynchronous operations"
- "Fix the potential memory leak in this component"
- "Improve the naming of variables for better readability"
- "Add proper error handling for this try/catch block"
- "Update this React component to use context instead of props"

# Multi-file Edits
- Describe changes spanning multiple files
- Reference file paths explicitly
- Explain relationships between files being modified
- AI will generate all necessary changes

# Using Code Explanation
1. Select the code you want explained
2. Press Ctrl+I (macOS: Cmd+I) or use command palette
3. Review the explanation in the chat panel

# Customizing Explanations
- "Explain this code for a beginner"
- "Explain this algorithm in detail"
- "Explain what this regex pattern matches"
- "Explain the security implications of this code"
- "Explain how this code could be optimized"
- "Explain this database query's performance characteristics"

# Understanding Complex Code
- Ask about specific parts you don't understand
- Request step-by-step explanation of complex algorithms
- Ask for examples of how functions might be called
- Request diagrams or visualizations of data flow
- Ask for potential edge cases or bugs

# Generating Complete Files
- "Generate a React component for a dashboard"
- "Create a RESTful API using Express for a blog"
- "Write a Python script to process CSV files"

# Generating Specific Code Patterns
- "Write a custom React hook for form validation"
- "Create a middleware for JWT authentication"
- "Generate a Redux slice for user authentication"
- "Write a database migration script"

# Step-by-step Generation
1. Describe overall functionality
2. Review AI-generated code
3. Ask for adjustments or improvements
4. Request additional features
5. Ask for explanations of complex parts
6. Request tests or documentation

# Testing Generated Code
- Always review generated code before using
- Test edge cases explicitly
- Check for security issues
- Validate with linters and type checking
- Consider performance implications

# Debugging Steps
1. Select code with the error or issue
2. Use "AI: Fix Problem" command
3. Provide error messages or expected behavior
4. Review AI's analysis and suggested fix
5. Implement the solution

# Debugging Prompts
- "Fix this TypeError in my React component"
- "Why is this infinite loop occurring?"
- "Debug this async function that isn't resolving"
- "Why is my state not updating in this component?"
- "Identify race conditions in this code"

# Optimization Requests
- "Optimize this function for better performance"
- "Reduce the memory usage of this algorithm"
- "Improve the time complexity of this sorting function"
- "Refactor this code to be more maintainable"
- "Make this API call more resilient to failures"

# Security Auditing
- "Check this code for security vulnerabilities"
- "Identify potential SQL injection points"
- "Review this authentication logic for flaws"
- "Make sure this input is properly sanitized"
- "Check for potential XSS vulnerabilities"

# Documentation Types
- Code comments
- JSDoc/DocStrings
- README files
- API documentation
- User guides
- Architecture documentation

# Documentation Prompts
- "Add JSDoc comments to this function"
- "Generate a README for this project"
- "Document the API endpoints in this file"
- "Create usage examples for this library"
- "Add type documentation to these interfaces"

# Example: JSDoc Generation
// Before
function calculateTotal(items, discount, tax) {
  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const discountAmount = subtotal * discount;
  const taxAmount = (subtotal - discountAmount) * tax;
  return subtotal - discountAmount + taxAmount;
}

// After AI documentation
/**
 * Calculates the total price including discount and tax.
 * 
 * @param {Array<{price: number, quantity: number}>} items - Array of items with price and quantity.
 * @param {number} discount - Discount rate as a decimal (e.g., 0.1 for 10% discount).
 * @param {number} tax - Tax rate as a decimal (e.g., 0.07 for 7% tax).
 * @returns {number} The final total after applying discount and tax.
 */
function calculateTotal(items, discount, tax) {
  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const discountAmount = subtotal * discount;
  const taxAmount = (subtotal - discountAmount) * tax;
  return subtotal - discountAmount + taxAmount;
}

# Improving AI Context
- Open related files before asking questions
- Reference specific files or components
- Explain project structure when needed
- Use workspace-wide searches before asking questions
- Show AI relevant error messages or logs

# Managing .cursorignore
- Create a .cursorignore file to exclude directories
- Format similar to .gitignore
- Exclude node_modules, build artifacts, etc.
- Exclude sensitive files or directories
- Example:
  node_modules/
  dist/
  .env
  *.log
  
# Opening Context for AI
- "I'm working on a React project with Redux"
- "This is part of an Express API with MongoDB"
- "This component is used in our authentication flow"
- "We're using Next.js with TypeScript"
- "This function is called from multiple places in the app"

# Effective Collaboration
- Break down complex tasks
- Ask AI to explain its approach
- Use AI for boilerplate code
- Leverage AI for research and comparisons
- Let AI generate tests for your code
- Review and refine AI suggestions

# Iterative Development
1. Describe feature requirements
2. Let AI generate initial implementation
3. Review and identify issues
4. Ask for specific improvements
5. Test and validate
6. Request optimizations or refactoring

# Learning with AI
- Ask for explanations of complex code
- Request alternative approaches
- Ask "Why did you choose this pattern?"
- Request comparisons between different methods
- Have AI explain performance implications

# Available Models
- Claude (Anthropic)
  - Claude 3 Opus: Most powerful, best for complex tasks
  - Claude 3 Sonnet: Good balance of capability and speed
  - Claude 3 Haiku: Fastest, good for simpler tasks

- GPT (OpenAI)
  - GPT-4o: Most advanced GPT model
  - GPT-4: Strong general-purpose model
  - GPT-3.5 Turbo: Faster but less powerful

# Model Strengths
- Claude models: Strong code understanding, follows instructions well, 
                excels at detailed explanations
- GPT models: Creative code generation, good at obscure languages,
             handles complex instructions

# Switching Models
- Settings > AI > Model Selection
- Or via command palette: "AI: Select Model"

# When to Use Different Models
- Opus/GPT-4o: Complex refactoring, architecture design, 
              security auditing, performance optimization
- Sonnet/GPT-4: General coding, bug fixing, documentation, 
               tests, typical development tasks
- Haiku/GPT-3.5: Quick explanations, simple code generation,
                formatting, smaller tasks

# React Component Generation
- "Create a reusable button component with variants"
- "Generate a form component with validation"
- "Create a responsive navigation bar component"
- "Build a data table component with sorting and filtering"

# CSS/Styling Assistance
- "Convert this CSS to Tailwind classes"
- "Create animations for this component"
- "Optimize these styles for mobile devices"
- "Generate a dark mode version of these styles"

# State Management
- "Refactor this component to use useState and useEffect"
- "Convert this Redux code to use Redux Toolkit"
- "Implement this feature using React Context"
- "Add proper state management to this form"

# Frontend Testing
- "Generate Jest tests for this component"
- "Create Cypress E2E tests for this user flow"
- "Write React Testing Library tests for this hook"
- "Add test coverage for edge cases in this component"

# API Development
- "Create a RESTful CRUD API for users using Express"
- "Generate GraphQL resolvers for this schema"
- "Implement JWT authentication middleware"
- "Create database models and migrations"

# Database Queries
- "Optimize this SQL query for performance"
- "Convert this ORM query to raw SQL"
- "Write a MongoDB aggregation pipeline for this data"
- "Create indexes for these database operations"

# Server-side Validation
- "Add input validation for this API endpoint"
- "Implement error handling for this service"
- "Create a rate limiting middleware"
- "Add data sanitization to prevent injection attacks"

# Backend Testing
- "Generate unit tests for this service"
- "Create integration tests for this API"
- "Write mock tests for external services"
- "Generate test fixtures and factory functions"

# Project Setup
- "Create a new Next.js project with TypeScript"
- "Set up a MERN stack application structure"
- "Configure Webpack for this project"
- "Create a CI/CD pipeline configuration"

# Authentication Flows
- "Implement a complete login/registration system"
- "Create OAuth integration with Google"
- "Build a password reset flow"
- "Set up role-based access control"

# Data Modeling
- "Design database schema for a blog application"
- "Create TypeScript interfaces for these API responses"
- "Generate database migrations based on these models"
- "Implement data validation and sanitization"

# Performance Optimization
- "Find and fix rendering bottlenecks in this component"
- "Optimize API response times for this endpoint"
- "Implement proper caching for these resources"
- "Add lazy loading to this application"