Как работать с кодом приложения в Lovable

Как работать с кодом приложения в Lovable: откройте вкладку Code в панели проекта, найдите нужный файл, внесите ручную правку и сохраните её кнопкой Save. Ручное редактирование доступно на платных планах и требует права на редактирование проекта. Каждое сохранение становится версией в истории версий, а изменения применяются к проекту сразу.

Кто получает доступ к редактору кода

Открытие редактора кода требует права на редактирование проекта. В документации Lovable это описано так: просмотрщики проекта видят только предпросмотр приложения, а код им недоступен. То есть приглашённый наблюдатель работает с интерфейсом приложения, а редактор кода ему не показывают.

Само редактирование и сохранение файлов дополнительно требуют платного плана. На плане Free редактор работает в режиме только для чтения: в нём отображается метка Read only и предложение перейти на платный план. Файл можно открыть и прочитать, но правку внести нельзя.

Скачивание отдельного файла доступно всем, у кого есть доступ к проекту: кнопка Download в панели файла сохраняет открытый файл на компьютер. Это отдельная операция, она не связана с правом редактирования.

Для ручной правки человеку нужны право на редактирование проекта и платный план. Если человеку нужно только посмотреть, как выглядит приложение, хватает роли просмотрщика. Разделение простое и снимает лишние вопросы при онбординге.

Отдельно стоит помнить про кредиты. Ручное редактирование и сохранение кода кредиты не расходуют: они тратятся, когда работу в проекте выполняет Lovable по запросу в чате проекта. Поэтому точечная правка строки обходится без списаний, а просьба к чату — отдельный запрос с возможным расходом.

Поиск файла и строки в проекте

Слева в редакторе кода показана структура файлов проекта. Папку можно развернуть или свернуть кликом, а кнопки Expand all и Collapse all в верхней части панели раскрывают и сворачивают всё сразу. Открытые файлы появляются вкладками в верхней части области кода: несколько файлов держатся открытыми одновременно, вкладки перетаскиваются в другом порядке и закрываются, когда работа закончена.

Поиск по проекту идёт через поле Search code в верхней части панели файлов или по сочетанию Cmd+Shift+F на Mac и Ctrl+Shift+F в Windows и Linux. Результаты сгруппированы в две категории: Files — совпадения по именам файлов, In files — совпадения по содержимому. Поиск текста внутри открытого файла вызывается по Cmd+F или Ctrl+F. На платных планах та же панель позволяет заменять текст.

Дальше — учебный пример. Путь src/components/StatusLabel.tsx придуман для учебного примера. В своём проекте найдите компонент, который действительно выводит нужную подпись. В своём проекте найдите собственный компонент, который отвечает за нужную подпись, и меняйте только строку внутри него.

Правило работы с примером: не заменяйте весь реальный файл куском из статьи. Откройте свой файл, найдите строку, которую нужно изменить, и правьте ровно её. Всё остальное содержимое файла остаётся как было.

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

Условный компонент выглядит так. До правки:

export function StatusLabel() {
  return <p>Черновик</p>;
}

После правки одной строки:

export function StatusLabel() {
  return <p>На проверке</p>;
}

Изменилась только строка с текстом. Имя функции, экспорт, разметка и структура остались прежними. Такой объём правки удобен тем, что его легко проверить глазами и легко откатить.

Чтобы править файл, кликните в него и печатайте, как в любом редакторе кода. Пока идёт работа, доступны две операции: Save кнопкой или по Cmd+S на Mac и Ctrl+S в Windows и Linux, а также Discard, который выбрасывает изменения. Если уйти из редактора с несохранёнными правками, Lovable сначала попросит подтверждение.

В панели файла есть кнопка форматирования: она приводит в порядок отступы и стиль. Её удобно нажать после правки, чтобы файл не накапливал мелкие расхождения в оформлении.

Перед правкой полезно понять, где ещё используется эта подпись. Для этого подойдёт запрос в чат проекта со ссылкой на файл и строку. Такой запрос идёт через чат, а работа чата может расходовать кредиты.

Сообщение в чат со ссылкой на файл и строку

Редактор кода делает сообщения в чате проекта точнее. Ссылку на файл добавляют тремя способами: кнопкой Reference file in chat в панели файла, пунктом Reference in chat в контекстном меню файла по правому клику или набором символа @ в поле ввода чата. В документации приведён пример такого сообщения: @src/components/UserProfile.tsx add a loading state here.

Ссылку на конкретные строки ставят так: наведите курсор на номер строки и нажмите значок +, чтобы добавить в поле чата ссылку на файл и строку, либо перетащите значок, чтобы указать диапазон строк. То же действие выполняется по Cmd+Shift+L на Mac и Ctrl+Shift+L в Windows и Linux для строки или выделения под курсором. Ссылки выглядят как метки вида Button.tsx:42, и клик по метке возвращает к этой строке.

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

