Visual Studio Code Intellisense code completion

[gcardozo]

Hi,

I'm quite new to web development, so I'm quite lost regarding to make VS Code Intellisense work for PixiJS. I'm currently using Webpack 2 and I'm able to run PixiJS examples, but only because I've included this in my index.html file:

<script type="text/javascript" src="libs/pixi.min.js"></script>

 

So, my code works, but I don't get any autocomplete in VS Code because I don't know how to import Pixi classes and methods into my .js project files. Can someone give me pointers or a small tutorial about that?

 

Thanks a lot

[megmut]

In the main entry point to your application, you can import directly there. Install PIXI with NPM, 

npm install --save-dev [email protected]

Then, go into your 'main.js' / 'main.js' and add the following

import * as PIXI from 'pixi.js';

// or //

import {Sprite, Container, AutoDetectRenderer} from 'pixi.js';

// or //

var PIXI = require('pixi.js');

Visual Studio Code 'SHOULD' pick up on the js maps from the dist folder in the pixi.js module. 

[roipeker]

I'm new a well to web development and PIXI in general, although I have a background on AS3/Starling ...

I'm using VisualCode as an editor, but I had to download the typescript definition to get IntelliSense...

npm install @types/pixi.js --save-dev

Anyway, I would love to have API docs available in the IDE, or at least, some hints about the method signature, like I use to have on Intellij Idea when developing for AS3, does anyone know if that's possible?

Thanks.

[ivan.popelyshev]

Pixi typescript definitions dont have jsdocs inside, so no, its not  

The best way is to clone pixi github repo and open it in Idea in separate window, then ctrl+N to any class you want to look at. Source code contains more information than docs, and most of functions in pixi are small, its better if you have some understanding of pixi internals too  

Typescript definitions can lie.

[jonforum]

also install index.d.ts

than add a tsConfig in your root directory

It work for me

 

 

[llpujol]

hey @gcardozo,

As said in the comments, you have to use typescript in order to have this type of auto-completion.

I created a PixiJS quick-starter, that uses typescript. You can try it out:
https://github.com/llorenspujol/parcel-pixijs-quickstarter

Also, If something isn't work as expected, you can post an issue, and i will check it.

Hope this helps.

[gcardozo]

5 minutes ago, llpujol said:

hey @gcardozo,

As said in the comments, you have to use typescript in order to have this type of auto-completion.

I created a PixiJS quick-starter, that uses typescript. You can try it out:
https://github.com/llorenspujol/parcel-pixijs-quickstarter

Also, If something isn't work as expected, you can post an issue, and i will check it.

Hope this helps.

I created this post in 2017, I remember I've ended up using Phaser instead of pure PixiJS. But as you guys mentioned, it's just a matter of adding the TypeScript typings and everything works fine. I remember back in 2017 I've had some auto-completion issues with VS Code, but I played a little bit with the same stack (TS, Webpack and PixiJS) recently and everything worked out of the box beautifully. Thanks for your answers anyway! :)