Skip to main content

How to get Phaser Intellisense in VSCode

· 2 min read
Yahya Gilany

What is Phaser?​

"Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development."(1)

What is VS Code?​

"Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity)"(2)

What is Intellisense?​

"IntelliSense is a general term for various code editing features including: code completion, parameter info, quick info, and member lists. IntelliSense features are sometimes called by other names such as "code completion", "content assist", and "code hinting."(3)

How to enable Phaser Intellisense in VSCode?​

We will need to make use of a TypeScript functionality to enable Intellisense.

  1. At the root of your project, create a file named jsconfig.json, or tsconfig.json with the following content.
  • The presence of this file, indicates to VSCode that this is the root of a JavaScript project. You can use it to specify certain features you'd like VSCode's JS Language Service to provide, such as typing. Learn more about jsconfig.json file here
<root>/jsconfig.json
{}

OR

<root>/tsconfig.json
{
  "allowJs": true
}
  1. At the root of your project, create a folder named defs, types, or typings.
  2. Download and the save phaser.d.ts file into that folder. This file contains the definitions for Phaser.

Note: you may need to install TypeScript to your project or globally

npm install --save-dev typescript

OR

npm install --global typescript

Other untested alternatives​

The following repos seemed like good templates to use for Phaser Development. It includes many tools to improve the overall development experience.

  1. Phaser Framework.↩
  2. What is Visual Studio Code?.↩
  3. IntelliSense in Visual Studio Code.↩