Конспект: Roo Code: Полный гид по превращению VS Code в мощный AI-агент — VibCoderZ - VibeCoderz

Загрузка...

🎯 О чём этот конспект: Подробный разбор Roo Code (форк проекта Cline) — open-source расширения для VS Code, которое позволяет использовать любые LLM (Claude, GPT, Gemini, DeepSeek) через API для полной автоматизации написания кода, системного проектирования и тестирования в браузере.

👤 Кому будет полезно: Вайбкодерам и разработчикам, которые хотят получить функционал Cursor AI в обычном VS Code, сохранив полный контроль над расходами, выбором моделей и системными промптами.

✨ Что получите: Вы научитесь настраивать Roo Code, подключать дешевые модели (Gemini/DeepSeek) через OpenRouter, создавать кастомные AI-режимы под конкретные задачи и использовать автономного агента для создания и тестирования веб-приложений с нуля.

1. Установка и базовая настройка через OpenRouter

Контекст: Roo Code — это open-source расширение, которое работает по принципу "принеси свой ключ" (Bring Your Own API Key). Самый гибкий способ работы — использование агрегатора OpenRouter, который дает доступ ко всем топовым моделям (Claude 3.5 Sonnet, Gemini 1.5 Pro, DeepSeek V3) через единый API-интерфейс. Это позволяет избежать подписок и платить только за реальное использование токенов.

Выгода: Полный контроль над расходами. Вы видите стоимость каждого запроса в реальном времени и можете переключаться между дорогой Claude (для сложной логики) и дешевой Gemini (для рутины).

Как применить:

Шаг 1: Установка — VS Code — Найдите в магазине расширений Roo Code и установите его. В боковой панели появится иконка ракеты.
Шаг 2: Настройка API — OpenRouter — Зайдите на openrouter.ai, создайте API-ключ. В настройках Roo Code выберите провайдера OpenRouter и вставьте ключ.
Шаг 3: Выбор модели — Roo Code Settings — Выберите модель. Автор рекомендует Claude 3.5 Sonnet для архитектуры и Gemini 1.5 Flash или DeepSeek для экономии (в 30-40 раз дешевле).

Результат: Готовая к работе среда с прозрачным отображением стоимости каждого шага.

2. Использование режимов: Architect, Code и Ask

Контекст: В отличие от простых чатов, Roo Code разделяет задачи на логические этапы. Режим Architect создает план проекта и структуру, Code пишет файлы и выполняет команды в терминале, а Ask служит для исследования кодовой базы без внесения изменений.

Выгода: Снижение галлюцинаций и более структурированный подход к созданию сложных фич.

Как применить:

Шаг 1: Проектирование — Режим Architect — Введите запрос на создание проекта. Используйте кнопку "Enhance Prompt" для автоматического улучшения вашего промпта.
Шаг 2: Контекст по скриншоту — Вставьте скриншот желаемого дизайна прямо в чат. Roo Code проанализирует UI и учтет его при генерации стилей (Tailwind/CSS).
Шаг 3: Реализация — Режим Code — После утверждения плана переключитесь в режим Code. Агент начнет создавать файлы, устанавливать зависимости и запускать dev-сервер.

Результат: Автоматически созданная структура проекта с установленными зависимостями и базовым кодом.

3. Автономная отладка через Browser Automation

Контекст: Roo Code обладает уникальной функцией — встроенной автоматизацией браузера. Агент может сам запустить ваш локальный сайт, сделать скриншот, прочитать консоль ошибок и сравнить результат с вашим ТЗ.

Выгода: Вам не нужно вручную проверять каждую правку. Агент сам увидит, что кнопка "уехала" или форма не валидируется, и исправит код.

Как применить:

