Posted on

How to use VS Code intellisense with Phaser 3

What is VS Code? It’s a nice text editor you can download for free here:
https://code.visualstudio.com

What is Phaser 3? It’s a nice game engine for web browsers you can download for free here:
https://phaser.io

How do you get VS Code to show Phaser documentation automatically in the editor? Create a text file named jsconfig.json in the root of your project folder that includes the Phaser types and your game code. The root of your project must contain folders that contain the code for Phaser and your game. For example, if your project folder is named “myProjectFolder” and your game code is stored in a folder called “src” and the Phaser 3 code is stored in a folder called “phaser” then here is your directory structure and jsconfig.json file’s contents:

myProjectFolder/
myProjectFolder/jsconfig.json
myProjectFolder/phaser
myProjectFolder/src

{
  "include": [
    "src/*"
  ],
  "files": [
    "phaser/types/phaser.d.ts"
  ]
}

After you create the jsconfig.json file and have saved it, close VS Code. The next time you open VS Code, select File->Open Folder and select your project root (“myProjectFolder” from our example”) and the Phaser information will be available after a short loading process completes.

Good luck!