Intellisense for P5.js in Visual Studio Code

[sarkarstanmoy]

Hi ,

First of all I would like to say that P5 editor is great and easy to use. The only one thing I am missing in P5 editor is intellisense. So, I try to run P5 project using Visual Studio Code. In VS Code for intellisense we need type script file i.e. tsd file for the js file for which we need intellisense. Since I couldn't found any P5 tsd files it is not helping much. Can you please look into this issue?

[toolness]

Hey @sarkarstanmoy! I'm actually working on this right now and blogged about it here:

http://processing.toolness.org/general/2016/03/16/typescript-to-the-rescue.html

That post links to d.ts files for p5 instance and global mode, but please note that because it's a work-in-progress, some API calls are missing entirely, and others may be inaccurate. The blog post has more details on this.

[toolness]

Er, that said, if you'd like to start using those Typescript definitions and let me know about any problems you run into with them, that would be really helpful. 😁

[sarkarstanmoy]

Hey @toolness

Thanks for sharing p5 typescript file. I am using Visual Studio Code to run my p5 js script and it seems like intellisense is working fine after incorporating your d.ts file in my VS code solution. I will let you know if found any issues.

Thanks

[lmccart]

:)

[Crashnorun]

Hi @sarkarstanmoy ,
Pardon my ignorance, would you be able to outline how I may install the p5 typescript definitions for VS Code?
Thanks,

[Spongman]

currently there's no official build of the p5.js typescript definition files, so you can't npm install them. but here's a zip file with the lastest version:

p5.d.zip

put them in your project directory somewhere and add a reference to them in your sketch .js file, eg:

/// <reference path="./p5.global-mode.d.ts" />

then you should get autocomplete & docs:

[Crashnorun]

@sarkarstanmoy this is pretty awesome! You guys rock!!

[Tyshark9]

@Spongman thanks for the definition files! I see the following error when using it in my Angular app.

ERROR in src/custom-types/p5.d.ts(9985,9): error TS2415: Class 'Noise' incorrectly extends base class 'Oscillator'. Types of property 'amp' are incompatible. Type '(volume: number | object, rampTime?: number, timeFromNow?: number) => void' is not assignable to type '(vol: number | object, rampTime?: number, timeFromNow?: number) => AudioParam'. Type 'void' is not assignable to type 'AudioParam'.

[Spongman]

yeah, looks like we need to remove the unnecessary duplicate doc comments in noise.js.

[geofflittle]

@Spongman Thanks for your zip. I'm trying to use the generated p5.d.ts file included but I'm running into errors like

types/p5.d.ts(521,19): error TS2304: Cannot find name 'COLOR_MODE'.
types/p5.d.ts(792,87): error TS2304: Cannot find name 'ARC_MODE'.
types/p5.d.ts(1013,21): error TS2304: Cannot find name 'ELLIPSE_MODE'.
types/p5.d.ts(1060,18): error TS2304: Cannot find name 'RECT_MODE'.
types/p5.d.ts(1083,18): error TS2304: Cannot find name 'STROKE_CAP'.
types/p5.d.ts(1095,20): error TS2304: Cannot find name 'STROKE_JOIN'.
types/p5.d.ts(1795,49): error TS2304: Cannot find name 'RENDERER'.
types/p5.d.ts(1829,51): error TS2304: Cannot find name 'RENDERER'.
types/p5.d.ts(1870,19): error TS2304: Cannot find name 'BLEND_MODE'.
types/p5.d.ts(2252,21): error TS2304: Cannot find name 'BEGIN_KIND'.
types/p5.d.ts(2333,19): error TS2304: Cannot find name 'END_MODE'.
types/p5.d.ts(3240,19): error TS2304: Cannot find name 'IMAGE_MODE'.
types/p5.d.ts(3314,146): error TS2304: Cannot find name 'BLEND_MODE'.
types/p5.d.ts(3400,22): error TS2304: Cannot find name 'FILTER_TYPE'.
types/p5.d.ts(4395,19): error TS2304: Cannot find name 'ANGLE_MODE'.
types/p5.d.ts(4420,25): error TS2304: Cannot find name 'HORIZ_ALIGN'.
types/p5.d.ts(4420,50): error TS2304: Cannot find name 'VERT_ALIGN'.
types/p5.d.ts(4471,23): error TS2304: Cannot find name 'THE_STYLE'.
types/p5.d.ts(6752,49): error TS2304: Cannot find name 'GRAPHICS_RENDERER'.
types/p5.d.ts(10037,5): error TS2416: Property 'amp' in type 'Noise' is not assignable to the same property in base type 'Oscillator'.
  Type '(volume: number | object, rampTime?: number | undefined, timeFromNow?: number | undefined) => void' is not assignable to type '(vol: number | object, rampTime?: number | undefined, timeFromNow?: number | undefined) => AudioP...'.
    Type 'void' is not assignable to type 'AudioParam'.

Do you have any advice to resolve these issues?

[Spongman]

i have updated the .zip above, try with that.

[praveen2916]

On adding the following to _references.js
///
initially the intelligence in Visual Studio worked. But when I restarted the project, VS is no longer giving intelligence to p5. To be precise VS is not recognizing .js files and intelligence is not responding to any code !!!

[JustARatherRidiculouslyLongUsername]

If this is of relevance to anyone, simply keeping the p5.global-mode.d.ts file (which comes along with p5.js) open in a separate tab enables IntelliSense for all open files, even without including a reference.

[AbhimanyuAryan]

can someone build a node module for it? Keep it in project again and again seems like a headache

[dgennetten]

Is there any update on this? Is @Spongman's p5.d.zip still the way to go?

[kiraleos]

You can download the typescript declarations through npm here https://www.npmjs.com/package/@types/p5

[neefrehman]

For people who are using the @types package as @kiraleos has posted, is there a way to declare these definitions in the project globally?

Currently intellisense is only working if I either:

1. Put the reference at the top of each file (e.g /// <reference path="../node_modules/@types/p5/global.d.ts" />)

2. Have the global.d.ts file open at the same time

I'm working on a project that has multiple sketches, so it would be nice to have access to the definitions globally. I've tried a bunch of jsconfig.json/tsconfig.json patterns that I've seen on stackoverflow, but still have the same results.

[antiboredom]

@neefrehman I've had success by creating a jsconfig.json with this in it:

{
  "include": [
    "*.js",
    "libraries/*.js",
    "node_modules/@types/p5/global.d.ts"
  ]
}

[christopherball]

While the last comment is perfect for getting the bulk of autocomplete to work correctly, what I haven't been able to figure out is how to get it working specifically for the sound library (node_modules/@types/p5/lib/addons/p5.sound.d.ts). Take for example the desire to see autocomplete show within VSCode when typing var fft = new p5.FFT() (https://p5js.org/reference/#/p5.FFT).

Any help here would be much appreciated, as I've gone around in circles for hours to no avail...

Edit: Needless to say adding "node_modules/@types/p5/lib/addons/p5.sound.d.ts" to the jsconfig.json file's include section doesn't make any difference.

Edit2: Decided to code p5 under typescript for the additional type safety checks and managed to get autocomplete working for all of @types/p5 now.