Illustrator: как писать скрипт в VS Code
22/4/2026
Рассмотрим как создавать собственные скрипты для 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.
Вот что видим в окне иллюстратора.
Нюансы кодирования с VS Code
Пока скрипт выполняется в Иллюстраторе, внизу будет синяя полоска, сообщающая нам об этом.
Создадим окно с кнопкой, чтобы понимать к чему это я рассказал.
Для этого напишем код в нашем main.jsx
//@target illustrator
var dlg = new Window("dialog", "Blanker", [0, 0, 300, 400], {closeButton: true});
dlg.buttPnl=dlg.add("panel",[15,15,250,180],'Панель');
dlg.buttPnl.testBtn=dlg.buttPnl.add("button",[15,25,100,50],'Кнопка');
dlg.buttPnl.testBtn.onClick=function(){ alert("Test");};
dlg.center();
dlg.show()Первая строка — это для будущего переноса кода в докер, если вы решите все отладить и потом перенести код в докер.
Вторая строка — создаем окно, оно диалоговое, а значит блокирующее. Третий параметр – размер окна.
Потом добавляем панель и размещаем в панели кнопку, на клик которой вешаем вывод сообщения Test.
Запускаем отладку (F5).
Как видите всё работает, включая кнопку.
Добавим модуль, включим его в основной и пусть он получает количество объектов в документе.
Я добавил папку в проект jsx и внутри её создал файл utils.jsx.
Напишем в нем код функции.
function checkCount(){
if (app.documents.length === 0) return;
var doc = app.activeDocument;
var items = doc.pageItems;
alert(items.length);
}app — это зарезервированная переменная, ссылающаяся на приложение (наш Иллюстратор).
В коде сперва проверяем есть ли открытые документы вообще. Потом присваиваем переменной doc активный документ. Считаем объекты и выводим.
в наш модуль main.jsx включим новый файл вверху:
//@target illustrator #include "jsx/utils.jsx";
И изменим запуск кнопки.
dlg.buttPnl.testBtn.onClick=function(){ checkCount();};Запускаем отладку:
У меня нашлись 13 объектов.
Но это у нас блокирующее окно – dialog. Поменяем его на неблокирующее – palette.
var dlg = new Window("palette", "Blanker", [0, 0, 400, 300], {closeButton: true});
Как видите, я могу выделять объекты, но кнопка больше не работает.
Когда вы используете palette, скрипт после выполнения последней строки (dlg.show()) завершает свою работу в памяти, и связь с внешними файлами (через #include) разрывается. В режиме dialog скрипт «замирает» на строке show() и держит все связи активными, пока вы не закроете окно.
Свидетельство этому — исчезновение синей полоски отладки в VS Code.
Поэтому вам придется всё держать в одном файле, что неудобно. Можно, конечное, отладить всё в диалоговом окне, потом перенести все функции в один файл и его использовать в работе, заменив dialog на palette.
Запуск скрипта
Для запуска нужно из меню Файл (File) найти и запустить нужный вам скрипт.
Можно его потом на иконку вывести или в меню добавить.
Но я рекомендую отладить все функции здесь, а потом сделать себе нормальный докер.
В следующий раз разберем, как получить все цвета из документа или выделения, учитывая «странную» особенность Иллюстратора, а именно:
через код нельзя получить свойства Appearance. Т.е. если у объекта две обводки, то вы сможете увидеть только самую верхнюю.
Комментарии: