Is there a preferred development setup?

Off topic
1

My goal is as follows

  • I want to deploy applications via WebXR for consumption on Quest and Android Devices

What I’m currently doing

  • Using only vanilla Html, CSS and Javascript to set up a basic WebXR env with a camera and some spheres and cubes
  • The babylonjs, js files are acquired via your testing cdn (I haven’t deployed anything in production yet and I’m just playing around)
  • Every time I want to make a change I try it out on a playground, I do this because I get code completion and intellisense and then copy what I wrote into my js files
  • Everytime I want to debug something I have to connect the chrome debugger to a tab on my quest or phone and then debug with console logs

My question might be really naive but I’m from an Android development env where Android Studio just gave you everything in 1 ide. Is there some tool or IDE recommended by the community that can make development a little less tedious? I’d love to get break point debugging, and logs and intellisense right in 1 ide and not have to switch around

2

YMMV But you could try vscode. It’s pretty ok on intellisense as long as your env is setup right. Just depends on the tools you decide to use and the js environment. i.e. node.js, deno, bun or web. If you use npm, yarn, pnpm, or other.. vscode is more about the extensions than to provide it directly only.

3

I am currently using vscode to edit my js files, but the intellisense is only from basic JS, not the babylon classes, do I need to do something specific to get it?

From you reply I gather it’s about somehow connecting vscode to the env that npm or yarn would set up for js development, okay I will look into this.

Thanks!

4

It heavily leans on your imports, package.json, tsconfig.json, typescript types, etc.It gets dumb really fast. You can try intellicode but I didn’t find much out of it moreso than being able to locate the classes imported, etc.

example from a simple package.json:

{
    "dependencies": {
        "@babylonjs/core": "^8.1.1",
        "@babylonjs/gui": "^8.1.1",
        "@babylonjs/havok": "^1.3.10",
        "@babylonjs/loaders": "^8.1.1",
        "@babylonjs/materials": "^8.1.1",
        "@babylonjs/serializers": "^8.1.1",
    }
}
1 Like
5

Thanks, that was helpful.
I did try this but I wanted something that also provided debug functionality.

I ended up trying WebStorm from jetBrains, It’s pretty sweet

6

for vscode debug functionality is about what extension you have installed for what environment. i.e. node.js.. then you have to create a launch configuration in launch.json for by automatically selecting node from ‘detected environments’ when attempting, etc. That’s on top of all the other .json files. Then you can debug. It’s a little but of a hill to climb if you’re not familiar with it all.

Glad you found a tool that works for you. That’s more important. :+1:

1 Like