Jump to content

Visual Studio Code - Intellisense for Phaser.js?


cdelstad
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

PhaserAutoCompleteVSCode.png

 

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.

 

Link to comment
Share on other sites

  • 1 year later...
  • 1 month later...

@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!

image.thumb.png.0074649950752d6bfb78463b76e3d54c.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 months later...

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/**/*"
      ]
    }

     

Link to comment
Share on other sites

  • 1 year later...

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?

a6af1206-0d01-4a13-a72c-05af1cd05871.png

 

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...