gcardozo

Visual Studio Code Intellisense code completion

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

npm install --save-dev pixi.js@4.5.1

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. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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! :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.