Skip to main content

· 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. ↩

· One min read
Yahya Gilany

In some of the assignments, you may be asked to update the badge link on the repository README file.

  • Click on the Actions Tab at the top of your repository.
    • image001
  • Navigate to the Assignment Checks action job.
    • image002
  • Copy the badge.
    • image003

P.S.: In most assignments, I created a small script that automatically updates the link for you when you install the repository's dependencies using npm install

· 2 min read
Yahya Gilany

In my demo videos, you may notice that my Visual Studio Code IDE, provides with me with a lot of cheaters, helpers, and utilities that makes development a little easier. In this post, I'm sharing some instructions for how you can setup you VSCode IDE with the same settings and extensions I have here.

To get started:

  1. you're going to need to install the Settings Sync Extension on VSCode.
  • Go to the link and click install. It will open VSCode and open the extension page
  • Click on install to download the extensionimage 1
  1. Once installed open VSCode Command Palette using:
  • For Windows: ctrl+shift+P
  • For Mac: cmd+shift+P

  1. In the command palette, type Sync: Download Settings

    image 2

  2. On the Following Screen, click on Download Public Gist and type in 416f36fd3c23571ecab1d3f3a5815fea

    image 3

  3. Open the command palette and type Sync: Download Settings again and watch the extensions get installed.

  4. You may need to close VSCode and open it again for all extensions to take effect.

Some of my Extensions​