2 posts tagged with "vscode"

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."⁽¹⁾

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)"⁽²⁾

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."⁽³⁾

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

{}

OR

{
  "allowJs": true
}

2. At the root of your project, create a folder named defs, types, or typings.
3. 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.

• yandeu/phaser-project-template-es6
• yandeu/phaser-project-template

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.

Settings Sync​

One helpful way to avoid setting up your VSCode IDE from scratch is to use the built-in Settings Sync. Settings Sync lets you share your Visual Studio Code configurations such as settings, keybindings, and installed extensions across your machines so you are always working with your favorite setup.

You can turn on Settings Sync using the Turn On Settings Sync... entry in the Manage gear menu at the bottom of the Activity Bar.

You will be asked to sign in and what preferences you would like to sync. Generally, you will want to sync everything but there is a case to turn some of these off on some devices.

Selecting the Sign in & Turn on button will ask you to choose between signing in with your Microsoft or GitHub account. I recommend using your GitHub account since you will most likely need to sign in with GitHub for other extensions.

After making this selection, the browser will open so that you can sign in to your Microsoft or GitHub account. When a Microsoft account is chosen, you can use either personal accounts, such as Outlook accounts, or Azure accounts, and you can also link a GitHub account to a new or existing Microsoft account.

After signing in, Settings Sync will be turned on and continue to synchronize your preferences automatically in the background.

For more information on Settings Sync, see this article from Microsoft: Settings Sync.

Some of my Extensions​

• Auto Close Tag
• Auto Rename Tag
• Babel JavaScript
• EditorConfig for VS Code
• ESLint
• indent-rainbow
• Todo Tree
• Path Intellisense
• GitHub Copilot