Illustrator: как писать скрипт в VS Code

Рассмотрим как создавать собственные скрипты для Adobe Illustrator. Adobe ExtendScript Toolkit ушёл в прошлое, как атавизм. Переход Adobe на полноценный редактор кода добавил плюсов в разработку.

Я уже писал пост, как создать свой докер в Иллюстраторе. Там я упомянул использование ExtendScript Debugger. Теперь пришло время объяснить, как этим удобно пользоваться.Первым делом нам понадобится редактор Visual Studio Code. Хорошая мощная среда разработки MS Visual Studio не подойдет, так как Adobe решил сделать расширение только под VS Code.

Создайте на компьютере новую папку для ваших скриптов.
В VS Code выберите File > Open Folder... и откройте созданную папку.
Создайте новый файл с расширением .jsx (например, main.jsx).

Перейдите во вкладку Extensions (Ctrl+Shift+X). Я указал её стрелкой, либо из меню View. Введите в поиске ExtendScript Debugger. Нажмите Install.

Чтобы VS Code понимал, как запускать ваш скрипт, нужно создать файл конфигурации. Для этого перейдите на вкладку Run and Debug (Ctrl+Shift+D).

Нажмите на ссылку «create a launch.json file». В выпадающем списке выберите среду ExtendScript.
После этого в вашей папке появится скрытая папка .vscode с файлом launch.json. Теперь VS Code готов к отладке.

Теперь надо настроить нашу конфигурацию.

В двух словах что она из себя представляет. Рассмотрим важные моменты.
Параметр "name" — как будет выглядеть пункт меню при запуске отладки.
Параметр "hostAppSpecifier" — в какой программе запускать.
Параметр "script" — какой файл запускать при отладке. У вас может быть несколько файлов с различным набором модулей, но главный откуда идет запуск один. Вы можете находится на любой вкладке и запуск отладки всегда будет запускать этот файл, если определите этот параметр.

Теперь в главном модуле main.jsx напишем код для проверки:alert("Hello world!");

Теперь необходимо запустить наш illustrator, если он еще не запущен.На вкладке отладки (Run and Debug) выбираем нашу конфигурацию и нажимаем зеленую стрелку слева или F5.

Пока скрипт выполняется в Иллюстраторе, внизу будет синяя полоска, сообщающая нам об этом.

Создадим окно с кнопкой, чтобы понимать к чему это я рассказал.Для этого напишем код в нашем main.jsx

Первая строка — это для будущего переноса кода в докер, если вы решите все отладить и потом перенести код в докер.
Вторая строка — создаем окно, оно диалоговое, а значит блокирующее. Третий параметр – размер окна.
Потом добавляем панель и размещаем в панели кнопку, на клик которой вешаем вывод сообщения Test.

Запускаем отладку (F5).

Добавим модуль, включим его в основной и пусть он получает количество объектов в документе.

Напишем в нем код функции.

app — это зарезервированная переменная, ссылающаяся на приложение (наш Иллюстратор).
В коде сперва проверяем есть ли открытые документы вообще. Потом присваиваем переменной doc активный документ. Считаем объекты и выводим.

в наш модуль main.jsx включим новый файл вверху:

И изменим запуск кнопки.

Запускаем отладку:

Но это у нас блокирующее окно – dialog. Поменяем его на неблокирующее – palette.

Как видите, я могу выделять объекты, но кнопка больше не работает.

Когда вы используете palette, скрипт после выполнения последней строки (dlg.show()) завершает свою работу в памяти, и связь с внешними файлами (через #include) разрывается. В режиме dialog скрипт «замирает» на строке show() и держит все связи активными, пока вы не закроете окно.

Свидетельство этому — исчезновение синей полоски отладки в VS Code.

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

Для запуска нужно из меню Файл (File) найти и запустить нужный вам скрипт.

Можно его потом на иконку вывести или в меню добавить.Но я рекомендую отладить все функции здесь, а потом сделать себе нормальный докер.

Еще материалы по скриптам, а также по особенностям работы с макетами для полиграфии на сайте: