Урок 4: CLI vs IDE — когда что использовать?

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

• Различие между подходами CLI и IDE к AI-кодингу
• Таблица сравнения: когда использовать что
• Четыре реальных сценария и рекомендации
• Гибридный подход: как комбинировать оба инструмента в одном workflow

Два подхода к AI-кодингу

Что такое CLI подход?

CLI — Command Line Interface. Вы используете терминал и AI модель через команды:

# Claude Code (в этом курсе)
claude "Создай функцию для сортировки"

# Gemini CLI
gemini "Напиши React компонент"

# Aider (работает с git)
aider "Добавь обработку ошибок в api.py"

Как это работает:

1. Вы пишете инструкцию в терминале
2. AI создаёт/изменяет файлы
3. Вы видите результат в файлах
4. Вы проверяете вручную в редакторе или терминале

Что такое IDE подход?

IDE — Integrated Development Environment. Вы используете редактор с встроенным AI (Cursor):

VS Code (но с AI)
├── Inline Edit (Cmd+K): быстрое редактирование
├── Chat (Cmd+L): диалог с AI
├── Composer (Cmd+I): мультифайловые правки
└── Live Preview: сразу видите результат

Как это работает:

1. Вы открываете редактор (Cursor)
2. Выделяете код → даёте инструкцию → видите изменения
3. Экспериментируете live (видите результат в браузере)
4. Быстро итерируете

Таблица сравнения: CLI vs IDE

Четыре сценария: как выбрать

Сценарий 1: Новый проект с нуля

Задача: создать новое приложение на React с нуля.

Нужно создать:
- структуру папок
- несколько компонентов
- конфигурацию
- первые страницы
- подключить API

Рекомендация: IDE (Cursor)

Почему:

• Нужна визуальная обратная связь
• Много экспериментов (try and iterate)
• Нужно видеть результат в браузере
• Composer удобен для создания нескольких файлов

Workflow:

1. Открыть Cursor
2. Cmd+I (Composer) → "Создай структуру React приложения"
3. Cursor создаёт все файлы
4. npm run dev в терминале → видите результат
5. Итерируете быстро (Cmd+K на выделенных строках)
6. Меняете дизайн, функционал on the fly

Сценарий 2: Рефакторинг большого проекта

Задача: переделать весь проект на TypeScript.

Нужно:
- переименовать 50+ файлов (.js → .ts)
- добавить типы везде
- обновить tsconfig
- проверить все imports

Рекомендация: CLI

Почему:

• Нужна автоматизация (масштабная трансформация)
• IDE сложно справиться с 50+ файлами одновременно
• Нужны скрипты и commands
• Можно запустить один раз и забыть

Workflow:

# Claude Code или другой CLI
claude "
Мигрируй проект на TypeScript:
1. Переименуй все .js на .ts
2. Добавь types (React.FC, Props interfaces)
3. Обнови tsconfig.json
4. Проверь все imports
5. Запусти npm run build для проверки
"

# Результат: все файлы переделаны в одном pass'е
# Вы просто проверяете результат

Сценарий 3: Code review и PR

Задача: подготовить PR с изменениями в git.

Нужно:
- изменить несколько файлов
- добавить тесты
- обновить документацию
- создать правильное commit message

Рекомендация: CLI (Aider или Claude Code)

Почему:

• CLI хорошо интегрирован с git
• Aider может сам коммитить с правильными сообщениями
• Легко отследить, что изменилось (git diff)
• Удобно для automation и CI/CD

Workflow с Aider:

# Aider интегрирован с git
aider --model claude-opus-4-6 \
  "Добавь обработку ошибок в api.js,
   напиши тесты в api.test.js,
   обнови README с новыми API endpoints"

# Aider:
# 1. Меняет файлы
# 2. Запускает тесты
# 3. Создаёт commit с описанием
# 4. Готово для git push

Сценарий 4: Прототипирование UI

