Visual Studio Code - Intellisense for Phaser.js?

[cdelstad]

Does anyone know if there has been an Intellisense implementation I can use with Visual Studio Code for Phaser.js (vanilla JavaScript)?  I know there are TypeScript definition files maintained, though I do not really want to use TypeScript.

I think it would be considered a Language Extension - using the VSCode vernacular.

Anyone know what it would take to create a VSCode extension for Phaser?

@Arian FornarisYou created a plugin for Sublime, would you have any input on this?

Thanks in advance,

-Chad

[PhaserEditor2D]

Hi,

I did a test some days before and it just worked

 

Just follow these steps:

1- Open a folder in VSCode

2- Create a `jsconfig.json` file at the root of that folder. That file indicates to VSCode that it is a JavaScript project. Just put inside that file this content:

{
}

3- Create a `defs` folder and copy there the Phaser typescript definitions. I just named it `defs` but you can use your own name.

4- Create a new `game.js` file and write some code there, it should auto-complete the Phaser API.

 

I think VSCode uses the TypeScript tooling also to develop JavaScript, but with a type inference engine called Salsa.

If you have any issue tell me.

 

[cdelstad]

It is not working. I am using the 2.6.2 versions of phaser.js and *d.ts files. The latest version of VSCode 1.8.1. Also included are the extensions i have installed.

I don't need to tell it to look for the defs folder anywhere do I? Will VSCode find the ts files?

 

[cdelstad]

OK, I got it to work. I had to move some folders around. I moved my lib folder under the js folder to be at the same level as the defs folder. So all of my JS files were under the js folder structure.

Thank you! Works slick.

[PhaserEditor2D]

Great it is working!

Look that probably you would like to exclude the lib content from the jsconfig.json project. The Phaser completions are computed from the d.ts definitions.

[cdelstad]

Yes, sir. Exclude works like a charm. Thanks again.

[CoderBear]

I'm having issues.  I followed the advice here but it is still not working for me.  I have included a screenshot of my setup with the jsconfig.json file open.

[cdelstad]

Where is your lib folder with the phaser files, not just the typedefs?

[CoderBear]

I don't have one.  Do I have to install phaser via NPM? I was just using the CDN.

[projectedtowin]

@cdelstad @PhaserEditor2D Long Shot since this is a bit older thread, but I'm having trouble just like you did cdelstad, where it's just not picking it up. I can do it fine in a local test folder, but I'm working with an FTP connection directly to my server and it's not working for that.

I rearranged the folders and everything with no luck. Here's a screenshot of my structure:

Hoping that one of you sees this and comes back around to this post!

[PhaserEditor2D]

@projectedtowin I fear it is not going to work if the files are on an  FTP site. I guess the TypeScript compiler is not going to read them. If it is working local but not remote, then I think the FTP is the problem.

[projectedtowin]

@PhaserEditor2D Thanks for the quick response. I already have hosting/server access for my own website, so I was looking for a way to edit directly into that, hence the FTP usage. Any other suggestions on syncing that FTP up with a local folder?

[PhaserEditor2D]

Maybe you should look for cloud-based editors. Something like Theia: http://theia-ide.org

[projectedtowin]

Thanks again. For anyone else that might come across this, I was able to find a workaround. I pulled my site down from the FTP into a Dropbox folder. I then use Microsoft Flow to put listeners on the Dropbox folders than when my files are created, modified, or deleted, the Dropbox contents are synced up to the FTP site.

This allows me to edit the files in a local folder structure within VSCode, and so the above steps work for me now to get the Intellisense for Phaser.

Now onto business. Thanks again.

[TheHanna]

Anyone coming here like me that just wants a straightforward answer on how to enable intellisense for a vanilla JS project in VS Code:

1. Grab the TypeScript definitions for Phaser here: https://github.com/photonstorm/phaser3-docs/blob/master/typescript/phaser.d.ts
2. Create a folder in the root of your project called defs
3. Put the phaser.d.ts file from step 1 in the defs folder you created in step 2
4. Create a file at the root of your project called jsconfig.json
5. In jsconfig.json put the follow snippet:

   {
     "exclude": [
       "node_modules/**/*"
     ]
   }

    

[DavidL]

Like others in 2017 and 2018 I have been struggling to get this working but I am living in 2020. I have been unable to find any newer documentation than this. Is the above information still correct in 2020 to get Intellisense working in Visual Studio Code?

If so, what am I doing wrong?

 

The link in TheHanna's post is now dead so I got the .ts files from here... https://github.com/photonstorm/phaser/tree/master/types

 

Thanks.