Tkinter Visual Designer (VS Code Extension)

Tkinter Visual Designer — это расширение для Visual Studio Code, которое превращает разработку Tkinter‑интерфейсов в наглядный процесс: вместо ручного написания координат и вызовов .place() / .grid() вы работаете с визуальным конструктором.

Основная идея — разводить логику и разметку:

• разметка окна (виджеты, их положение и свойства) проектируется в визуальном редакторе;
• логика приложения (обработчики событий, бизнес‑код) остаётся в Python‑файле.

Что умеет приложение

• Визуальное редактирование формы:
  • перетаскивание виджетов (Label, Button, Entry, Text, Checkbutton, Radiobutton) на холст;
  • изменение размера и положения виджетов мышью;
  • настройка свойств (текст, размеры, позиция) через панель свойств.
• Работа с событиями:
  • привязка обработчиков к виджетам (например, command у кнопки);
  • просмотр уже существующих привязок.
• Генерация кода:
  • создание Python‑кода по текущему дизайну;
  • экспорт/импорт проекта в JSON.
• Разбор существующего кода:
  • парсер анализирует ваш Tkinter‑код и восстанавливает дизайн формы;
  • поддерживаются классические приложения с классом‑обёрткой и методами __init__, create_widgets и т.п.

Типичный сценарий работы

1. Открыть или создать Python‑файл с Tkinter‑приложением.
2. Запустить визуальный дизайнер (см. раздел «Запуск приложения» ниже).
3. В дизайнере:
   • перетаскивать виджеты из палитры на холст;
   • настраивать свойства и события в боковой панели;
   • при необходимости импортировать существующий дизайн из кода.
4. Сгенерировать обновлённый Python‑код и сохранить его.
5. Запустить приложение Python уже с новым интерфейсом.

Требования

• Visual Studio Code ≥ 1.74
• Node.js и npm
• Python 3 (доступный в системе как python, python3, py или указанный в настройках VS Code)

Установка зависимостей

npm install

Сборка расширения и веб‑интерфейса

npm run compile

Запуск приложения (расширения)

1. Откройте папку проекта в VS Code.
2. Выполните npm install и npm run compile, если ещё не делали это.
3. Нажмите F5 или выберите в меню:
   • Run → Start Debugging (Запуск → Начать отладку).
4. Откроется новое окно VS Code с установленным в нём расширением.

В этом окне вы можете:

• Открыть любой .py файл с Tkinter‑кодом.
• Открыть визуальный дизайнер:
  • через командную палитру (Ctrl+Shift+P → Tkinter: Open Tkinter Designer), или
  • через контекстное меню в проводнике: правый клик по .py → Open Tkinter Designer.

Основные команды

Расширение регистрирует следующие команды:

• Tkinter: Open Tkinter Designer — открыть визуальный дизайнер для текущего Python‑файла.
• Tkinter: Generate Python Code — сгенерировать Python‑код из текущего дизайна.
• Tkinter: Parse Tkinter Code — разобрать существующий Tkinter‑код и загрузить его в дизайнер.

Примечания

• Для корректной работы парсера обязательно наличие установленного Python 3.
• Генерация и разбор кода основаны на стандартной структуре Tkinter‑приложений (классы, методы __init__, create_widgets, и т.п.).