Редактирование Vue
Как править файлы .vue репозитория прямо из плагина в Dev Mode: папка кода в Git-подключении, дерево файлов, редактор, View diff, Save & Publish с проверкой конфликтов и быстрая привязка кнопкой Connect.
Во вкладке Code Connect в Dev Mode можно открыть файл .vue из репозитория, поправить его и опубликовать одним коммитом, не выходя из Figma.
Что нужно заранее
- Активное Git-подключение в подвале плагина.
- Заполненное поле Code folder в настройках этого подключения для Dev Mode: папка репозитория, из которой строится дерево файлов.
- Настроенный Repository connection для Code Connect, если вы собираетесь привязывать файлы.
Подключение с папкой кода нужно только для правки исходников. Токены и данные по-прежнему синхронизируются из настроек в режиме Design.
Рабочая область
| Часть | Что в ней |
|---|---|
| Дерево слева | Папки и файлы из папки кода, раскрываются по клику. Редактируются только .vue. Связанные через Code Connect файлы отмечены галочкой. Кнопка обновления перечитывает дерево |
| Редактор справа | Подсветка по расширению, строка состояния с языком, числом строк и состоянием синхронизации. Отметка Uncommitted означает несохранённые правки |
| Кнопки над редактором | View diff, Save & Publish, Connect |
Save & Publish
- Плагин перечитывает файл в репозитории.
- Если файл не менялся с момента открытия, коммит уходит сразу.
- Если файл изменился, открывается окно конфликта с diff и выбором:
- Overwrite remote: опубликовать вашу версию поверх изменений в репозитории;
- Reload from remote: взять версию из репозитория и потерять локальные правки;
- Cancel.
После публикации отметка Uncommitted снимается, редактор запоминает новую версию как базовую. Сообщение коммита по умолчанию: [SXL Studio] Update <путь к файлу>.
Горячая клавиша: Cmd + S на macOS, Ctrl + S на Windows и Linux.
View diff
View diff показывает сравнение вашей версии с версией в репозитории без публикации. Смотрите его перед Save & Publish, чтобы проверить объём изменений.
Connect
Connect связывает открытый файл .vue с выделенным на холсте компонентом или набором вариантов: создаётся привязка Vue 3 и обновляется файл реестра Code Connect. Кнопка неактивна, если компонент не выделен или не задан Repository URL в настройках репозитория. Подробнее: Code Connect и Storybook.
Защита от потерь
- При переходе к другому файлу с несохранёнными правками плагин спрашивает подтверждение.
- Публикация никогда не перетирает чужие изменения молча: при расхождении открывается окно конфликта.
- Если публикация не удалась, правки остаются в редакторе.
Ограничения
- Редактируются существующие файлы
.vue; создать новый файл из этой вкладки нельзя. - Предпросмотра компонента здесь нет.
- Для подключения только с папкой кода Pull может сообщать, что обновлять нечего: эта вкладка работает с кодом, а не с токенами.