How can I get intellisense working for UXP Plugin development in VSCode?

Photoshop UXP Plugin API
,
1

I am starting to work on developing my own UXP plugins. I am a relative newbie with UXP.

I’d like to know what the best technology stack is in VSCode (Specifically what extensions I should install). My biggest concern right now is getting intellisense working for all layers (HTML / JS) and the cherry on the top would be manifest.json value autocompletion. It’s not difficult to create a manifest, it would just be nice.

So my main question is: How do I get autocomplete/intellisense working in VSCode while coding my UXP plugin?

2

The Photoshop functionality works intellisense without any special extension.

As for manifest.json, I saw that @Jarda has recently worked on an extension, but it is probably not yet publicly available.

Your own code can be assisted by adding comments in JSDoc format.

/**
  * save preferences to secureStorage
  * @param {string} settingKey a key to set value
  * @param { {propA: string, propB: boolean} } obj object for save
  * @returns {Promise<void>} 
*/
const saveSettings = async (settingKey, obj) => {
  const jsonStr = JSON.stringify(obj) ;
  await secureStorage.setItem(settingKey, jsonStr) ;
} ;
3

Are you sure? How does VSCode know that I am creating a UXP plugin rather than a standard JavaScript project?

4

I am not very familiar with this, but it seems that VSCode has been reading the types data that Photoshop has somehow.

I found it around here.

~/Library/Caches/typescript/5.1/node_modules/@types/photoshop

Of course, modules need to be imported.

const { app } = require('photoshop') ;
5

As far as I understand it, all Intellisense needs to know is the language you are using, it then parses your code and any methods/variables it finds are exposed.
Intellisense doesn’t “know” that you’re building a UXP plugin, it just knows that you’ve imported an arbitrary module that exports a certain set of methods.

6

This is more along the lines of what I’m trying to figure out. I just tested in VSCode, and it seems like intellisense is now working after this:

const { executeAsModal } = require("photoshop").core;
const { batchPlay } = require("photoshop").action;
const app = require('photoshop').app;
const core = require('photoshop').core;

I’m just perplexed as to how? Where does this arbitrary module exist? Where is VSCode pulling the auto-complete data? There are no modules exposed in my workspace. Sorry if this is too simple of a question.

7

If you right-click the import statement and select “Go To Definition” you can see where the import is coming from.
As @sttk3 showed that’s a TS file in appData or Library depending on you OS. I would assume that is installed as part of Photoshop itself.

1 Like