Шаг 1: Запуск сервера — Терминал — Убедитесь, что команда npm run dev выполнена.
Шаг 2: Визуальная проверка — Roo Code — Агент предложит запустить браузер. Нажмите Approve. Он откроет localhost:3000, сделает скриншот и проанализирует верстку.
Шаг 3: Тестирование сценариев — Промпт — Попросите: "Проверь валидацию формы регистрации". Агент сам введет неверные данные, увидит ошибку в UI и подтвердит работоспособность.

Результат: Протестированный интерфейс, соответствующий визуальному референсу.

4. Кастомизация режимов и экономия на токенах

Контекст: Вы можете создавать свои собственные режимы (например, Doc Writer или Reviewer) и назначать им разные модели. Для написания документации не нужна дорогая Claude 3.5 Sonnet — с этим справится Gemini, что сэкономит вам 97% бюджета.

Выгода: Оптимизация рабочих процессов и резкое снижение затрат на API при сохранении качества кода.

Как применить:

Шаг 1: Создание режима — Промпт — Введите запрос:

Create a new mode called 'Documentation Writer' that only has access to edit .md files and uses Gemini 1.5 Flash API. Role: Technical Writer.

Шаг 2: Настройка правил — Settings (иконка книги) — Отредактируйте JSON нового режима. Можно ограничить доступ к инструментам (например, запретить выполнять команды в терминале для режима Ask).
Шаг 3: Глобальные инструкции — Custom Instructions — Добавьте правила, которые будут применяться всегда (например, "Всегда используй TypeScript" или "Пиши комментарии на русском").

Результат: Персонализированный AI-инструментарий, настроенный под ваш стек и бюджет.

5. Работа с MCP (Model Context Protocol)

Контекст: Roo Code поддерживает протокол MCP, который позволяет подключать к AI внешние инструменты: базы данных, Docker, Google Search или специфические API.

Выгода: AI-агент выходит за пределы редактора кода и может взаимодействовать с вашей инфраструктурой напрямую.

Как применить:

Шаг 1: Подключение сервера — MCP Tab — Добавьте конфигурацию MCP сервера (например, для работы с PostgreSQL).
Шаг 2: Создание инструментов через AI — Промпт — Вы можете попросить Roo Code:

Add a new MCP tool that allows you to search documentation on the web for [Library Name].

Шаг 3: Использование — Теперь агент сможет сам "гуглить" документацию новых библиотек, если они вышли после даты отсечки знаний модели.

Результат: Расширяемый функционал агента, ограниченный только вашими потребностями.

FAQ

В: Чем Roo Code лучше Cursor? О: Roo Code — это расширение, а не отдельный форк VS Code, что позволяет использовать все ваши привычные плагины. Главное преимущество — полная прозрачность затрат (BYOK) и возможность глубокой настройки системных промптов и режимов, чего нет в Cursor.

В: Насколько безопасно давать агенту доступ к терминалу и браузеру? О: По умолчанию Roo Code запрашивает разрешение (Approve) на каждое действие. Вы можете включить Auto-approve для определенных команд, если доверяете модели, но для безопасности лучше оставить подтверждение на удаление файлов или выполнение системных скриптов.

В: Как минимизировать расходы при использовании Claude 3.5 Sonnet? О: Используйте режим Architect с Claude для планирования, а затем переключайтесь в режим Code с моделью DeepSeek V3 или Gemini 1.5 Flash для написания рутинного кода. Также следите за размером контекста и вовремя очищайте историю чата.

В: Можно ли использовать локальные модели через Ollama? О: Да, Roo Code поддерживает подключение к локальным эндпоинтам. В настройках выберите OpenAI Compatible и укажите URL вашего локального сервера (например, http://localhost:11434/v1 для Ollama).

В: Что делать, если агент зациклился на одной ошибке? О: Используйте символ @ и добавьте Problems или конкретные файлы в контекст. Если не помогает, смените режим на Architect и попросите пересмотреть подход к решению задачи, предоставив логи терминала.

Конспект создан на основе видео «Roo Code: The Open Source Cursor Killer?» канала Gareth Dwyer. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=r5T3h0BOiWw