Plans to update code editor?

[Disorder]

Hello! As I can see you are using CodeMirror as code editor, and I noticed it never been updated since I have started to use Playcanvas at all.
I can check in console CodeMirror.version and it returns me “5.19.0”.

This version is from 2016, really?
Don’t want to disturb you, but it’s already 5.58.3 is available. Okay, I can understand that it might be not so easy to update, but I’d like to know maybe you have plans? There are bunch of changes and fixes, at least for highlighting syntax. It’s really hell to write code (especially after VSCode editor) (and especially if I want to create something more difficult than scratched box).

[yaustar]

I actually wanted to update to v6 but it wasn’t backwards compatible.

I will ask about updating to the latest minor release after checking the release notes.

The main issue is that we’ve modified on top of Code Mirror to work with our Editor so we see how it goes.

You may also want to consider playcanvas-sync that allows code files to be push/pulled from a project and branch to your local PC https://github.com/playcanvas/playcanvas-sync

[Crefossus]

I hope it’s not too off topic, but playcanvas-sync should be more visible. Maybe there could even be a link in the web editor itself? Using the web editor is cool and all, but coming from visual studio+visual assist for ue4 it is a big difference. The editor has always been a big pain point for me personally so I’m very happy to see playcanvas-sync.

The only thing missing then vs. coding for ue4 is nicer debugging - which just probably comes down to me learning the ins and outs of whatever browser I’m using. Step debugging and watching vars just feels clunky/disconnected with a browser.

[yaustar]

@Crefossus

I hope it’s not too off topic, but playcanvas-sync should be more visible.

There’s a whole bunch of tasks on updating the documentation so chances are that it be added there.

@Crefossus

Using the web editor is cool and all, but coming from visual studio+visual assist for ue4 it is a big difference.

JS is not strongly typed so code completion is always going to be poor no matter the editor compared to C++ or C#. Other tools do make it a bit nicer to use though such as code snippets and extensions.

@Crefossus

Step debugging and watching vars just feels clunky/disconnected with a browser.

I’ve actually found Chrome devtools to be really good for debugging. I’m thinking of adding some tips and tricks to the documentation.

Is there anything you have trouble with in Chrome devtools that I could try and help with or add documentation for?

[Crefossus]

Thanks for the response.

I’m preemptively replying since I’ve yet setup/test playcanvas-sync with vscode & typescript and I currently use ff instead of chrome. Feel free to be short with me or no reply. Having said that:

@yaustar

JS is not strongly typed so code completion is always going to be poor no matter the editor compared to C++ or C#. Other tools do make it a bit nicer to use though such as code snippets and extensions.

Does using typescript alleviate this mostly? In addition, it’s helpful to find all the places a certain function/class/etc is used in UE source or/and your project. Find all symbols/goto symbol I think. I’m guessing that can be done w/playcanvas easily in vscode after setting up according to that github page? I just need to go try.

@yaustar

Is there anything you have trouble with in Chrome devtools that I could try and help with or add documentation for?

I’ll switch back to chrome and report back eventually.

I think both chrome/ff suffer from swapping between writing code and finding the js files to place/remove a breakpoint vs plopping one down quickly in an ide. Not really anything anyone can do about this I think?

In Firefox: Adding watches to variables gets tedious since you can’t mouseover to inspect everything

Also I’m sure general tips/tricks would be useful for all! That sounds like a great idea. Pointing to google documentation can’t hurt either to save time. Sometimes you don’t know what you’re looking for or missing until someone points it out.

[yaustar]

@Crefossus

Does using typescript alleviate this mostly? In addition, it’s helpful to find all the places a certain function/class/etc is used in UE source or/and your project. Find all symbols/goto symbol I think.

With JS, again it’s very hard to do this as you can add properties and functions from anywhere. Code Mirror does have a ‘go to definition’ shortcut (and we should make it easier in the Editor to find and us)

Some hotkeys can be found here: https://developer.playcanvas.com/en/user-manual/scripting/code-editor/

Typescript will make it a lot easier. We have had some early talks about looking on how to support TypeScript in the Editor itself but any work on it will be a ways off.

Currently developers are using TypeScript locally and uploading the compiled JS via drag and dropping, the REST API or playcanvas- sync.

@Crefossus

I think both chrome/ff suffer from swapping between writing code and finding the js files to place/remove a breakpoint vs plopping one down quickly in an ide. Not really anything anyone can do about this I think?

Ah yes, I forgot about that workflow. I do wonder if there is a way to tell the devtools to open a line into a URL It’s been a while since we last looked at this.

@Crefossus

In Firefox: Adding watches to variables gets tedious since you can’t mouseover to inspect everything

In Chrome you should be able to do this. I also use the console as it’s linked to the scope where the breakpoint is to examine everything about the this object and properties. There’s also a local watch window too.