Visual Studio Code BJS TS Sourcefiles

Questions
1

Hi,
I’m using Visual Studio Code for development. When I click “go to definition” of a BJS object, say for instance Mesh.CreateGroundFromHeightMap, VSC takes me to babylon.module.d.ts. How can I convice VSC to actually open the correct *.ts source-file and not the module-file?

Furthermore I’ve noticed that under node_modules/babylonjs are no *.ts files expect the babylon.module.d.ts. When stepping into BJS source while debugging node_modules/babylonjsbabylon.js is opened, again also here it would be nice if the correct *.tswould open.

I guess I’m missing something
Any help appreciated,
Regards

2

Hello,

If you haven’t already, you’ll need to add reference to the babylonjs packages you installed on your system. This is done in the tsconfig.json file. If you haven’t already, you’ll need to create a tsconfig.json file. The command for this is “tsc --init”.

Then edit the file and add the imported packages as “types” of “compilerOptions”. If this isn’t clear then reference the docs as they are very well written:

https://doc.babylonjs.com/features/npm_support

If you’ve done all of this and still have issues, then I would ping @trevordev as he initially created a github repo to provide code to get started quickly. I don’t know the specific URL, but it should be easy to search on github and it’s worth referencing.

Galen

3

Actually, the repo wasn’t that easy to search for. So here it is:

This will help anyone who has not used babylon,js with typescript previously. By the way @trevordev - great pic!

Galen

1 Like
4

@holger, if I understand correctly what you would need here is called declarationMap in TS which creates .map for declaration files.

As we are manually creating and updating the .d.ts files for various reason in BJS, it is a feature we can not support with the UMD bundled package. This is nevertheless a great idea for the es6 version of the package.

I will see how are this would be to add to it.

5

@Galen
Thanks for the hints, I’ll check against my tsconfig and adapt the missing parts
@sebavan
If I understand correctly there is currently no way to have the full ts-source file of a class shown in VSC.
As for example not only having the babylon.module.d.ts version of a texture’s constructor when clicking on it, but having the fully fledged source like https://github.com/BabylonJS/Babylon.js/blob/master/src/Materials/Textures/texture.ts
Thanks again,
Regards

6

yup you are right, we provide map files for runtime and debugging (.js.map), not for development time (.d.ts.map) as they can not be generated in our umd build.

7

Ok, thanks for clarification.
One more question: When I’m debugging with the “Debugger for Chrome” extension and stepping into babylon source the minified file babylon.js is used which I asume is node_modules/babylonjs/babylon.js. I’ve noticed that in node_modules/babylonjs is also babylon.max.js. Is there a way to convince the debugger to use this version instead the minified one?
Thanks in advance

8

It mostly depends on your toolset, but most of the time you can redirect dependencies to the files you want like using paths in tsConfig for instance.