Урок 2: Базовая работа в Cursor

Чему вы научитесь

• Использовать Tab Completion для предсказательного автодополнения
• Применять Inline Edit (Cmd+K) для быстрого редактирования кода
• Вести диалог с AI через Chat (Cmd+L) с поддержкой контекста (@file)
• Применять Composer для мультифайловых изменений и refactoring’а

Четыре основных инструмента Cursor

Cursor предоставляет четыре способа работы с AI. Давайте изучим каждый.

flowchart LR
  A["Один символ?"] -->|да| B["Tab"]
  A -->|нет| C["Фрагмент кода?"]
  C -->|да| D["Ctrl+K"]
  C -->|нет| E["Вопрос к AI?"]
  E -->|да| F["Chat"]
  E -->|нет| G["Много файлов?"]
  G -->|да| H["Composer"]

1. Tab Completion — автодополнение на стероидах

Hotkey: просто начните печатать код

Что это? Когда вы пишете код, Cursor предсказывает следующие строки и показывает их серым текстом (ghost text). Нажмите Tab, чтобы принять.

Пример: функция для фильтрации товаров

Создайте файл products.js:

// Начните писать
function filterProducts(products, category) {
  // Нажмите Enter, Cursor предложит:

  // Предложение 1 (серый текст):
  // return products.filter(p => p.category === category);

  // Нажмите Tab, чтобы принять, или просто продолжайте писать, чтобы отклонить
}

Когда это полезно:

• Типовые рабочие функции (CRUD-операции)
• Тесты (быстрое создание test cases)
• Конфигурации (JSON, YAML с повторяющимися структурами)

Как отключить/включить:

• Используйте иконку Cursor Tab в статус-баре (правый нижний угол)
• Или Cmd+Shift+P → “Toggle Cursor Tab” / “Enable Cursor Tab”

Совет: чем лучше вы описали функцию (имя функции, параметры, комментарий), тем точнее предсказание.

2. Inline Edit (Cmd+K) — редактирование выбранного кода

Hotkey: Cmd+K (macOS) или Ctrl+K (Windows/Linux)

Что это? Выделяете код → описываете, что нужно изменить → AI применяет изменение.

Пример: рефакторинг React-компонента

Исходный код:

// UserCard.jsx
import React, { useState } from 'react';

export function UserCard({ user }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'Hide' : 'Show'} Details
      </button>
      {isOpen && (
        <div>
          <p>Phone: {user.phone}</p>
          <p>Address: {user.address}</p>
        </div>
      )}
    </div>
  );
}

Шаг 1: выделите весь компонент (весь код внутри функции)

Шаг 2: нажмите Cmd+K, откроется окно инструкций

Шаг 3: напишите инструкцию:

Рефакторь компонент:
1. Вынеси детали в отдельный компонент UserDetails
2. Используй hooks для управления состоянием
3. Добавь пропсы для customization

Шаг 4: нажмите Enter

Результат: Cursor покажет новый код и спросит, согласны ли вы с изменениями.

Варианты действий:

• Accept — принять изменение
• Regenerate — попросить AI другой вариант
• Discard — отклонить

Ещё примеры инструкций для Inline Edit

// Пример 1: оптимизация производительности
"Оптимизируй эту функцию для работы с большими массивами (10000+ элементов).
Используй в 2-3 раза меньше памяти."

// Пример 2: добавь типизацию
"Добавь TypeScript типы для всех параметров и возвращаемых значений."

// Пример 3: преобразование стиля
"Переделай эту функцию из callback-стиля в async/await."

// Пример 4: добавь обработку ошибок
"Добавь try-catch блоки и валидацию input'ов."

// Пример 5: документация
"Добавь JSDoc комментарии для каждого параметра и возвращаемого значения."

3. Chat (Cmd+L) — диалог с AI о коде

Hotkey: Cmd+L (macOS) или Ctrl+L (Windows/Linux)

Что это? Боковая панель, где вы общаетесь с AI в natural language. AI может ссылаться на файлы проекта через @file.

Пример: обсуждение архитектуры

Откройте Chat (Cmd+L):

Ты: Помоги разработать архитектуру для приложения todos.
    Нужны файлы:
    - store.js (управление состоянием)
    - components/ (React компоненты)
    - api.js (запросы на сервер)

    Какую структуру проекта ты рекомендуешь?

AI: Вот рекомендуемая структура...
    [предлагает архитектуру]

Ты: А как организовать типы в TypeScript?

AI: [объясняет]

Ты: @store.js Посмотри на этот файл. Как я могу сделать его более масштабируемым?

AI: [анализирует store.js и даёт рекомендации]

Специальные команды в Chat

@file.js        — упомянуть конкретный файл (AI читает содержимое)
@folder         — включить всю папку в контекст
/web            — поиск информации в интернете (доступен в Pro+ планах, в Composer/Agent Mode)
/create         — создать новый файл на основе обсуждения

Пример использования @file:

Ты: @UserCard.jsx Этот компонент работает медленно.
    Почему и как это исправить?

AI: [читает UserCard.jsx, анализирует, предлагает решение]

4. Composer — мультифайловые изменения

Hotkey: Cmd+I (macOS) или Ctrl+I (Windows/Linux)

Что это? Инструмент для создания и изменения нескольких файлов одновременно. Работает как Inline Edit, но может менять 5, 10, 50 файлов за раз.

Пример: создание нового feature

Сценарий: вам нужно добавить страницу “Settings” в React приложение.

Шаг 1: откройте Composer (Cmd+I)

Шаг 2: напишите инструкцию:

Создай страницу Settings для React приложения:

1. Создай файл pages/Settings.jsx
   - Форма для изменения имени пользователя
   - Выбор темы (light/dark)
   - Кнопка Save

2. Обнови router в App.jsx
   - Добавь route /settings → Settings

3. Обнови navigation bar в Header.jsx
   - Добавь ссылку на Settings

4. Создай hooks/useSettings.js
   - Функция для загрузки и сохранения настроек

Используй React Hooks, не нужны сторонние библиотеки.

Шаг 3: нажмите Enter

Результат: Composer создаст все файлы и покажет превью каждого. Вы можете:

• Принять всё (Accept)
• Отредактировать отдельные файлы
• Попросить регенерировать (Regenerate)
• Отклонить (Discard)

Когда использовать Composer

Используйте Composer для:

• Создания нового feature (несколько файлов связаны)
• Глобального refactoring’а (переименование компонента везде)
• Миграции (обновление версии library)
• Автоматизации (создание boilerplate для 10+ компонентов)

Пример: рефакторинг всего проекта на TypeScript

Composer инструкция:

Мигрируй весь проект на TypeScript:

1. Переименуй все .jsx файлы на .tsx
2. Добавь типы для всех компонентов (используй interface для Props — рекомендуется вместо React.FC)
3. Создай файл types.d.ts с типами API
4. Обнови imports в App.jsx и других точках входа
5. Добавь tsconfig.json с правильными настройками

Используй:
- interface для Props типов (рекомендуется вместо React.FC)
- function-компоненты с явной типизацией
- async/await для API calls

Composer создаст все файлы и обновит зависимости.

Горячие клавиши Cursor

Пример: полный workflow рефакторинга

Исходный компонент:

// BadForm.jsx — плохо структурирован, без типов, медленный
function BadForm() {
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(false);

  const handleChange = (e) => {
    setData({...data, [e.target.name]: e.target.value});
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    fetch('/api/submit', {method: 'POST', body: JSON.stringify(data)})
      .then(r => r.json())
      .then(d => {console.log(d); setLoading(false);})
      .catch(e => {console.log(e); setLoading(false);});
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" onChange={handleChange} />
      <input name="password" onChange={handleChange} />
      <button disabled={loading}>{loading ? 'Loading...' : 'Submit'}</button>
    </form>
  );
}

Как это рефакторить в Cursor:

Вариант 1: Inline Edit (быстро)

1. Выделите функцию
2. Нажмите Cmd+K
3. Напишите:

Рефакторь компонент:
1. Добавь TypeScript типы
2. Используй useCallback для обработчиков
3. Отдели логику fetch'а в хук useFormSubmit
4. Добавь валидацию email
5. Улучши обработку ошибок с toast уведомлениями

Вариант 2: Composer (если нужны новые файлы)

1. Нажмите Cmd+I
2. Напишите:

Рефакторь форму с использованием хуков:

1. Создай hooks/useFormSubmit.ts
   - Логика для submit'а
   - Управление loading и error
   - Валидация

2. Создай hooks/useFormData.ts
   - Управление данными формы
   - Методы для изменения полей

3. Переделай BadForm.jsx на Form.tsx
   - Используй новые хуки
   - Добавь TypeScript типы
   - Импортируй hooks

4. Обнови App.jsx
   - Импортируй Form из Form.tsx

Результат: Composer создаст все файлы, правильно организует код, добавит типы.

Agent Mode — полная автономия

Внимание: это продвинутая функция, используйте после освоения базовых инструментов.

Что это? AI может сам:

• Создавать файлы
• Запускать команды в терминале
• Изменять конфигурацию
• Устанавливать зависимости

Как включить:

• Откройте Chat (Cmd+L), выберите режим Agent из дропдауна
• Или откройте Composer (Cmd+I) и переключитесь в Agent mode
• Также доступны cloud agents и subagents

Пример:

Ты: Создай новый Next.js проект, добавь страницу /todos, установи Tailwind
    и запусти dev сервер.

AI (в Agent Mode):
1. Запускает: npx create-next-app todos
2. Устанавливает: npm install -D tailwindcss
3. Создаёт: pages/todos.jsx
4. Запускает: npm run dev
5. Показывает: "Проект запущен на localhost:3000"

Будьте осторожны: Agent Mode может запускать потенциально опасные команды. Всегда проверяйте, что AI предлагает.

Ключевые выводы

• Tab Completion предсказывает следующие строки кода — нажмите Tab для принятия
• Inline Edit (Cmd+K) быстро меняет выбранный код по описанию
• Chat (Cmd+L) позволяет вести диалог с AI, использование @file для контекста
• Composer (Cmd+I) создаёт и меняет несколько файлов одновременно
• Agent Mode дает AI полную автономию (используйте осторожно)
• Комбинируйте инструменты — Tab Completion для мелочей, Inline Edit для блоков, Chat для обсуждения архитектуры, Composer для больших refactoring’ов

Следующий урок

В Уроке 3: .cursorrules научимся создавать конфигурационные файлы, которые “программируют” AI на вашу кодовую базу:

• Язык программирования и версии
• Стиль кода и соглашения
• Архитектурные правила
• Что AI не должен делать