Задача: быстро прототипировать интерфейс.

Нужно:
- создать макет страницы
- интерактивные элементы
- быстро менять дизайн
- видеть результат live

Рекомендация: IDE (Cursor)

Почему:

• Live preview важен
• Быстрая итерация (Cmd+K на каждый блок)
• Видите сразу, как выглядит
• Эффективнее, чем в CLI

Workflow:

1. Cursor + Live Server (расширение)
2. Создать HTML → Cmd+K → "добавь стили"
3. Видите результат в браузере
4. Меняете цвета, шрифты быстро
5. Экспортируете готовый код

Таблица решений: как выбрать?

graph TD
    A["Какая задача?"] --> B{"Масштаб"}
    B -->|"Один компонент"| C["IDE Cursor"]
    B -->|"Несколько компонентов"| D{"Нужна итерация?"}
    D -->|"Да, визуально"| C
    D -->|"Нет, логика"| E["CLI"]
    B -->|"Весь проект"| F{"Тип работы?"}
    F -->|"Новый проект"| C
    F -->|"Рефакторинг"| E
    F -->|"Миграция"| E
    F -->|"Прототип UI"| C

Гибридный подход: объединяем силы

Идеальный workflow: использовать оба инструмента в одном проекте.

Пример: Разработка новой feature в существующем проекте

Шаг 1: Планирование (CLI)

# Claude Code: большой обзор архитектуры
claude "
Помоги спланировать новую feature для user authentication.
@src/auth показывает текущую реализацию.

Какие файлы нужно создать/изменить?
Дай полный план."

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

Шаг 2: Реализация (IDE)

# Cursor: детальная реализация
1. Cmd+I (Composer) → создание новых компонентов
2. Cmd+K на существующих файлах → добавления функционала
3. npm run dev → видите результат live
4. Cmd+L (Chat) → обсуждаете проблемы с AI

Шаг 3: Финализация (CLI)

# Claude Code: рефакторинг и тесты
claude "
Мой код в @src/auth готов.
Улучши его:
1. Добавь TypeScript типы везде
2. Напиши Jest тесты для critical paths
3. Добавь error handling
4. Пересмотри для security issues"

# Результат: production-ready код

Когда переходить с IDE на CLI?

Переходите с Cursor на CLI когда:

1. Задача становится больше (50+ строк изменений в десятках файлов)
2. Нужна автоматизация в скриптах и пайплайнах
3. Работаете на удалённом сервере без GUI
4. Нужна batch-обработка нескольких проектов

Примечание: Cursor Agent Mode и Background Agents (с 2026) умеют коммитить, пушить и создавать PR, так что для git-интеграции CLI больше не обязателен.

Как переходить:

1. Скопируйте всё из Cursor в CLI
2. Дайте полный контекст AI (код, структура, инструкции)
3. AI доделает в CLI (автоматизирует)
4. Результат — назад в Cursor для финальных штрихов

Рекомендации по инструментам

Инструменты, которые мы рассмотрели

• Cursor — IDE на базе VS Code с встроенным AI
• Claude Code — CLI инструмент от Anthropic (в этом курсе)
• Aider — CLI + git интеграция
• Gemini CLI — Google’s решение
• GitHub Copilot — встроен в VS Code (следующий урок)

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

• CLI лучше для автоматизации и масштабирования, хуже для визуальной обратной связи
• IDE лучше для экспериментов и прототипирования, хуже для масштабной трансформации
• Новый проект → IDE (Cursor)
• Рефакторинг большого проекта → CLI
• Гибридный подход — основной workflow: планируете в CLI, реализуете в IDE, финализируете в CLI
• Выбирайте инструмент по задаче, не по привычке

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

В Уроке 5: Другие IDE-агенты рассмотрим альтернативы Cursor:

• GitHub Copilot
• Windsurf (Codeium)
• Aider
• Zed
• Cline
• Когда использовать каждый