JSDoc for Illustrator / VSCode
UPDATE: it turns out while whole thing was not necessary, we can use the existing Types for Adobe .d.ts files to auto-complete our regular .js files as long as VSCode is open as a folder and the d.ts file is also present in the workspace, opened up.
Hello all,
I am a slow-learner compared to some of you guys, but the story is, when I began to do Illustrator scripting, I was using the old ESTK. At the time I did not do any C# or use any other code editor, but automating some basic tasks was already a great payoff. Then, I began using Sublime Text and due to its features speeding my workflow, I switched to writing in Sublime and running from ESTK.
And sometime years later I went to VSCode driven in part by the fact that Adobe's new ESTK is a plugin in VSCode and not anywhere else that I know of.
Well, soon after I learned about JSDoc and how it can improve the development workflow even better by providing some auto-completion within VSCode. I'd be switching previously between files to see what properties I need to be writing here. Now, it seems like a convenient helper for all sorts of coding works where things get complex and auto-completion allows one to manage writing a huge number of programming constructs as is needed.
Unfortunately, VSCode JSDoc support is really lacking, although certain commands are listed in the official JSDoc site, VSCode does not recognize them or render their results properly - it's a work in progress and many have made the jump to TypeScript. However, even when doing TypeScript, JSDoc annotations still help, but as TS is used, JSDoc's shortcomings in VSCode are fixed by its great features.
For example, please view what I had to do in order to simulate the 'inheritance' of sub classes of art objects to the PageItem super-class to get it to do what I wished in VSCode:
/**
* @typedef {Object} AiPageItem - Illustrator super-class of all art object kinds.
* {string} name - name of the item in Layers panel.
* {number[]} visibleBounds - Illustrator `visibleBounds` array: [left, top, right, bottom].
* {number} width - Width in pt.
* {number} height - Height in pt.
*/
/**
* @typedef {Object} AiPathItemType
* {boolean} filled - True if this path has a fill color applied.
* {boolean} stroked - True if this path has a stroke width of more than 0 applied.
* @typedef {AiPageItem & AiPathItemType} AiPathItem - Illustrator path, a single shape made from one bezier curve (which can have many segments). *
*/
/**
* @typedef {Object} AiCompoundPathItemType
* {AiPathItem[]} pathItems - The paths in this compound path.
* @typedef {AiPageItem & AiCompoundPathItemType} AiCompoundPathItem - Illustrator Compound path, an object that contains one or multiple paths.
* It can contain groups, which is an erroneous behavior and can lead to negative results.
*/
/**
* @typedef {Object} AiLayer - Illustrator layer. Can be inside other layers as a sub-layer.
* {string} name - name of the layer in Layers panel.
*/
Anyways, I am posting this because I am curious if anyone else uses JSDoc for Illustrator/Adobe scripting and if there's already some resource where all the items are listed, such as Types for Adobe.
If not, I think the community could benefit from JSDoc due to these reasons:
- Users who choose not to use TS can still get an autocompletion feature.
- All you need is the document with all the types open in a workspace and you get the autocompletion!
- If there's a standard JSDoc, forum visitors can open this file and if we annotate our snippets with @ type annotations, then every script code on here could be understood more in-depth quite quickly. In fact, they could build that into the forum if they wanted to - but seeing as there's not even an in-line code highlight button, I'm not sure that'll ever come to pass.
I welcome your feedback. Maybe hopefully I am missing something that there are ways to get VSCode JSDoc @ link and @ see and @ extends commands to work.
To add, come to think of it, they could build the typescript stuff into the forums too and provide instant expandable lists. However, JSX is an ES3 version of JS and simple JSDoc can work with everything! But unfortunately not fully developed inside of Microsoft's VSCode at least.
