ЧАСТЬ II. КЛЮЧЕВЫЕ ВОЗМОЖНОСТИ CURSOR

Глава 4. Chat Mode: Диалог с AI-ассистентом

4.1. Принципы работы режима Chat

Chat Mode в Cursor — это интерактивный диалог с AI-ассистентом, который понимает контекст вашего проекта и может помочь с широким спектром задач программирования.

Как открыть Chat

• Горячая клавиша: Cmd/Ctrl + L
• Через меню: View → Chat
• Через Activity Bar: Иконка чата в левой панели
• Через командную палитру: "Cursor: Open Chat"

Интерфейс Chat панели

┌─────────────────────────────────────────┐
│ Chat with AI                    [×]     │
├─────────────────────────────────────────┤
│                                         │
│ AI: Hello! I can help you with:         │
│     • Writing code                      │
│     • Debugging                         │
│     • Explaining code                   │
│     • Refactoring                       │
│     • And much more!                    │
│                                         │
│ You: [Your message here]                │
│                                         │
├─────────────────────────────────────────┤
│ Attach:  [Code] [Files] [Docs]          │
│ Context: Auto | Current File | ...      │
│ [Type your message...           ] [→]   │
└─────────────────────────────────────────┘

Контекст в Chat

Критически важная особенность Chat в Cursor — понимание контекста. AI автоматически включает:

1. Текущий файл: Код, который вы редактируете
2. Выделенный код: Если что-то выбрано
3. Связанные файлы: Импорты и зависимости
4. Проектная структура: Общее понимание архитектуры
5. История чата: Предыдущие сообщения в сессии

Ручное управление контекстом

Вы можете явно указать, что включить в контекст:

• @filename: Упомянуть конкретный файл

  
  

  @server.js как добавить middleware для логирования?

  
  

• @folder: Включить всю папку

  
  

  @components/ создай новый компонент UserProfile

  
  

• @symbol: Сослаться на функцию, класс или переменную

  
  

  @handleLogin оптимизируй эту функцию

  
  

• @docs: Включить документацию

  
  

  @docs как использовать useState в React?

  
  

4.2. Типы запросов и их структура

Эффективность работы с Chat зависит от умения формулировать запросы. Рассмотрим основные типы.

1. Генерация кода

Простая генерация:

Создай функцию для валидации email адреса

С контекстом:

В @utils.js создай функцию debounce, которая принимает
функцию и задержку в миллисекундах

Со спецификациями:

Напиши класс DatabaseConnection который:
- Использует singleton pattern
- Поддерживает connection pooling
- Имеет методы query, insert, update, delete
- Обрабатывает ошибки подключения
- Логирует все операции

2. Объяснение кода

Базовое объяснение:

[выделите код]
Что делает этот код?

Детальное объяснение:

Объясни как работает этот алгоритм сортировки,
включая временную сложность

Построчное объяснение:

Пройдись по этой функции строка за строкой
и объясни каждый шаг

3. Отладка и исправление ошибок

Диагностика проблемы:

Эта функция возвращает undefined вместо массива.
Почему?

Исправление бага:

[выделите проблемный код]
Исправь эту ошибку и объясни, что было не так

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

Эта функция работает слишком медленно на больших данных.
Как её оптимизировать?

4. Рефакторинг

Улучшение читаемости:

Рефактори этот код для лучшей читаемости,
используя современный ES6+ синтаксис

Применение паттернов:

Переделай этот код используя Repository pattern

Разделение ответственностей:

Эта функция делает слишком много. Разбей её на
несколько маленьких функций с единственной ответственностью

5. Тестирование

Генерация тестов:

Создай unit тесты для @userService.js используя Jest

Test-driven development:

Сначала создай тесты для функции расчёта скидки,
затем реализацию, которая пройдёт эти тесты

6. Документирование

JSDoc комментарии:

Добавь JSDoc комментарии для всех функций в этом файле

README генерация:

Создай подробный README.md для этого проекта

7. Конвертация и миграция

Перевод между языками:

Конвертируй этот Python код в JavaScript

Миграция фреймворков:

Переделай этот jQuery код на чистый JavaScript

Обновление версий:

Обнови этот код с React class components на hooks

4.3. Контекстное понимание кода

Cursor Chat использует продвинутые техники для понимания вашего кода на глубоком уровне.

Семантический анализ

AI не просто смотрит на синтаксис, но понимает:

• Назначение функций и классов
• Бизнес-логику приложения
• Связи между компонентами
• Паттерны и архитектурные решения

Пример: Понимание бизнес-логики

Если в вашем проекте есть код:

function calculateDiscount(customer, cart) {

  if (customer.isVIP) {

    return cart.total * 0.2;

  }

  return cart.total * 0.1;

}

И вы спрашиваете:

Как изменить логику, чтобы VIP клиенты получали 30% скидку
только на заказы дороже $100?

AI понимает контекст и предложит:

function calculateDiscount(customer, cart) {

  if (customer.isVIP && cart.total > 100) {

    return cart.total * 0.3;

  }

  if (customer.isVIP) {

    return cart.total * 0.2;

  }

  return cart.total * 0.1;

}

Понимание зависимостей

Когда вы работаете с файлом, использующим импорты:

import { fetchUser } from './api/users';

import { validateEmail } from './utils/validators';

AI автоматически подгружает контекст этих файлов и понимает, как они взаимодействуют.

Историческое понимание

Chat сохраняет контекст беседы:

