Rojo UI - A Roblox-style explorer & properties view for Visual Studio Code

NOTICE: This extension is currently partially incompatible with the Rojo extension for VSC (see here for what exactly isn’t working). I have no idea why, nor does that extension’s maintainer. I’m working on fixing this, but it might take some time. For now, the only alternative is to use the Rojo CLI.

DISCLAIMER #1: This extension is not complete. I’m currently waiting for Rojo’s two-way sync API to be more fleshed out before adding any more functionality.

DISCLAIMER #2: This extension relies on Rojo to open files. As of writing, Rojo will always use your default editor to open files, so make sure that your default editor for .lua files is VS Code. You can see how to do that in this reply. Also note that if you have more than 1 VS Code window open, this extension cannot guarantee that your script will be opened in the correct window, so I would recommend only having 1 open.

I’ve just spent the last day or two working on an extension for Visual Studio Code that’ll make Roblox development on your file-system feel a bit more familiar.

Never used Rojo before? Read about it here!

A few things have always bothered me about Rojo:

  • Required to append .client.lua or .server.lua. The requirement in itself is fine, but it’s really ugly.
  • Required to have a init file inside of a folder for any source containers with children. Again, fine with the requirement in itself, but it’s really ugly.
  • Hard to easily distinguish between classes. Sure, you’ve got your .server.lua and .client.lua, but it just clutters your view in my opinion.
  • Can’t see the contents of a .rbxm file without studio open. Not as important, but still a bit annoying.

To sum things up, I hate how messy my tree view gets when using Rojo, so I came up with a solution.

A Roblox-inspired graphical interface for Rojo

Noob User: “Woah, woah, woah, Muoshuu! You can’t just go around making graphical interfaces!”

Yes. Yes I can.

So what’s it do?

To put it simply, you can:

  • Connect to multiple instances of Rojo from a single window
  • Open and modify Scripts, LocalScripts, and ModuleScripts
  • View the properties of any instance Rojo manages
  • Use your own custom class icons

Note, however, that this extension still requires a Rojo project be set up like normal. You’ll still be appending .server.lua and adding your init.lua files to folders. After that, you can switch over to the extension’s view and take in the beauty.

Wow, that’s a lot of cool stuff! What doesn’t it do?

Basically everything else. Rojo’s two-way sync API isn’t fleshed out enough for me to add any additional functionality. Eventually, I plan on supporting the following:

  • Modifying properties from the properties view
  • Managing instances (creating, deleting, moving, copying, etc…)
  • A GUI for Rojo’s project configuration

This sounds cool and all in theory, but I have yet to see it in action!

so much for the trust we’ve been building up for the last few minutes. here’s a video :frowning:

Alright, where do I get it?

You can find the extension itself either by searching for Rojo UI in Visual Studio Code’s extension manager or by clicking here.

You can also check out the source code here! It’s a bit unrefined at the moment, but it’ll definitely get better over time.


FAQ

What version of Rojo does this extension require?

6.0.0rc1

Why should I use this? How does it benefit me?

As of writing, there is no real benefit to using this extension. It does not offer anything that would speed up development. This extension is purely for aesthetics.

When I click a script, nothing happens, or something like notepad opens. What gives?

This extension relies on Rojo to open files. As of writing, Rojo will always use your default text editor to open any files. I cannot change this. Also note that any scripts inside of a .rbxm file cannot be opened.

This reply contains a guide on how to change your default editor.

Why don’t I see my entire place in the explorer?

This extension relies entirely on Rojo for any information it receives, and Rojo only has information on the instances it manages. For this reason, it is impossible to show any instances that are not managed by Rojo. To make Rojo manage an instance, it must be defined in Rojo’s project config.

Why are the values of some properties things like Unknown BrickColor value?

As with the above answer, this means that Rojo does not have information on the value of that property. Usually, this only occurs with values that are based on other properties (like how Part.BrickColor is based on Part.Color).

Why are some of the values of properties incorrect?

For any properties that Rojo doesn’t have any information on, this extension will attempt to show the default value that Roblox applies. This might be different from the actual value, and if no default value exists, the value will show up as Unknown VALUE_TYPE value.

How do I use custom icons?

Open the extension’s configuration and set the Icon Folder field to the absolute path of the directory containing your icons. Note that the icons must be .png files and must be named exactly the same as the class.

If you have additional questions, feel free to ask.

137 Likes

This is honestly really neat. Hopefully LPGHatguy, the demigod, the titan, the great and powerful, will see this thread.

1 Like

This will make a big difference in the programming community, especially for Rojo users. I appreciate this new extension and I am very excited to use this! One of the best and useful devforum post I’ve seen in a very long time. Keep up the work! :slight_smile:

2 Likes

Wasn’t able to see what this was exactly on account of my broken monitor but holy hell this is incredible.

1 Like

This is huge! Thanks for helping create a resource of this caliber.

I’m having a minor problem, when double clicking any script in the explorer, it does not open, is this due to your extension or the rojo extension?

1 Like

Well, I technically have the same problem, except it only opens Notepad. I’d really like to use this though.

WHAT! Just came back to vanilla Roblox IDE but this may make me leave it again, what an interesting point of view I couldn’t have thought of this

I guess we’ll have to wait for an official response from the developer, or just put up an issue on the github page.

@saSlol2436

Make sure your default editor for .lua files is VS Code. The extension relies on Rojo for opening files as it doesn’t have access to any file paths, and Rojo will always use the default editor.

To change your default editor on Windows:

  1. Right click any .lua file
  2. Click “Open with…”
  3. In the dialog that pops up, find and select Visual Studio Code, then check the “Always use this app to open .lua files” box, as seen here.
  4. Press OK and try opening a script again

I don’t own any Apple devices, but the process should be roughly similar on MacOS.

@UnlimitedKeeping
Same as above. Also, make sure the script is not inside of a .rbxm file. Rojo cannot open these files.

If it still isn’t working, DM me.

1 Like

I tried a primitive method by simply changing the code editor that the .lua files opens to notepad, and it worked just fine, but when I swapped back to VSC, it still did not work.

so, from that it seems like my VSC can’t open .lua files into the project workspace. yet from the folder explorer in VSC, I can open the .lua files perfectly fine without any problems.

I’m curious, after changing your default editor, does this extension work for you?

2 Likes

Not sure what would cause that. Best I can suggest is that you reinstall VSC and make sure you’re on Rojo 6.0.0rc1. Also check Rojo’s output for any additional information.

Yeah, after doing Muoshoob’s method. Everything worked perfectly for me.

I solved the problem, apparently you cannot use this with the rojo VSC extension, I changed to the binaries, and then this extension worked just fine, seems like the problem lies within the rojo VSC extension.

note to everyone experiencing the same issue, do not use the VSC extension if you’re planning on using this extension, it will not work.

Make sure you’ve set your release branch to 6.x in the Rojo VSC extension’s settings.

image

image

I was indeed using the 6.x release branch, if you feel like doing it, could you test this if it does indeed work on your end?

1 Like

You’re correct; I’ve reproduced the issue on my device. Rojo returns as usual (no error information, all checks pass), but does not open the file in VSC. I’ll contact evaera and see if it can’t be resolved quickly. For now, just use the CLI.

Created an issue on the Github repo with a bit of additional info for anyone that wants to check it out.

2 Likes

Extension updated to v0.0.3.

[0.0.3] - 2020-06-24

  • Fixed random disconnects (hopefully)
  • Fixed live sync not working
  • Add extension icon