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.

8

In my case (Mac Sequoia), VSCode automatically installed the type definitions for the Photoshop API at

/Users/<me>/Library/Caches/typescript/5.7/node_modules/@types/photoshop

Now, if you open the README in this folder, you will see that this type definitions can originally be found here: DefinitelyTyped/types/photoshop at master · DefinitelyTyped/DefinitelyTyped · GitHub.

Now, there doesn’t seem to be type definitions for the uxp package. At least, in my case, VSCode doesn’t autocomplete e.g. storage from uxp, etc.

9

Actually, for uxp, but I found this repo GitHub · Where software is built, which supposedly solves this issue, but I am still unable to get type hints in VSCode for the .psjs files.

My jsconfig.js looks as follows

{
    "compilerOptions": {
       "typeRoots": [
         "node_modules/@adobe/cc-ext-uxp-types"
       ],
     },
    "typeAcquisition": {
        "include": ["uxp"]
    }
}

I installed @adobe/cc-ext-uxp-types with npm install -D @adobe/cc-ext-uxp-types (or even without -D, so as a non-development dependency), so these definitions were installed for my current project inside the project’s node_modules.

My package.json looks like

{
  "name": "my-package",
  "version": "0.1.0",
  "description": "Some script",
  "main": "myscript.psjs",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Me",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "@adobe/cc-ext-uxp-types": "^7.3.1"
  }
}

But I still don’t get autocompletions in my myscript.psjs. file, but I do get autocompletions for .jsx files for uxp. All files are in the root of the project. So I tried to add a file association to my VSCode settings

"files.associations": {
    "*.psjs": "javascriptreact"
},

Or even "javascript" instead of "javascriptreact", but this doesn’t solve the problem.

Any idea how to solve this?