# IDE и кодовые агенты

> [HTML-версия](https://learnvibecoding.ru/publiclessons/ide-i-kodovye-agenty) · [Индекс для LLM](https://learnvibecoding.ru/llms.txt) · [Политика использования материалов](https://learnvibecoding.ru/politika-materialov)
> Материалы защищены. Обучение LLM без согласия запрещено. При разрешённом использовании — обязательна прямая ссылка на страницу-источник.

**Курс:** Основы вайбкодинга

# Урок 3: IDE и кодовые агенты
## Как выбрать инструмент и работать с AI в редакторе кода

### Переход от Урока 2
В прошлом уроке ты выбрал **инструмент** (Lovable, Cursor, VS Code). Теперь нужно понять **как фактически работать в этом инструменте**. IDE — это твой основной фундамент для вайб-кодинга. Неправильно выбранная IDE или неправильное использование AI помощника замедляет разработку в 10 раз.

---

## Блок 0: Когда это нужно знать?

**Пропусти урок, если:**
- Ты используешь только no-code инструменты (Zapier, Make, Bubble)
- Ты нанимаешь разработчика и не планируешь сам писать код

**Изучи внимательно, если:**
- Ты выбрал Cursor, VS Code или Claude Code
- Ты собираешься работать с AI агентом в IDE
- Ты founder без опыта программирования и боишься, что IDE сложная

---

## Блок 1: Почему IDE нужна для вайб-кодинга

### IDE vs Notepad vs Web-редактор

```
IDE (Integrated Development Environment) = интегрированный офис для программиста

Notepad:                  IDE:                         Web-редактор (Lovable):
📝 Только текст           📝 Текст + AI помощник       🎨 Visual + AI
❌ Нет отладки            ✓ Находит ошибки             ✓ Показывает результат
❌ Нет подсказок          ✓ Подсказки (autocomplete)   ✓ Интерактивно
❌ Нет запуска кода       ✓ Запуск на localhost        ✓ Встроенный просмотр
❌ Нет управления         ✓ Git интеграция             ✓ Автосохранение
```

**IDE нужна потому что:**

1. **Автодополнение (Autocomplete)** — AI подсказывает код пока ты пишешь или даже делает это за тебя (Cmd+K в Cursor)
2. **Находит ошибки в реальном времени** — красная волнистая линия под ошибками, не нужно запускать код чтобы узнать что-то не так
3. **Встроенный терминал** — запускаешь `npm start` прямо в IDE, видишь результат в localhost:3000
4. **Git интеграция** — управляешь версиями кода без командной строки (или с ней если хочешь)
5. **Контекст для AI** — IDE может показать AI весь твой проект (@codebase), потом AI пишет код который совпадает с твоим стилем

**Разница в скорости:**
- Без IDE: 30 минут на одну функцию
- С IDE + AI: 5 минут на одну функцию

---

## Блок 2: Cursor — IDE специально для вайб-кодинга (РЕКОМЕНДУЕМ)

### Что такое Cursor

Cursor = VS Code + Claude AI встроено + специальные команды для кодирования.

Создана специально для вайб-кодинга (разработка с помощью AI). Если ты выбрал Cursor из урока 3.2 — это правильный выбор.

### Установка и регистрация

**Шаг 1: Скачай с сайта**

Переходишь на [cursor.com](https://www.cursor.com/) и скачиваешь приложение для твоей ОС (macOS, Windows, Linux). Установка как обычное приложение — нажимаешь Next несколько раз.

**Шаг 2: Зарегистрируйся**

При первом запуске Cursor попросит регистрацию. Варианты:
- Email + пароль
- Google аккаунт
- GitHub аккаунт (рекомендуем, потом удобнее работать с репозиториями)

После регистрации пройдешь капчу. Готово.

### Три способа открыть проект

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

**1. Clone repo** — открыть проект из GitHub

```
Подходит для:
- Когда твой код уже на GitHub
- Когда хочешь работать с существующим проектом

Как работает:
1. Подключаешь свой GitHub (через Settings)
2. Видишь список своих репозиториев
3. Выбираешь нужный → Cursor скачивает и открывает
4. Можешь сразу начать писать код
```

**2. Open project** — открыть папку на своём компьютере

```
Подходит для:
- Когда создаёшь новый проект с нуля
- Когда код уже лежит на компьютере

Как работает:
1. Нажимаешь "Open project"
2. Выбираешь папку на диске (или создаёшь новую)
3. Cursor открывает её как рабочую папку
4. Сразу можешь начать писать код
```

**3. Connect via SSH** — подключиться к удалённому серверу

```
Подходит для:
- Продвинутых пользователей
- Когда проект на удалённом сервере

Как работает:
- Подключаешься к серверу через SSH
- Редактируешь код на сервере как на локальном компьютере
- Полезно для продакшена и командной разработки
```

### Интерфейс Cursor (что где находится)

Когда откроешь проект, увидишь экран с тремя основными зонами:

```
┌─────────────────────────────────────────────────────┐
│  ⚙️  💬  ⌨️  📂         (верхний левый угол)       │
├─────────────────────────────────────────────────────┤
│                                                     │
│   📂 Файлы проекта    │   💻 Редактор кода          │
│  (левая панель)      │   (основное окно)           │
│                      │                             │
│  - src/              │   file.js                   │
│  - components/       │   console.log('hello')      │
│  - package.json      │                             │
│                      │   ⌨️ Terminal (внизу)       │
└─────────────────────────────────────────────────────┘
```

**Левый верхний угол — 4 кнопки:**

1. **⚙️ Settings** — настройки Cursor
   - Здесь подключаешь свои API ключи (Claude, OpenAI)
   - Добавляешь custom instrutions (правила для AI)
   - Выбираешь какую модель использовать

2. **💬 Chat** — чат с AI моделью
   - Пишешь задачу в текстовом чате
   - AI отвечает и может добавить код в файлы
   - Можно спросить что угодно про код проекта

3. **⌨️ Terminal** — командная строка
   - Запускаешь `npm start` (локальный сервер)
   - Видишь ошибки и выходные сообщения
   - Запускаешь тесты, deploy и прочее

4. **📂 Explorer** — навигация по файлам
   - Видишь папки и файлы проекта
   - Нажимаешь на файл → открывается в редакторе
   - Можешь создавать новые файлы и папки

**Левая сторона — важная настройка**

В левом нижнем углу есть переключатель между режимами. **Убедись что включен "Editor" режим.**

```
⚙️ Settings
✎ Editor      ← ВКЛЮЧИ ЭТА
◐ Outline
```

В режиме Editor проще работать с AI и проектом. Это рекомендуемый способ.

**Настройки (⚙️) — что там делать**

В правом верхнем углу есть шестеренка → Settings. Там важные разделы:

1. **Models** — какие модели использовать
   - По умолчанию: Claude (платно, по подписке)
   - Можешь добавить свой API ключ и платить по использованию (часто дешевле)

2. **Features** — включить/выключить функции
   - Autocomplete (подсказки при печати)
   - Agentic editing (AI может самостоятельно менять файлы)

3. **Settings & memory** — кастомные настройки
   - Здесь можешь добавить Instructions для AI
   - Пример: "Используй TypeScript, не комментируй код, следуй моему стилю"

---

## Блок 3: Терминал в IDE — как запускать команды

### Что такое терминал

**Терминал** = командная строка внутри IDE где ты пишешь команды для запуска кода.

```
Это НЕ для новичков, это важный инструмент!

Без терминала:
- Не можешь запустить npm start
- Не видишь ошибки при запуске
- Не можешь устанавливать библиотеки
- Не можешь работать с Git

С терминалом:
- Запускаешь код на localhost
- Видишь все ошибки в реальном времени
- Устанавливаешь нужные пакеты
- Работаешь с Git (commit, push, pull)
- Полный контроль над проектом
```

### Где находится терминал в IDE

**В Cursor:**
1. Нажимаешь иконку ⌨️ (Terminal) в верхнем левом углу
2. Внизу экрана открывается панель с чёрным окном
3. Это и есть терминал

**В VS Code:**
1. Меню → Terminal → New Terminal (или Ctrl+`)
2. Внизу экрана открывается терминал

**Как выглядит:**
```
~/my-project $ |
               ↑
           Здесь ты пишешь команды
```

Строка `~/my-project $` означает что ты находишься в папке `my-project` и готов писать команды.

### Основные команды которые нужны при вайб-кодинге

**Команда 1: npm start (запустить приложение)**

```
В терминале пишешь:
$ npm start

Что происходит:
- Запускается твой React/Node приложение
- Открывается localhost:3000 в браузере
- Видишь результат кода в реальном времени

Останавливаешь:
Нажимаешь Ctrl+C в терминале
```

**Команда 2: npm install (установить пакеты)**

```
Когда AI генерирует код который использует новую библиотеку:
$ npm install express
$ npm install react-router-dom

Что происходит:
- Скачивается библиотека из интернета
- Добавляется в папку node_modules
- Теперь можешь использовать в коде

Когда клонируешь проект с GitHub:
$ npm install

(без названия библиотеки)
Это установит ВСЕ библиотеки которые нужны для проекта
```

**Команда 3: git commit (сохранить версию кода)**

```
Когда закончил работу над фичей:
$ git add .
$ git commit -m "Добавь форму логина"

Что происходит:
- Сохраняется текущая версия кода
- С описанием что ты сделал
- Можешь вернуться к этой версии потом если нужно
```

**Команда 4: git push (отправить код на GitHub)**

```
Когда хочешь сохранить код на GitHub (облаке):
$ git push

Что происходит:
- Код отправляется на твой GitHub репозиторий
- Backup если что-то случится с компьютером
- Делишься кодом с командой или показываешь инвесторам
```

**Команда 5: npm test (запустить тесты)**

```
$ npm test

Что происходит:
- Запускаются автоматические тесты
- Проверяет что твой код работает правильно
- Показывает где ошибки
```

### Как использовать терминал при вайб-кодинге

**Workflow:**

```
1. AI пишет код (Cmd+K)
   ↓
2. Ты видишь код в редакторе
   ↓
3. Открываешь терминал (⌨️ иконка)
   ↓
4. Пишешь: npm start
   ↓
5. Видишь результат на localhost:3000 в браузере
   ↓
6. Работает? → git commit (сохраняешь)
   Не работает? → Cmd+K (просишь AI исправить)
   ↓
7. Пишешь npm start снова → проверяешь
   ↓
8. Готово → git push (отправляешь на GitHub)
```

### Основные ошибки в терминале и что с ними делать

**Ошибка 1: "command not found: npm"**

```
Значит: npm не установлен на компьютер

Решение:
1. Скачай Node.js с nodejs.org
2. Установи (включает npm автоматически)
3. Перезагрузи IDE
4. Попробуй npm start снова
```

**Ошибка 2: "npm ERR! code EACCES"**

```
Значит: Нет прав доступа

Решение:
Попробуй: sudo npm install (напишет пароль)
или переустанови Node.js
```

**Ошибка 3: "Cannot find module 'express'"**

```
Значит: Забыл установить библиотеку

Решение:
$ npm install express

Потом попытайся запустить снова
```

**Ошибка 4: "Port 3000 is already in use"**

```
Значит: Приложение уже запущено на этом порту

Решение:
1. Закрой другое приложение которое использует порт 3000
ИЛИ
2. Нажми Ctrl+C в терминале чтобы остановить процесс
3. Напиши npm start снова
```

### Советы по работе с терминалом

**Совет 1: Используй разные терминалы для разных задач**

```
В Cursor можно открыть несколько терминалов одновременно.

Terminal 1: npm start (всегда запущен, вверху)
Terminal 2: git (для Git команд)
Terminal 3: npm install (для установки пакетов)

Так не нужно останавливать npm start когда нужна другая команда
```

**Совет 2: Смотри вывод терминала очень внимательно**

```
Когда запускаешь npm start, видишь много текста.
Смотри на:

✅ "compiled successfully" → код работает
❌ "error" → есть ошибка в коде

Прочитай error сообщение → скопируй → спроси AI в Cmd+L
```

**Совет 3: Ctrl+C чтобы остановить процесс**

```
Если что-то зависло в терминале:
Нажми Ctrl+C (одновременно Control и C)

Это остановит текущий процесс (например npm start)
```

**Совет 4: История команд стрелка вверх**

```
Нажми стрелку ⬆️ в терминале → покажет последнюю команду
Ещё раз ⬆️ → ещё более старую команду

Удобно чтобы не переписывать одни и те же команды
```

**Совет 5: Очистить терминал**

```
Если в терминале много текста и запутанно:
Напиши: clear
И нажми Enter

Все старые команды исчезнут, терминал чистый
```

---

## Блок 4: Как работать в Cursor с AI

### Три способа попросить AI написать код

**Способ 1: Cmd+K (в открытом файле)**

```
Ты открыл файл → Нажимаешь Cmd+K (Ctrl+K на Windows)
                → Внизу экрана появляется текстовое поле
                → Пишешь: "Add button component with onClick handler"
                → AI пишет код в файле
                → Просматриваешь и нажимаешь ✓ принять
```

**Способ 2: Cmd+L (в чате)**

```
Ты нажимаешь Cmd+L
→ Открывается Chat в боку экрана
→ Пишешь вопрос: "How do I connect to Supabase?"
→ AI отвечает в чате с полными объяснениями
→ Если нужно, AI может добавить код в файл
```

**Способ 3: @codebase (в чате для контекста)**

```
Это САМОЕ МОЩНОЕ! 

В чате пишешь: @codebase redesign login page to show password field
                        ↑
                        Это говорит AI: смотри весь мой проект!
                        Потом напиши изменения которые подходят к моему стилю
                        и структуре

AI может видеть:
- Все файлы проекта
- Твой стиль кодирования
- Существующие компоненты
- Database structure

Результат: код который точно совпадает с твоим проектом
```

---

## Блок 5: Практические советы по работе с Cursor

### Совет 1: Делай максимально понятные запросы

```
❌ Неправильно: "Исправь кнопку"
(Непонятно что не так)

✅ Правильно: "Кнопка 'Submit' не реагирует на клик. 
             Когда нажимаю на неё, ничего не происходит. 
             Нужно чтобы при клике открывался модальное окно с сообщением 'Form submitted'."
             
Добавляй контекст:
- Что делаешь (нажимаю кнопку)
- Что ожидаешь (открыть окно)
- Что происходит вместо этого (ничего)
```

### Совет 2: Один чат = одно действие

```
Контекст чата ограничен, не пытайся в одном чате:
- Написать всю логику
- Добавить несколько функций
- Исправить 10 ошибок

Вместо этого:
Чат 1: "Create login form"
Чат 2: "Add email validation"
Чат 3: "Connect to database"

Это дороже в токенах но точнее по результатам.
```

### Совет 3: Сохраняй рабочие команды

```
Повторяющиеся команды которые будут нужны:
- npm start (запуск локального сервера)
- npm test (запуск тестов)
- npm run build (сборка для продакшена)

Когда AI даёт команду → скопируй её в отдельный файл
Потом просто копируешь и вставляешь вместо того чтобы печатать
```

### Совет 4: Используй разные терминалы

```
Открой 2-3 терминала одновременно в Cursor:
Terminal 1: npm start (разработка, всегда работает)
Terminal 2: npm test (запускаешь когда нужно проверить)
Terminal 3: git (версионирование, иногда)

Это удобнее чем останавливать процессы и стартовать заново.
```

### Совет 5: ВСЕГДА сохраняй версию перед изменением

```
КРИТИЧНО: Перед тем как AI редактирует важный файл:
1. Скопируй его содержимое
2. Создай новый файл вроде "file.backup.js"
3. Вставь туда старую версию
4. Потом просишь AI менять оригинальный файл

Если AI сломает код → быстро восстановишь из backup.

Пример:
file.js (original) → скопировал → file.backup.js (старая версия)
                                 → file.js (может меняться AI)
Если что-то пойдёт не так, можешь быстро вернуть старое.
```

### Совет 6: Не бойся спрашивать простые вопросы

```
AI никогда не скажет что вопрос глупый.

Можешь спросить:
- "Что это означает? → [код]"
- "На каком языке писать?"
- "Как запустить этот файл?"
- "Что такое асинхронная функция?"
- "Как это работает?"

AI даст подробный ответ с примерами.
Это особенно полезно для новичков.
```

### Совет 7: Изучи GitHub

```
GitHub = хранилище для версий твоего кода.

В Cursor:
1. Нажимаешь на иконку Source Control (слева)
2. Видишь все изменения в файлах
3. Можешь сделать Commit (сохранить версию)
4. Push на GitHub (отправить на сервер)

Зачем это нужно:
- История всех изменений (можешь откатиться к старой версии)
- Backup (код на безопасном сервере GitHub)
- Возможность делиться с другими

Попроси AI помочь с Git командами если не знаешь.
```

---

## Блок 6: VS Code + GitHub Copilot (если Cursor платный)

### Когда использовать вместо Cursor

VS Code = самый популярный редактор кода (75% разработчиков)
GitHub Copilot = AI помощник от GitHub

```
Cursor             VS Code + Copilot
Специально для AI  Универсальный редактор + отдельный AI
$20/месяц          $10/месяц (только за Copilot)
Проще для новичка  Нужно больше настроек
```

**Когда выбрать VS Code:**
- Ты экономишь на Copilot ($10 вместо $20)
- Ты уже знаешь VS Code
- Ты хочешь больше свободы и расширений

### Как установить VS Code + Copilot

**Шаг 1:** Скачай VS Code с [code.visualstudio.com](https://code.visualstudio.com/)

**Шаг 2:** В VS Code открой Extensions (левая панель → квадратик)

**Шаг 3:** Ищи "GitHub Copilot" → установи

**Шаг 4:** Авторизуйся через GitHub → готово

### Как работать с Copilot в VS Code

```
Copilot         Cursor
Suggestions     Cmd+K (прямое редактирование)
(подсказки)     

В VS Code:
Ты печатаешь → Copilot показывает подсказку (серый текст)
             → Нажимаешь Tab чтобы принять
             → Или игнорируешь и пишешь свой код

Это медленнее чем Cmd+K в Cursor, но работает.
```

**Ограничение:** Copilot не может смотреть твой весь проект (@codebase) автоматически. Нужно вручную показывать контекст.

---

## Блок 7: Claude Code (VS Code с Claude интеграцией)

### Что это

Claude Code = расширение для VS Code которое интегрирует Claude AI прямо в редактор. Это как Cursor, но в VS Code с преимуществами Claude модели.

**Как работает:**
```
Установишь расширение Claude Code в VS Code
↓
Подключишь свой Anthropic API ключ
↓
Можешь использовать Claude Cmd+K (как в Cursor)
↓
Платишь за токены по API (обычно дешевле подписки)
```

**Плюсы:**
- Claude модель (обычно лучше для сложного кода, чем GPT)
- Платишь только за использование (часто дешевле $20/месяц Cursor)
- Полный контроль над моделью и настройками
- Можешь использовать свой API ключ вместо чужой подписки
- @codebase работает (смотрит весь твой проект)

**Минусы:**
- Нужна техническая подготовка (установить расширение, добавить API ключ)
- Медленнее чем Cursor (VS Code медленнее для больших проектов)
- Меньше встроенных функций чем в Cursor
- Нужно самому управлять API квотами

**Когда выбрать:**
- Если ты опытный программист и хочешь сэкономить
- Если ты много кодишь и платишь много за подписки
- Если ты предпочитаешь Claude и хочешь полный контроль
- Если у тебя есть свой API ключ Claude

### Как установить Claude Code

**Шаг 1: Установи расширение**

В VS Code → Extensions (левая панель) → Ищешь "Claude Code" → Install

**Шаг 2: Получи API ключ**

1. Переходишь на [console.anthropic.com](https://console.anthropic.com)
2. Создаёшь аккаунт или логинишься
3. Идёшь в API Keys → Создаёшь новый ключ
4. Копируешь его

**Шаг 3: Подключи ключ в VS Code**

1. В VS Code нажимаешь Cmd+, (Settings)
2. Ищешь "Claude Code"
3. Вставляешь твой API ключ в поле "API Key"
4. Готово

### Как работать в Claude Code

**Cmd+K (в файле)** — AI пишет код
```
Ты открыл файл → Нажимаешь Cmd+K
                → Пишешь: "Add button component"
                → Claude пишет код в файл
```

**Cmd+L (в чате)** — диалог с Claude
```
Нажимаешь Cmd+L → Открывается Chat в боку
              → Пишешь вопрос про код
              → Claude отвечает и может добавить код в файлы
```

**@codebase** — Claude видит твой проект
```
В чате пишешь: @codebase add dark mode support to this component
                        ↑
                Claude видит весь твой проект!
```

### Цена Claude Code

```
Cursor:           $20/месяц (неограниченно)

Claude Code:      Платишь за API использование
                  Примерно: $0.003 за 1000 токенов
                  
                  Средний расход: 50K токенов/день
                  Цена: ~$0.15/день = ~$4.5/месяц
                  
                  (если ты экономный)
                  
                  или ~$15/месяц если много кодишь
```

---

## Блок 8: Codex (OpenAI для кода)

### Что такое Codex

Codex = модель OpenAI специально обучена на коде. Это основа для GitHub Copilot и других инструментов.

**Важно:** Codex это не самостоятельный инструмент как Cursor, это **API которую используют другие приложения**.

Примеры где работает Codex:
- GitHub Copilot (встроена в VS Code, JetBrains)
- OpenAI Playground (试험с кодом в браузере)
- Пользовательские интеграции (если ты программист и интегрируешь Codex API)

### Когда используют Codex

**Сценарий 1: GitHub Copilot (самый популярный)**
```
VS Code + GitHub Copilot → использует Codex
↓
Ты печатаешь код → Codex предлагает подсказку
```

**Сценарий 2: OpenAI Playground**
```
Открываешь playground.openai.com
Выбираешь "Code" mode → Пишешь комментарий
↓
Codex генерирует код в браузере (для экспериментов)
```

**Сценарий 3: Кастомная интеграция**
```
Если ты программист, можешь:
1. Получить Codex API от OpenAI
2. Интегрировать в свой инструмент
3. Использовать как базу для своего AI помощника
```

### Codex vs Claude vs GPT-4

| Параметр | Codex | Claude | GPT-4 |
|----------|-------|--------|-------|
| Специализация | Код | Общее + код | Общее + код |
|质质 для кода | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| Скорость | Быстрая | Среднняя | Медленная |
| Цена | Средняя | Средняя | Дорого |
| Где использовать | GitHub Copilot | Cursor, Claude Code | ChatGPT Pro |

**Вывод:** Для вайб-кодинга выбирай Claude (Cursor) или GitHub Copilot, не нужно искать Codex напрямую.

---

## Блок 9: Почему IDE нужна для работы с AI кодом

### Простой ответ

IDE ≠ просто редактор текста

IDE = редактор + AI помощник + терминал + отладка + Git

```
Без IDE:                          С IDE:
❌ AI пишет код                  ✓ AI пишет код в файл
❌ Копируешь вручную             ✓ Cmd+K → автоматически
❌ Не видишь ошибки              ✓ Красная волнистая линия
❌ Не можешь запустить            ✓ npm start в терминале
❌ Трудно отлаживать             ✓ Debugger встроен
❌ Трудно с Git                   ✓ Git визуально
```

### Технический ответ

IDE нужна потому что:

1. **Context awareness** — IDE знает структуру проекта
   ```
   AI в браузере (ChatGPT): не знает какие файлы у тебя есть
   AI в IDE (Cursor/Claude Code): знает весь проект через @codebase
   
   Результат: IDE генерирует совместимый код, браузер генерирует общий код
   ```

2. **Real-time feedback** — видишь ошибки сразу
   ```
   IDE: печатаешь → видишь синтаксис ошибку красной линией → исправляешь
   Браузер: пишешь код → копируешь → вставляешь → запускаешь → ошибка
   ```

3. **Integrated development** — всё в одном месте
   ```
   IDE: Код + Terminal + Chat с AI + Git + Debugger
   Браузер: Код в отдельной вкладке, Terminal отдельно, Chat отдельно
   ```

4. **Performance** — быстрее работать
   ```
   IDE: Cmd+K → Code apareces → Готово (5 секунд)
   Браузер: ChatGPT → Generate → Copy → Switch tabs → Paste (30 секунд)
   ```

### Почему каждой IDE нужна AI

| IDE | Почему нужна AI | Как работает |
|-----|-----------------|--------------|
| **Cursor** | Специально сделана для AI | Cmd+K встроен, @codebase встроен |
| **VS Code + Copilot** |Ускоряет ввод кода | Suggestions при печати |
| **Claude Code** | Claude в VS Code | Cmd+K через API, @codebase |
| **JetBrains + Copilot** | Встроенный AI для IDE | Suggestions, completions |

---

## Блок 10: Другие IDE — когда они нужны

### Replit (облако, без установки)

```
Что это: IDE в браузере, не нужно ничего устанавливать

Подходит для:
- Учебные проекты
- Когда нет мощного компьютера
- Когда хочешь быстро начать

Не подходит для:
- Серьёзных продаккшена проектов
- Когда нужна полная контроль

Цена: $7-49/месяц
```

### GitHub Codespaces (облачный VS Code)

```
Что это: VS Code в облаке GitHub

Подходит для:
- Командная разработка (все видят одно)
- Удалённая работа
- Не нужен мощный компьютер

Не подходит для:
- Личные проекты (неудобно делать приватные)
- Когда не хочешь платить за облако

Цена: $0-180/месяц зависит от часов использования
```

### JetBrains IDE (PyCharm, IntelliJ)

```
Что это: IDE для Python/Java/Kotlin с встроенным AI

Подходит для:
- Python проекты (PyCharm лучше всех)
- Если уже платишь за JetBrains

Не подходит для:
- Frontend (React) — лучше VS Code/Cursor
- Новичков (более сложная)

Цена: $15-20/месяц
```

---

## Блок 11: Полное сравнение IDE в 2026

### Для вайб-кодинга (если ты founder без опыта)

| IDE | Цена | Простота | AI модель | @codebase | Лучше всего для |
|-----|------|----------|-----------|-----------|-----------------|
| **Cursor** 🎯 | $20/мес | ⭐⭐⭐⭐⭐ | Claude | ✓ встроен | РЕКОМЕНДУЕМ новичкам |
| VS Code + Copilot | $10/мес | ⭐⭐⭐⭐ | GPT-4 | ⚠️ вручную | Если экономишь |
| Claude Code | $5-15/мес | ⭐⭐⭐ | Claude | ✓ встроен | Экономный вариант |
| Replit | $7/мес | ⭐⭐⭐⭐⭐ | Replit AI | ⚠️ слабо | Учебные проекты |

### Для опытных разработчиков (которых ты нанял)

| IDE | Рынок | Стандарт | AI интеграция |
|-----|-------|----------|-----------------|
| **VS Code** | 75% | ✓✓✓ стандарт | GitHub Copilot опциональный |
| **JetBrains** (IntelliJ, PyCharm) | 20% | ✓✓ популярен | Встроенный AI |
| **Vim/Neovim** | 5% | ✓ опытные | Плагины, не встроено |

### Сравнение по важным параметрам

**Для новичка — выбирай по этому:**

```
Хочу максимум скорости → Cursor ($20/мес)
Хочу максимум экономии → Claude Code ($5-15/мес) или VS Code + Copilot ($10/мес)
Хочу облако (без установки) → Replit ($7/мес)
Не хочу платить вообще → VS Code + Copilot бесплатно (без AI) или GitHub Copilot free tier
```

**@codebase (самое важное для вайб-кодинга):**

```
Cursor:      ✓✓✓ встроена, самая мощная, работает автоматически
Claude Code: ✓✓ встроена, хорошо работает через API
VS Code:     ⚠️ нет встроенной, нужно показывать контекст вручную
Copilot:     ⚠️ слабо работает с контекстом
```

**Интеграция с браузером и локальным серером:**

```
IDE + Terminal         Браузер
IDE имеет terminal  →  Браузер не может запускать
npm start            local code
↓                   ↓
localhost:3000      Только просмотр
полный контроль     Limited
```

---

## 🎯 Практическое упражнение

### Задача: Установи IDE и создай свой первый проект

**Вариант А — РЕКОМЕНДУЕМ (Cursor):**

```
1. Скачай Cursor с cursor.com
2. Зарегистрируйся (Google или GitHub)
3. Нажми "Open project"
4. Создай новую папку "my-first-project"
5. Открой в Cursor

6. Нажми Cmd+L → Chat
7. Напиши: create a simple to-do list app with React
8. Посмотри код который сгенерировал AI
9. Нажми в Terminal: npm start
10. Открой localhost:3000 в браузере → видишь приложение работает!
```

**Вариант B — Экономный (Claude Code + VS Code):**

```
1. Скачай VS Code с code.visualstudio.com
2. Открой Extensions (Ctrl+Shift+X)
3. Ищешь "Claude Code" → Установи
4. Получи API ключ: console.anthropic.com → API Keys → Новый ключ
5. В VS Code Settings → ищешь Claude Code → вставляешь ключ
6. Открой папку (File → Open Folder)

7. Нажми Cmd+K → Напиши: create a simple to-do list with React
8. Claude генерирует код
9. Terminal: npm start
10. localhost:3000 → приложение работает!

Цена: $5-15/месяц вместо $20
```

**Вариант C — Только браузер (VS Code + GitHub Copilot бесплатно):**

```
1. Скачай VS Code
2. Установи GitHub Copilot
3. Открой папку
4. Печатаешь комментарий: // Create button
5. Copilot показывает подсказку → Tab принимаешь
6. Terminal: npm start → localhost:3000

Минус: медленнее, нужно много итераций
```

**Что ты должен понять после этого упражнения:**
- ✓ Как открывать проект в IDE
- ✓ Как использовать Cmd+K для генерирования кода
- ✓ Как запускать код на localhost
- ✓ Как видеть ошибки в реальном времени
- ✓ Как @codebase делает AI умнее (если используешь Cursor)

---

## ✨ Главное про IDE в 2026

```
IDE это не просто редактор, это твой AI помощник.

Без IDE:        С IDE:
Copy-paste      AI пишет в файл прямо
10 минут        2 минуты

Без IDE:        С IDE:
Ручное тестиро  Terminal встроен
30 минут        npm start нажимаешь

Без IDE:        С IDE:
Git через cmd   Git визуально
Запутаешься     1 клик → commit

Выбери IDE → научись работать с AI в нём → скорость в 10 раз выше.
```

---

## 📚 Источники и дополнения

**Cursor:**
- [Cursor официальный сайт и загрузка](https://cursor.com)
- [Cursor документация](https://docs.cursor.com)
- [Cursor GitHub](https://github.com/getcursor/cursor)

**Claude Code:**
- [Anthropic API Console (для API ключей)](https://console.anthropic.com)
- [Claude код в VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Anthropic.claude-vscode)
- [Документация Anthropic API](https://docs.anthropic.com)

**GitHub Copilot:**
- [GitHub Copilot гайд](https://github.com/features/copilot)
- [GitHub Copilot documentation](https://docs.github.com/copilot)

**OpenAI Codex:**
- [OpenAI Playground (попробовать)](https://platform.openai.com/playground)
- [OpenAI API Documentation](https://platform.openai.com/docs)

**VS Code и Git:**
- [VS Code загрузка](https://code.visualstudio.com)
- [Как работать с GitHub](https://guides.github.com)
- [GitHub Desktop (графический интерфейс для Git)](https://desktop.github.com)

[Все уроки](https://learnvibecoding.ru/publiclessons.md) · HTML: https://learnvibecoding.ru/publiclessons