Back to Basics

File Management & Navigation

Master efficient file management, advanced search, and AI-powered navigation in Cursor.

OverviewBasicsAdvancedFeaturesExamples

File Management Overview

Cursor's file management combines traditional VS Code features with AI-powered navigation and search capabilities.

File Explorer

  • • Hierarchical file structure
  • • Drag and drop support
  • • Right-click context menus
  • • File type icons

AI-Powered Search

  • • Semantic code search
  • • Natural language queries
  • • Context-aware results
  • • Cross-file references

Smart Navigation

  • • Go to definition
  • • Find references
  • • Symbol navigation
  • • AI-suggested files
1

File Explorer

The File Explorer (left sidebar) is your primary interface for navigating and managing project files.

Basic Navigation

Opening Files

  • • Click to open files
  • • Double-click to open in new tab
  • • Right-click for context menu
  • • Drag files to editor area

Folder Operations

  • • Click arrow to expand/collapse
  • • Right-click to create files/folders
  • • Drag to move files
  • • Rename with F2

File Operations

Creating Files

Right-click in Explorer → New File

BASH
# Or use Command Palette (Cmd+Shift+P)
# Type: "File: New File"
# Or use keyboard shortcut: Cmd+N

Creating Folders

Right-click in Explorer → New Folder

BASH
# Or use Command Palette
# Type: "File: New Folder"
# Or use keyboard shortcut: Cmd+Shift+N

Renaming Files

Select file and press F2, or right-click → Rename

BASH
# Rename with AI assistance
# Right-click → "Rename with AI"
# AI will suggest better names based on content

File Icons and Types

Common File Types

  • • .tsx - React TypeScript components
  • • .ts - TypeScript files
  • • .js - JavaScript files
  • • .css - Stylesheets
  • • .json - Configuration files
  • • .md - Markdown documentation

Special Files

  • • package.json - Dependencies
  • • tsconfig.json - TypeScript config
  • • .env - Environment variables
  • • README.md - Project documentation
  • • .gitignore - Git ignore rules
2

Advanced Search

Cursor's search capabilities go beyond simple text matching with AI-powered semantic search.

Basic Search (Cmd+Shift+F)

Text Search

TEXT
Search for: "useState"
Results: All files containing "useState"

Regex Search

TEXT
Search for: "use[A-Z][a-z]+"
Results: All custom hooks (useAuth, useLocalStorage, etc.)

File Type Filtering

TEXT
Search for: "useState"
Files to include: *.tsx
Results: Only in TypeScript React files

AI-Powered Search

Semantic Search

TEXT
Search for: "authentication logic"
Results: Files containing login, auth, token, session, etc.

Function Search

TEXT
Search for: "functions that handle user input"
Results: Event handlers, form validators, input processors

Pattern Search

TEXT
Search for: "error handling patterns"
Results: Try-catch blocks, error boundaries, error states

Search in AI Chat

Natural Language Queries

TEXT
"Find all components that use the useAuth hook"

Code Analysis

TEXT
"Show me all API calls in the project and their error handling"

Dependency Analysis

TEXT
"What files import the Button component and how is it used?"
3

Quick Navigation

Navigate your codebase efficiently with keyboard shortcuts and AI-powered suggestions.

Essential Keyboard Shortcuts

File Navigation

Quick OpenCmd+P
Go to SymbolCmd+Shift+O
Go to DefinitionF12
Find ReferencesShift+F12

Tab Navigation

Next TabCmd+Tab
Previous TabCmd+Shift+Tab
Close TabCmd+W
Reopen TabCmd+Shift+T

AI-Powered Navigation

Smart File Suggestions

When you open Quick Open (Cmd+P), Cursor suggests relevant files based on:

  • • Recently opened files
  • • Files related to current context
  • • Files you're likely to need next
  • • Files with similar names or content

Context-Aware Suggestions

AI analyzes your current work and suggests:

  • • Related components to edit
  • • Configuration files to update
  • • Test files to create
  • • Documentation to update

Breadcrumb Navigation

File Path Breadcrumbs

Navigate through your file structure using breadcrumbs:

TEXT
src > components > ui > Button.tsx
Click any part to navigate to that folder

Symbol Breadcrumbs

Navigate through code structure:

TEXT
App > UserProfile > handleSubmit > validateForm
Click to jump to any level of the call stack
4

File Organization

Organize your project files for better maintainability and AI understanding.

Recommended Project Structure

React/Next.js Project

TEXT
src/
├── components/          # Reusable UI components
│   ├── ui/             # Basic UI components
│   ├── forms/          # Form components
│   └── layout/         # Layout components
├── pages/              # Page components (Next.js)
├── hooks/              # Custom React hooks
├── utils/              # Utility functions
├── types/              # TypeScript type definitions
├── services/           # API services
├── contexts/           # React contexts
├── styles/             # Global styles
└── __tests__/          # Test files

File Naming Conventions

  • • PascalCase for components: UserProfile.tsx
  • • camelCase for utilities: formatDate.ts
  • • kebab-case for pages: user-profile.tsx
  • • UPPERCASE for constants: API_ENDPOINTS.ts

AI-Friendly Organization

Clear File Names

Use descriptive names that AI can understand:

✓ Good:

  • • UserProfileCard.tsx
  • • validateEmail.ts
  • • useLocalStorage.ts

✗ Avoid:

  • • Card.tsx
  • • utils.ts
  • • hook.ts

Logical Grouping

Group related files together for better AI context:

TEXT
components/
├── auth/
│   ├── LoginForm.tsx
│   ├── RegisterForm.tsx
│   └── AuthProvider.tsx
├── dashboard/
│   ├── DashboardLayout.tsx
│   ├── StatsCard.tsx
│   └── RecentActivity.tsx

File Templates

Creating Templates

Use AI to create consistent file templates:

TEXT
Create a React component template that includes:
- TypeScript interface for props
- Default export
- JSDoc comments
- Basic structure

Template Examples

React Component:

TSX
interface ComponentNameProps {
  // Define props here
}

/**
 * Component description
 */
export const ComponentName: React.FC<ComponentNameProps> = ({
  // Destructure props
}) => {
  return (
    <div>
      {/* Component content */}
    </div>
  );
};

Custom Hook:

TSX
import { useState, useEffect } from 'react';

/**
 * Hook description
 */
export const useHookName = (param: string) => {
  const [state, setState] = useState<string>('');
  
  useEffect(() => {
    // Effect logic
  }, [param]);
  
  return { state, setState };
};

Next Steps

Now that you understand file management, learn about code generation and advanced features:

Code Generation

Master AI-powered code generation techniques

Essential Settings

Configure Cursor for maximum productivity

OverviewBasicsAdvancedFeaturesExamples