[Guide] Phaser auto completion in Atom with tern-phaser

[Nathan Lovato]

Hi there everyone,

 

As someone asked on the phaser slack, here's a guide to get auto completion for Phaser in Atom on Windows. It is powered by Angelo's tern-phaser plugin.

 

Installing tern

 

This first part explains how to get npm, install tern and the tern-phaser plugin. The first thing that you need to ensure is that you have Node.js installed on your computer. You can download it on https://nodejs.org/en/. This will give you access to npm as well, a handy package manager for js libraries and plugins. It allows you to download install all sorts of packages from the command prompt.

Once Node.js has finished installing, we have a few commands to call from the command prompt. On windows, you can access the command line need to press the Windows R key combination, type "cmd" and press enter.

 

 

Then we need to install a few packages. First, there is tern, the JS analyzer that the tern-phaser plugin uses. In the command line tool, type "npm install tern" and press enter. Npm will take care of the install for you, it will just take a moment.

 

 

We then need the tern-phaser plugin to be installed where the tern package has been put. You can let windows find the folder for you by typing "npm install -g tern-phaser" in the command prompt and pressing enter.

 

 

The manual route

 

If AND ONLY IF the automatic install of tern-phaser doesn't work, you'll have to go navigate to the tern install folder manually from the command prompt. To change the folder the command prompt is in, you need to type cd (current directory) followed by the path you want to reach. By default, tern should be installed to C:\Users\YourName\node_modules and tern-phaser should go into your global modules folder, into C:\Users\YourName\AppData\Roaming\npm\node_modules.

