Is there a way to get BJS api terms into Visual Studio Code (or even others text editors)? I don’t know how that autocompletion task could be generated and maintained, but it’s could a be a nice feature. Is there kind of file standard for autocompletion for code editors?
I use Babylon within a NPM environment and using React.
As far as I know auto-completion in code works out of the box when you use the packet manager (npm/yarn).
OK, maybe it’s my use of local webserver which is not conventionnal.
I take the habit to use a powershell/command and type http-server to quickly launch one, even simpler that using Easyphp or Wamp I think. But I’ve installed http-server using npm install http-server -g, I probably missing some functionnality doing that way.
I just tested it in an empty folder. It didn’t work for me either.
Maybe it works in my other project because I use it with typescript and webpack.
It’s more about how you have setup npm and the package.json
if you install the new 4.0.0 alpha release all the typescript stuff works out of the box as long as you have a working typescript project.
I good way to get everything up and running easily is using
npx create-react-app myapp --typescript
cd myapp
npm i @babylonjs/{core,loaders,materials,inspector}@preview
Then in the src/index.tsx remove everything and write your babylonjs code there.
1 Like
I created this simple stackblitz template to get you started 
Thanks To be honest I’m not dev’ so I haven’t any idea at all about how to use your template 
(I can code some bits using Javascript, but never use Typescript, and haven’t played too much with npm so…). But it can surely be useful for many people.
1 Like
OK so your solutions leads me to a final very simple solution actually, but that I was never tested:
on my project folder, just use the command line
npm install babylonjs --save
… and yep, now VisualStudio doing its magic
2 Likes
Hi,
I found this other method, which consists in adding a reference to the babylon.d.ts file loaded on [https://github.com/BabylonJS/Babylon.js/tree/master/dist]
I don’t know if this solution is better and easier to implement, especially since I didn’t understand how to make my solution work with the npm install --save command
So if Vinc3r can develop the steps to follow, that would be great.
2 Likes
@Cstfan using <reference> is something that you don’t really do any more.
The way vs code and other editors know how to show intelli sense is by first inspecting all installed node_modules package.json files for a “types” key which points to a .d.ts file which contains all the types.
Then it goes to the node_modules/@types/ directory and looks for .d.ts files there.
So hopefully the types comes with the library you are installing, or else you will need to install the .d.ts files by doing a npm install @types/mypackage which will then get installed into the node_modules folder, which then vs code finds.
But make sure the library doesn’t already have types or else you will find your self with double types and a lot of strange typing errors. Been there, done that
Microsoft has this good search engine for types here.
http://microsoft.github.io/TypeSearch/
But to get vs code to recognize that you have a typescript project, you need to have a tsconfig.json file that is correctly setup.
I’ve created a simple starter here: GitHub - leon/starter-babylonjs: A modern starter for babylonjs 4 (preview release) which you can clone / download.
It’s based on create-react-app, but that’s only because they have put a lot of effort into getting webpack / webpack-devserver / typescript / sass / … to work together.
It’s not in any way dependant on you shipping with it.
The good thing with doing a npm run build with this, is that you get a very optimized project, which has support for a lot of great stuff.
I hope this sheds some light onto the situation
2 Likes
Hi @Leon,
Thank you very much for your detailed answer, but I admit I don’t understand everything and therefore I can’t apply what you say. But it’s not your fault, I’m not yet familiar enough with the development environments and terminology. But maybe @Vinc3r can complete your explanations in order to understand how to do it.
Thank you again very much for your explanations
About what steps I’ve done, kind-of “I-don’t-know-too-much-what-I’m-doing-but-it-works”:
- install Node.js, (which brings npm with it) (don’t remember if, but on Windows in case installer asks you if you want using PATH, say yes)
- open a command in the root folder of your BabylonJS app
- write
npm install babylonjs --save, and it should be OK - now you have node.js installed, you could also run a webserver in this folder very quickly, by writing
http-server
1 Like
Hi Vinc3r,
After launching the command npm install babylonjs --save in my Babylon folder project, files and folders are created:
If I edit the js files of this project with Visual Studio Code, I don’t have autocompletion 
There must be something missing. 
you need to make it a TS project. Try npm init, i think that will make a ts project. Then do npm install to reinstall the packages.
I think
This should created a tsconfig which is where you will find:
“types”: [babylonjs]
hopefully
Also, do you open your project using the root folder, or only the js one? (it should be the root)
About what Rah says, I doesn’t had to tell its a TS project for now. Maybe some of my VS plugins have to do about that? I don’t think so but who knows
1 Like
maybe, but also maybe im just wrong. Im still pretty new to this. Thats just my process to get new types working
It works if I open like this.
I was opening the parent folder that contains all the projects, and that way it doesn’t work. If I want this to work, I have to adding a reference to the babylon.d.ts
Thank you Vinc3r
My started version should be very easy to get started with.
Without any previous knowledge of npm here is the rundown.
download this file
https://github.com/leon/starter-babylonjs/archive/master.zip
unpack and rename folder to whatever you project is named.
Make sure you have nodejs installed using one of their installers
download visual studio code if you haven’t already
now from within visual studio code open the directory that you unzipped.
Now to install all dependencies
from the top menu -> terminal -> new terminal
in the terminal type
npm install and press enter
this should take a while and you should see it installing things
then to start the development server type
npm start and press enter
a browser window should open and display a babylon scene with a cube.
The file that you then should edit is located in src/index.ts
5 Likes
That works! do you mind giving an overview of what are all this files I have now? why do we have to to this? all this new files make me feel i have less control because I dont know what they are 
how do I develop forward compared to ->standard html,javascripts , css? thanks!
Hello Leon, Thanks for this starter package. I´m new with all this npm stuff, but I manage to install it on my computer. The thing is that it it configured to load Babylon 4.0.0 beta 3. ¿How can I update it to load the latest version of Babylon?
Thanks to everyone for any help!