Найти в Дзене

Скрипты в Photoshop 20. Настраиваем Visual Studio Code на работу с JSX скриптами.

Бесплатный редактор кода от Microsoft, с поддержкой подсветки кода, возможностью запуска и отладки, просмотра объектной модели, с подсказками и кучей дополнений и тем.

Бесплатный редактор кода от Microsoft, с поддержкой подсветки кода, возможностью запуска и отладки, просмотра объектной модели, с подсказками и кучей дополнений и тем.

Скачать можно по ссылке: Download Visual Studio Code

-2

Русификация – в левой колонке выбираем расширения в строке поиска – Russian, устанавливаем первый языковой пакет.

Установка расширений для работы с JSX скриптами:

-3

В расширениях в поиске пишем Adobe, устанавливаем расширение Adobe Script Runner и расширение ExtendScript Debugger.

После установки расширение Adobe Script Runner требует настройки, нажимаем на шестерёнку в разделе расширений и выбираем Параметры расширения:

-4

В строке Adobe Script Runner: Win Photoshop Exe – указываем путь к нашему Photoshop:

-5

Теперь о самом главном о работе отладки и запуске скриптов.

Открывает через меню Файл – Открыть папку и выбираем папку с панелью:

-6

В структуре моих панелей файл скрипта лежит в папке JSX и имеет название hostscript.jsx, в редакторе я открываю именно папку всей панели а не папку JSX, т.к. тут же я могу редактировать и остальные файлы html, css, js.

Для правильной интерпретации кода и работы отладки качаем следующий архив
Adobe_types_for_VSCode

Все содержимое архива складываем в папку с расширением перезапускаем VSCode? Становимся на файл workspace.code-workspace:

-7

Появляется кнопка открыть рабочую область – нажимаем на нее – теперь наш редактор готов к работе.

Открываем JSX файл и подводим мышку к командам кода – мы видим всплывающие описания:

-8

При наборе кода редактор предлагает варианты в соответствии с объектной моделью документа:

-9

Более того, уже при наборе кода, еще до выполнения, он укажет на ошибки:

-10

В папке проекта будет указано количество ошибок в скрипте – красная цифра с плюсом:

-11

Теперь о запуске и отладки скрипта – внизу нажать на желтую строку – Select the target application и выбрать нужную программу или версию Photoshop:

-12

Простой запуск скрипта без отладки – нажимаем F1, выбираем Adobe Photoshop:

-13

Скрипт выполнится в Photoshop.

Запуск с отладкой – переходим в раздел запустить, сверху нажимаем на Run debug, в коде для наглядности поставим точку остановки:

-14

При останове выполнения скрипта можно изучить локальные и глобальные переменные в ходе работы скрипта:

-15

Тут же можно посмотреть объектную модель нашего документа, можно даже зайти в раздел текущего слоя и поменять к примеру прозрачность и она изменится в Photoshop:

-16

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

-17

В разделе Проблемы будет указание на количество ошибок, их описание, при нажатии на ошибку редактор открывает строчку с ошибкой.

При работе через отладку можно использовать команду для вывода в консоль $.writeln(“сообщение”):

-18

В общем VSCode это современный редактор, при должной настройке он полностью восполняет устаревший Extend Script Tool Kit, и где-то его превосходит.

Основной минус настройка отладчика – она находится в файле:

-19

Его содержимое достаточно простое:

-20

Но как мы видим, что тут указывается на конкретный файл hostscript.jsx, соответственно если вы захотите отлаживать скрипт с другим именем, то этот файл над отредактировать.