In the command prompt, you then have to enter "cd C:\Users\YourName\AppData\Roaming\npm\node_modules". Note that you can copy the path from windows and paste it in the command prompt using the right mouse button (Ctrl V doesn't work by default).

 

Right click on the command line window to paste text.

 

Once you got to the right folder, just type npm "install tern-phaser" and press enter.

 

Without -g, the command installs the tern-phaser package in the folder you're currently in.

 

Using tern-phaser with Atom

 

Now, you have both tern and tern-phaser installed on your computer. Let's move to setting up atom to work with tern. There is no native integration of tern in atom. However, there is a plugin called atom-ternjs that works like a charm. We can install the package from the command line as well. Either close and reopen the command prompt or navigate back to your root folder with the following command: "cd C:\Users\YourName".

Then, to call the Atom Package Manager, you need to use the apm command. Type "apm install atom-ternjs" and press enter. This will add this package to atom for you. To use tern with your project, you just need to have a tern configuration file. Atom-ternjs can create a basic config file for you. In Atom, you first need to have at least one javascript file loaded. Then, go to packages -> Atom ternjs -> Configure project

 

 

You can set some parameters in the newly opened tab and click on save and restart server. This will create a new .tern-project file in your project folder. We still need to tell it to use the phaser plugin. You just have to add "phaser" in the plugins section. Here's the content of my .tern-project file:

{   "ecmaVersion": 5,   "libs": ["browser"],   "plugins": {     "phaser": {}   } }

 

Save your file, and then go to package -> Atom Ternjs -> Restart server. If you don't get any error, you're good to go! Note that having a phaser.js file next to your .tern-project file can prevent tern-phaser from working - in which case you'll get a series of errors in Atom.

 

[Timo]

I followed the instructions but Atom shows a red box with error: atom-ternjs Failed to find plugin phaser.

I have both packages installed - In the folder C:\Users\...\AppData\Roaming\npm\node_modules I have subfolders \tern and \tern-phaser.

I also pasted {   "ecmaVersion": 5,   "libs": ["browser"],   "plugins": {     "phaser": {}   } } in the.tern-project-file and restarted the server.

Any idea? Thanks in advance!! 

[pollofritto]

i can explain what i did but i don't think it's the right method.

Go to the tern-phaser directory and copy the Phaser.js file that you will find inside of it.

Open Atom and go to the preference tab.

Click on packages and find the atom-ternjs package. Click on the settings button and than click on View code.

At this point you can navigate through the atom-ternjs folders.

Search for the "plugin" folder and open it with explorer.

Paste there the Phaser.js file, restart Atom and you are done.

 

If you update the atom-ternjs package you have to go through that process again... 

[turnA]

Same with Timo, I always encounter error: atom-ternjs Failed to find plugin phaser 

I have tried pollofritto method, but I can't find plugin folder on atom-ternjs folder. Even if I create one and placed the phaser.js inside it, it still show that error...

[WombatTurkey]

Dumb question, but is it possible to do this within notepad ++?

[Nathan Lovato]

@Timo and @turnA

There shouldn't be a plugin folder inside of the tern-js npm module after install. The file is at the root of the folder. Normally npm should properly install it for you anyway.

 

Did any of you follow the manual install route? I don't recommend it. For me, npm installed tern in C:\Users\...\node_modules\tern (not globally I guess?) and tern-phaser in C:\Users\...\AppData\Roaming\npm\node_modules\tern-phaser

You can find the folder a package was installed in using the npm explore command (note that if you installed a package globally, using the -g command, you have to use npm explore -g to find it as well).

 

There also was a mistake in the guide, or some misleading sentence: tern is not installed in C:\Users\...\AppData\Roaming\npm\node_modules\ for me, it's only tern-phaser that goes there.

 

And by the way I only work with Windows, can't really help if you're on Mac. Ah and getting this tern thing to work was also a pain in the...

If you don't have a proper .tern-project file in every one of your project you will get that error. And you'll also get it if you have a Phaser.js file next to your .tern-project file. I hope some of this can help?

 

Dumb question, but is it possible to do this within notepad ++?

No idea in all honesty. I googled for it, and couldn't find anything.

[Raicuparta]

I eventually got it running. Honestly, this doesn't feel like it helps productivity that much, not for me anyway. It just suggests stuff that's anywhere in the Phaser framework, and doesn't depend on context at all. But I suppose anything more complicated would probably be hard to pull off in javascript.

[pollofritto]

Same with Timo, I always encounter error: atom-ternjs Failed to find plugin phaser 

I have tried pollofritto method, but I can't find plugin folder on atom-ternjs folder. Even if I create one and placed the phaser.js inside it, it still show that error...

This is where i find the plugin folder:

 

https://www.dropbox.com/s/02v5bsdo837qryq/Screenshot%202015-10-20%2001.42.33.png?dl=0

https://www.dropbox.com/s/2f16lmcx09a4evw/Screenshot%202015-10-20%2001.44.40.png?dl=0

[Nathan Lovato]

@Raicuparta: it's very useful for non devs or people learning the framework. It helps you to type the functions right, and shows you all of their parameters without having to jump back to the phaser website. I think it's mostly useful for methods as far as typing speed is concerned: you just have to press tab to move to the next parameter. I use ctrl+t to type "this." and ctrl+; to add a semicolon and move to the next line. At least for me it's way more comfortable to code with those helps enabled (but I dev really part time only).

[jmp909]

I had to resort to pollofritto's method... so now it works, but it seems like a bit of a workaround. any advice appreciated!

 

Nathan.. did you add any ENVIRONMENT PATH variables that would affect anything? for me Process Explorer shows that Atom's Term run's under this process

C:\WINDOWS\system32\cmd.exe /s /c "C:\Users\J\.atom\packages\atom-ternjs\node_modules\.bin\tern "--persistent" "--no-port-file" "--verbose""

 

 

i find the whole node-dependency thing a bit of a mess.. eg there's a tern here too within tern-phaser

C:\Users\J\AppData\Roaming\npm\node_modules\tern-phaser\node_modules\tern\bin

but anyway as per your example tern is installed in my home folder at

C:\Users\J\node_modules\tern

 

and phaser-tern is installed in my global folder at 

C:\Users\J\AppData\Roaming\npm\node_modules\tern-phaser

 

moving one next to the other.. ie both in home dir , or both in global dir, doesn't seem to work either

 

atom-ternjs exists at

C:\Users\J\.atom\packages\atom-ternjs

 

the only thing that worked for me so far is moving Phaser.js as pollofritto detailed, but that shouldn't be necessary supposedly

 

thanks

j

[jmp909]

actually this workaround method also works... but again... it's a workaround...

https://github.com/tststs/atom-ternjs/issues/139

cd c:\Users\YOURNAME\.atom\packages\atom-ternjsnpm install tern-phaser

this essentially installs tern-phaser to 

c:\Users\J\.atom\packages\atom-ternjs\node_modules\tern-phaser

which is next to where Atom is actually running tern from 

c:\Users\J\.atom\packages\atom-ternjs\node_modules\tern

[shohan4556]

I have followed the procedure you posted here but I have encountered an error like  atom-ternjs Failed to find plugin phaser  

[shohan4556]

i can explain what i did but i don't think it's the right method.

Go to the tern-phaser directory and copy the Phaser.js file that you will find inside of it.

Open Atom and go to the preference tab.

Click on packages and find the atom-ternjs package. Click on the settings button and than click on View code.

At this point you can navigate through the atom-ternjs folders.

Search for the "plugin" folder and open it with explorer.

Paste there the Phaser.js file, restart Atom and you are done.

 

If you update the atom-ternjs package you have to go through that process again... 

 

Cool man I have followed this way and its works fine , thanks 

[tidelake]

Hello, I got the same error (on Mac 10.11) atom-ternjs Failed to find plugin phaser   following the instructions. To solve it I uninstalled tern and tern-phaser then reinstalled both without the `-g` option, then restarted the server.  May not be a great solution, but if you're just getting started, any hindrance is 10x worse

[Megamaiku]

Thanks Pollofrito. Got mine to work that way. Worked like a charm. 

I think if I were to add to this guide would be:

1. Open Atom's package manager
2. Search for atom-ternjs and install it
3. A button that says "View Code" will become available under the package name. Click it.
4. The package directory will open as a "project". 
5. Navigate to node_modules > tern > plugin, and right-click "show in explorer/finder"
6. paste the phaser.js file you got from the tern-phaser folder (or you can find the code here https://github.com/angelozerr/tern-phaser/blob/master/phaser.js )
7. Open a phaser project, to to Packages > Atom Ternjs, and "save and restart server". This will open the config code for your project
8. Paste this (update ecmaVersion as appropriate for current phaser compatibility)

 

{   "ecmaVersion": 5,   "libs": ["browser"],   "plugins": {     "phaser": {}   } }

      9. If needed, restart Atom. 

 

 

[Le Sparte]

Thanks for the walkthrough! It worked!

[theflyinhawaiian]

@Megamaiku, Thanks for adding in those extra steps, it worked perfectly for me (I'm on Windows 10)

[MindTaffy]

I plan to use ATOM with Phaser 3 and Code-and-Web's tools, will there be a tern-phaser3 created, as this would be needed to be used correctly with the scratch-rewritten Phaser3 API? Thanks. Wallace Jackson