Composer Mode: Умная генерация кода в Cursor | Глава 5

Глава 5. Composer Mode: Умная генерация кода

5.1. Что такое Composer и как он работает

Composer Mode — это один из самых мощных и уникальных инструментов Cursor, позволяющий работать с множественными файлами одновременно и выполнять сложные операции рефакторинга.

Отличия от Chat Mode

Как открыть Composer

• Горячая клавиша: Cmd/Ctrl + Shift + I
• Через меню: View → Composer
• Через командную палитру: "Cursor: Start Composer"

Интерфейс Composer

┌────────────────────────────────────────────────────────┐
│  Composer Mode                            [×]          │
├────────────────────────────────────────────────────────┤
│                                                        │
│  What would you like to build or change?               │
│  ┌──────────────────────────────────────────────────┐  │
│  │ [Your instruction here...]                        │ │
│  │                                                   │ │
│  │                                                   │ │
│  └──────────────────────────────────────────────────┘  │
│                                                        │
│  Include files:                                        │
│  ☑ src/components/Header.jsx                          │
│  ☑ src/styles/main.css                                │
│  ☐ Add more files...                                  │
│                                                        │
│  [Cancel]                    [Generate & Apply] →      │
└────────────────────────────────────────────────────────┘

Рабочий процесс Composer

1. Описание задачи: Вы описываете что нужно создать или изменить
2. Выбор файлов: Указываете какие файлы включить в контекст
3. Генерация: AI анализирует и генерирует изменения
4. Предпросмотр: Вы видите diff изменений перед применением
5. Применение: Одобряете изменения, они применяются ко всем файлам

5.2. Генерация кода из естественного языка

Composer особенно эффективен для создания новых компонентов и модулей.

Пример 1: Создание React компонента

Задача: Создать компонент формы регистрации

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

Создай React компонент RegistrationForm в src/components/

Требования:
- Поля: username, email, password, confirm password
- Валидация в реальном времени:
  - username: минимум 3 символа
  - email: валидный формат
  - password: минимум 8 символов, включая цифру и спец. символ
  - confirm password: должен совпадать с password
- Показывай ошибки под полями
- Кнопка Submit активна только если форма валидна
- Используй controlled components
- Стилизуй с Tailwind CSS

Результат: Composer создаст файл src/components/RegistrationForm.jsx с полной реализацией всех требований.

Пример 2: Создание API модуля

Инструкция:

Создай модуль для работы с API товаров:

Файл: src/api/products.js

Функции:
- getAllProducts(filters) - получить товары с фильтрацией
- getProductById(id) - получить товар по ID
- createProduct(data) - создать новый товар
- updateProduct(id, data) - обновить товар
- deleteProduct(id) - удалить товар

Используй axios для запросов
Base URL берется из process.env.REACT_APP_API_URL
Добавь обработку ошибок и логирование
Все функции async

Результат: Полностью рабочий API модуль с error handling и логированием.

Пример 3: Создание набора утилит

Инструкция:

Создай файл src/utils/helpers.js с утилитами:

1. formatDate(date, format) - форматирование даты
2. debounce(func, delay) - debounce функция
3. throttle(func, limit) - throttle функция
4. deepClone(obj) - глубокое клонирование объекта
5. capitalize(str) - первая буква заглавная
6. truncate(str, length) - обрезать строку с многоточием

Каждая функция с JSDoc комментариями и примерами
Экспортируй все как named exports

5.3. Автоматическое дополнение и предложения

В процессе набора текста в Composer, AI предлагает автодополнения:

Интеллектуальное дополнение инструкций

Вы начинаете писать:

Создай компонент для отображения списка...

AI может предложить:

...товаров с пагинацией, сортировкой и фильтрацией

Уточняющие вопросы

Если инструкция недостаточно конкретна, Composer может спросить:

You: Создай форму для пользователя

Composer: Уточните, пожалуйста:
- Это форма создания нового пользователя или редактирования?
- Какие поля должны быть в форме?
- Нужна ли валидация?
- Куда отправлять данные при submit?

5.4. Многофайловое редактирование

Главная сила Composer — способность координированно изменять несколько файлов.

Пример: Добавление новой функциональности

Задача: Добавить систему уведомлений в приложение

Инструкция:

Добавь систему уведомлений:

1. Создай NotificationContext в src/context/NotificationContext.jsx
   - Методы: showSuccess, showError, showInfo, showWarning
   - Уведомления авто-скрываются через 5 сек

2. Создай компонент NotificationContainer в src/components/
   - Отображает активные уведомления
   - Анимация появления/исчезновения
   - Стилизовано с Tailwind

3. Обнови src/App.jsx:
   - Оберни приложение в NotificationProvider
   - Добавь NotificationContainer

4. Создай hook useNotification в src/hooks/
   - Возвращает методы для показа уведомлений

5. Обнови src/api/products.js:
   - Показывай уведомления об успехе/ошибке для всех операций

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

Пример: Миграция на TypeScript

Инструкция:

Конвертируй следующие файлы в TypeScript:
- src/components/UserProfile.jsx → .tsx
- src/api/users.js → .ts
- src/utils/helpers.js → .ts

Добавь:
- Интерфейсы для всех типов данных
- Правильные типы для props компонентов
- Generic типы где применимо
- Создай файл src/types/index.ts с общими типами

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

Пример: Глобальный рефакторинг

Задача: Переименовать сущность "Product" в "Item" во всём проекте

Инструкция:

Переименуй все упоминания Product в Item:

Файлы для обновления:
- src/api/products.js → src/api/items.js
- src/components/ProductList.jsx → src/components/ItemList.jsx
- src/components/ProductCard.jsx → src/components/ItemCard.jsx
- src/context/ProductContext.jsx → src/context/ItemContext.jsx

Также обнови:
- Все импорты
- Переменные и функции
- Комментарии
- Типы и интерфейсы

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

5.5. Оптимизация производительности

Composer — мощный инструмент, но работа с множественными файлами может быть ресурсоемкой.

Лучшие практики для производительности

1. Ограничивайте область изменений

Вместо:

Обнови все компоненты в src/

Конкретизируйте:

Обнови компоненты в src/components/auth/

2. Используйте инкрементальный подход

Разбивайте большие задачи на части:

Первый запрос: Создай базовую структуру модуля
Второй запрос: Добавь валидацию
Третий запрос: Добавь обработку ошибок

3. Оптимизируйте контекст

Включайте только необходимые файлы в контекст. Если работаете с фронтендом, не включайте backend файлы.

4. Используйте .cursorignore

Создайте файл .cursorignore чтобы исключить:

node_modules/
dist/
build/
.git/
*.log
*.min.js

5. Мониторьте использование токенов

Composer использует больше токенов чем Chat. Статус-бар показывает текущее использование. Планируйте сложные операции учитывая лимиты