Образец сообщения для точечного объяснения: со ссылкой на конкретный файл и строку попросите объяснить, где используется эта подпись, и отдельно укажите, что менять код не нужно. Формулировка просьбы об объяснении — это запрос к чату, и он может расходовать кредиты. Ручная правка в редакторе кредиты не расходует.

Save и Discard: что происходит с версиями

Save и Discard — две разные операции, и их стоит держать в голове раздельно. Save фиксирует правку, Discard выбрасывает её целиком. Если уйти из редактора с несохранёнными изменениями, Lovable попросит подтверждение, так что случайная потеря правки маловероятна.

Каждое сохранение становится версией в истории версий проекта. Ручная правка откатывается так же просто, как любое изменение, которое сделал Lovable. Это ключевое свойство: у ручной работы есть точка возврата.

Сохранённые изменения применяются к проекту сразу, тем же порядком, что и изменения от Lovable. Lovable не проверяет ручные правки. Если правка что-то сломала, её возвращают из истории версий или просят Lovable исправить в чате проекта.

Отдельный случай: пока Lovable работает над проектом, кнопка Save недоступна и включается, когда работа завершена. Такое поведение предусмотрено редактором. Если правка нужна срочно, дождитесь окончания работы агента.

Для работы в собственной среде разработки с проверкой изменений до попадания в проект документация предлагает подключить проект к репозиторию и следовать разделу про локальную работу в IDE. Это отдельный маршрут, он не заменяет быструю правку в Code.

Проверка результата в preview

После сохранения правки проверьте предпросмотр. Ожидаемые признаки такие: в preview появилась новая подпись, компонент рендерится, остальное отображение сохранилось, ошибок рендера не возникло. Перечень задаёт критерии самостоятельной проверки. Редакция не выполняла этот прогон.

Порядок проверки удобно держать одинаковым. Сначала откройте preview и найдите место, где выводится изменённая подпись. Затем пройдитесь по соседним элементам экрана: они должны выглядеть как раньше. После этого посмотрите консоль и область предупреждений на предмет ошибок рендера.

Если подпись не появилась, проверьте, что сохранение прошло и что вы правили тот компонент, который действительно выводит эту надпись. Если появились ошибки рендера, верните предыдущую сохранённую версию и повторите правку меньшим шагом.

Проверка preview помогает заметить ошибку после немедленного применения ручной правки. Дальше остаётся либо оставить результат, либо откатиться.

Восстановление предыдущей версии

Восстановление идёт через историю версий проекта. Каждое сохранение из редактора кода создаёт там версию, поэтому предыдущее состояние доступно для просмотра и возврата тем же способом, что и изменения от Lovable. Конкретное название кнопки возврата в интерфейсе может отличаться, ориентируйтесь на список версий и действие возврата в нём.

Порядок действий такой. Откройте историю версий проекта. Найдите версию, созданную вашим ручным сохранением. Верните предыдущую сохранённую версию. После возврата снова проверьте preview по тем же признакам: исходная подпись вернулась, компонент рендерится, остальное отображение сохранилось, ошибок рендера нет.

Если возврат не решил задачу, отправьте в чат проекта сообщение со ссылкой на файл и строку и попросите исправить. Такой запрос идёт через чат и может расходовать кредиты.

Держите привычку: перед серией правок сохраните текущее состояние отдельным шагом, чтобы точка возврата была свежей. История версий хранит сохранения, и лишняя точка возврата стоит дешевле, чем разбор сломанного экрана.

Частые вопросы

Нужно ли уметь программировать, чтобы работать в Lovable?
Нет. Lovable пишет и ведёт код за вас, и большинство людей редактор кода не открывает. Редактор существует для просмотра того, что построено, быстрых ручных правок и совместной работы с разработчиком. Открывать его для сборки приложения не требуется.

Кто может редактировать код?
Открытие редактора кода требует права на редактирование проекта: просмотрщики видят только предпросмотр приложения. Редактирование и сохранение файлов дополнительно требуют платного плана. На плане Free редактор работает в режиме только для чтения.

Расходует ли ручное редактирование кредиты?
Нет. Правка и сохранение кода своими руками кредиты не расходуют. Кредиты тратятся, когда работу выполняет Lovable по запросу в чате проекта. Просьба объяснить что-то через чат — отдельный запрос с возможным расходом.

Попадают ли ручные правки в историю версий?
Да. Каждое сохранение из редактора кода создаёт версию в истории версий проекта. Ручные правки просматриваются и откатываются тем же способом, что и изменения от Lovable. Это делает ручное редактирование обратимым.

Почему кнопка Save неактивна?
Пока Lovable работает над проектом, кнопка Save остаётся недоступной и включается после завершения работы. Это штатное поведение редактора. Дождитесь окончания работы агента и сохраните правку.