You: Создай функцию для добавления пользователя
AI: [создаёт addUser функцию]

You: Теперь добавь валидацию email
AI: [обновляет addUser, добавляя валидацию]

You: А теперь сохрани в базу данных
AI: [добавляет database операцию в ту же функцию]

AI помнит, о какой функции идёт речь, без необходимости повторного указания.

4.4. Практические примеры использования

Пример 1: Быстрое прототипирование API

Задача: Создать REST API для блога

Диалог:

You: Создай Express сервер для блога с endpoints для постов

AI: [генерирует базовую структуру server.js]

You: Добавь аутентификацию через JWT

AI: [добавляет auth middleware и endpoints]

You: Подключи MongoDB для хранения данных

AI: [интегрирует Mongoose models и database connection]

You: Добавь pagination для списка постов

AI: [обновляет GET /posts endpoint с поддержкой пагинации]

Результат: Полноценный backend за несколько минут диалога.

Пример 2: Отладка сложного бага

Ситуация: В React приложении компонент не обновляется при изменении props

Код:

function UserProfile({ userId }) {

  const [user, setUser] = useState(null);

  

  useEffect(() => {

    fetchUser(userId).then(setUser);

  }, []);

  

  return <div>{user?.name}</div>;

}

Диалог:

You: Почему компонент не обновляется когда userId меняется?

AI: Проблема в dependencies массиве useEffect. Вы указали пустой
массив [], что означает эффект запускается только один раз.
Нужно добавить userId в зависимости:

useEffect(() => {
  fetchUser(userId).then(setUser);
}, [userId]); // ← добавьте userId

Пример 3: Рефакторинг легаси кода

Исходный код (старый callback-based подход):

function getUsers(callback) {

  db.query('SELECT * FROM users', function(err, results) {

    if (err) {

      callback(err, null);

    } else {

      callback(null, results);

    }

  });

}

Запрос:

Переделай эту функцию на async/await с обработкой ошибок

Результат от AI:

async function getUsers() {

  try {

    const results = await db.query('SELECT * FROM users');

    return results;

  } catch (error) {

    console.error('Error fetching users:', error);

    throw error;

  }

}

Пример 4: Создание сложного компонента

Запрос:

Создай React компонент DataTable который:
- Принимает массив данных и конфигурацию колонок
- Поддерживает сортировку по клику на заголовок
- Имеет поиск по всем колонкам
- Показывает пагинацию
- Стилизован с Tailwind CSS

AI создаст полноценный компонент со всей необходимой логикой и стилями.

Пример 5: Генерация тестов

Исходная функция:

function calculateShippingCost(weight, distance, express = false) {

  const baseCost = weight * 0.5 + distance * 0.1;

  return express ? baseCost * 1.5 : baseCost;

}

Запрос:

Создай comprehensive набор тестов для этой функции

Результат:

describe('calculateShippingCost', () => {

  test('calculates basic shipping cost', () => {

    expect(calculateShippingCost(10, 100)).toBe(15);

  });

  

  test('applies express multiplier', () => {

    expect(calculateShippingCost(10, 100, true)).toBe(22.5);

  });

  

  test('handles zero weight', () => {

    expect(calculateShippingCost(0, 100)).toBe(10);

  });

  

  test('handles zero distance', () => {

    expect(calculateShippingCost(10, 0)).toBe(5);

  });

  

  // ... больше edge cases

});

4.5. Лучшие практики общения с AI

1. Будьте конкретны

Плохо:

Сделай эту функцию лучше

Хорошо:

Оптимизируй эту функцию для:
- Лучшей производительности на больших массивах
- Улучшенной читаемости
- Добавь обработку edge cases

2. Предоставляйте контекст

Плохо:

Как сделать аутентификацию?

Хорошо:

В Express приложении @server.js добавь JWT аутентификацию.
Используй библиотеку jsonwebtoken. Секрет должен храниться
в environment variables.

3. Итерируйте постепенно

Вместо одного огромного запроса:

Создай полное приложение для e-commerce с корзиной,
оплатой, inventory management, user accounts...

Разбивайте на шаги:

1. Создай базовую структуру Express приложения
2. Добавь endpoints для товаров
3. Добавь функциональность корзины
4. Интегрируй систему оплаты
...

4. Используйте примеры

Создай компонент Button похожий на @components/Input.jsx,
но для кнопок. Должен поддерживать те же props: variant,
size, disabled.

5. Просите объяснения

Не только "что", но и "почему":

Почему ты использовал useMemo здесь? Когда это действительно
необходимо?

6. Верифицируйте код

AI может ошибаться. Всегда:

• Читайте сгенерированный код
• Проверяйте логику
• Тестируйте результат
• Просите AI объяснить непонятные части

7. Указывайте стиль и стандарты

Используй:
- Functional components и hooks (не class components)
- TypeScript для типов
- ESLint правила из .eslintrc
- Наш code style guide @docs/style-guide.md

8. Работайте с ошибками конструктивно

Если AI дал неправильное решение:

Этот код не работает. Ошибка: [вставьте ошибку].
Я ожидал [опишите ожидаемое поведение].

9. Сохраняйте важные решения

Когда AI предлагает важное архитектурное решение, попросите:

Создай документацию для этого решения в @docs/architecture.md
с объяснением почему мы выбрали этот подход

10. Используйте Chat для обучения

Объясни мне концепцию closures в JavaScript с примерами
из нашего проекта @src/