Entwicklungsumgebung für die Creative Cloud Apps mit Visual Studio Code
Vorbereitungen
Neben Visual Studio Code selbst nutzen wir noch die Erweiterung ExtendScript Debugger von Adobe. Die kannst Du hier herunterladen:
https://marketplace.visualstudio.com/items?itemName=Adobe.extendscript-debug
Für die Codevervollständigung nutzen wir sogenannte Type Definitions, die Du aus diesem Github-Repository herunterladen kannst.
https://github.com/docsforadobe/Types-for-Adobe
Klicke in diesem Repository auf den grünen Code-Button oben rechts und dann auf Download ZIP. Entpacke anschließend die ZIP-Datei.
Verzeichnisse und Dateien
Grundsätzlich solltest Du Dir einen Speicherort für Deine Skripte überlegen. Dieser sollte Teil Deiner Datensicherung sein und im Idealfall zwischen Deinen Geräten synchronisiert werden.
Der Speicherort der Creative Cloud war lange die erste Wahl, leider wird dieser von Adobe ab Februar 2024 nicht mehr angeboten. Somit weichen wir auf OneDrive for Business aus. Auch wenn in diesen Skripten keine personenbezogenen Daten enthalten sind und verarbeitet werden, solltest Du die DSGVO nicht aus den Augen verlieren.
Innerhalb dieses Skripte-Ordners erstellst Du für jede App, für die Du Skripte schreiben und speichern möchtest, einen Unterordner. In jedem dieser Ordner fügst Du einen weiteren Unterordner namens types ein. Kopiere aus dem heruntergeladenem Repository alle Dateien mit der Endung .ts in jeden Deiner types-Ordner, sodass für jede App, für die Du Code schreibst, die gleichen Dateien im Unterorder types hast.
Kopiere zuletzt aus dem appspezifieschen Unterordner die Datei index.d.ts in Deine types-Ordner.
Zuletzt fehlt eine Konfigurations-Datei mit dem Namen jsconfig.json. Wenn Du bereits eine solche Datei in Deinem Ordner hast, musst Du diese mit den unten aufgeführten Angaben erweitern. Andernfalls leg eine leere Datei mit diesem Inhalt an:
{
"compilerOptions": {
"module": "none",
"target": "ES3",
"noLib": true,
"checkJs": false
}
}
Zudem ist es empfehlenswert, für jede einzelne App einen eigenen Workspace innerhalb von Visual Studio Code zu verwalten. So kannst Du einfacher Skripte in der Zielapplikation starten, ohne jedes Mal mehrere Fragen beantworten zu müssen. Lege dazu in jedem Applikations-Ordner einen Ordner mit dem Namen .vscode an und erstelle darin eine Datei launch.json mit diesem Inhalt:
{
"version": "0.2.0",
"configurations": [
{
"type": "extendscript-debug",
"request": "launch",
"name": "Run Current Script",
"script": "${file}",
"hostAppSpecifier": "indesign",
"engineName": "main",
}
]
}
Die Applikation in der Zeile "hostAppSpecifier": "indesign", passt Du für jede Anwendung an und gibst zwischen den Anführungszeichen illustrator, photoshop und so weiter an.
Zuletzt sollte Dein Verzeichnisbaum in etwa so aussehen:
Skripte/
├── Illustrator/
| ├── .vscode/
| | └── launch.json
| ├── types/
| | ├── global.d.ts
| | ├── index.d.ts
| | ├── JavaScript.d.ts
| | ├── PlugPlugExternalObject.d.ts
| | └── ScriptUI.d.ts
| └── jsconfig.json
├── InDesign/
| ├── .vscode/
| | └── launch.json
| ├── types/
| | ├── global.d.ts
| | ├── index.d.ts
| | ├── JavaScript.d.ts
| | ├── PlugPlugExternalObject.d.ts
| | └── ScriptUI.d.ts
| └── jsconfig.json
└── Photoshop/
├── .vscode/
| └── launch.json
├── types/
| ├── global.d.ts
| ├── index.d.ts
| ├── JavaScript.d.ts
| ├── PlugPlugExternalObject.d.ts
| └── ScriptUI.d.ts
└── jsconfig.json
Test
Lege nun in einem Deiner Verzeichnisse eine Datei `test.jsx` an. Wenn Du hier mit der Eingabe von z. B.
var doc = app.
startest, sollte die Autovervollständigung Vorschläge machen, was dahinterkommen könnte.
Wenn das nicht der Fall ist, überprüfe bitte die Verknüpfung von .jsx-Dateien innerhalb von Visual Studio Code. Wenn in der Fußzeile {} Extendscript steht, klicke dort bitte drauf, und ändere die Zuordnung von .jsx-Dateien auf JavaScript.
Mit F5 sollte nun Dein Skript ohne weitere Rückfrage in der von Dir gewählten Anwendung starten
Viel Spaß und Erfolg beim Schreiben und Entwickeln von Skripten für die Adobe Applikationen.
Kommentare
Keine Kommentare