Setting up VSCode with ROJO

Hey guys, I’ve gotten multiple questions on how to set up a link between VSCode and Roblox Studio, so I thought I’d make a step by step walk through on how to get started. @Telosmos has made a post similar to this, but more focused on linking it to GitHub—you can go check it out if you’d like!

NOTE - In this tutorial, we are going to walk through the way my team and I normally set up for our games. We use a modular style of coding, with only one main synced folder (SyncScripts - inside of ServerStorage). We have one Script in the ServerScriptStorage and one LocalScript in the StarterPlayerScripts which contain only one line to initialize their server/client synced script counterparts.

It’s totally ok if your team has a different approach, most of the steps are universal.

Lets Get Started!

VSCode And ROJO Download links

Here are the install links (older versions will work too)
VSCode link
ROJO link (6.0.0)

Installing VSCode ROJO Extension

First we will need to install a ROJO plugin for VSCode

  1. Go to the “extensions” tab on the left hand side of your screen

1.2

  1. Type “ROJO” into the extension search bar, and then press “Install”.

2

  1. When the new ROJO landing page pops up select “MANAGE IT FOR ME”

Setting Up A New Project
  1. Make a new folder on your desktop. This is where VSCode will save your code files to

4.2

  1. In VSCode , Open your new project folder by going to File > Open Folder and selecting your folder.

4.3

  1. Now we are going to open the command bar (by pressing Ctrl + Shift + P) and type in “rojo”

5

  1. When the command bar is open, select the “Rojo: Initialize” option.

450x200

  1. After you initialize, you will see a “default.project.json” file pop up on the screen, you will want to delete the code in this file.

  1. Next, copy and paste the code below into this file, and save the file ( Ctrl + S ) .
{
  "name": "",
  "tree": {
    "$className": "DataModel",
    "ServerStorage": {
      "$className": "ServerStorage",
      "SyncScripts": {
        "$path": "ServerStorage"
      }
    }
  }
}

Now that we have the basics in place, we need to create some folders.

Folder Creation
  1. To start, we will need to right click on the explore tab, and select “New Folder”, press enter then type in “ServerStorage”

10

  1. Then we will want to left click on this newly created folder, then right click on it and select “New Folder” again. Create a folder named “Client” (this folder is now inside of the ServerStorage folder you made in the previous step) - you will want to do this for 2 more folders, “Server” and “DB”.

11

It should look like this when finished:

12

  1. Now we will create a new lua file, “ServerCore.lua”

Note - To make it a script in VSCode you will need to put " .lua " after the file name, when working with Roblox Studio.

13

Our folder structure should look like the one below:

14

Syncing VSCode with Studio

To connect our VSCode to Studio, we need to have the ROJO plugin installed on Roblox Studio and have completed the previous steps above.

  1. Inside of your VSCode workspace open the command bar ( CTRL + Shift + P) , type “rojo”, and select the “Rojo: Start server” option.

20

If this has started correctly, you will see this small pop up box come up in the bottom right hand corner of VSCode :

19

  1. Once this is done, open your Roblox Studio then click on the ROJO button in the Studio Plugins tab.

15

This window should show up, normally in the bottom right hand corner of Studio:

16

  1. Click the "Connect " button, and you should see this:

17

Awesome! You have successfully synced Roblox Studio and VSCode using the ROJO plugin.

NOTE - Any changes you make in VSCode will apply to Studio NOT the other way around.

NOTE - ROJO will sometimes disconnect while you are working. Make sure to check if you are connected before you test.

Thanks for checking out this post!

29 Likes

This is a really cool idea i really like it. But can you please tell me the uses of this. I mean it is complicated but can you tell me the uses.

Does ROJO show Roblox’s services and other Luau specific functions in the VSCode Linter (instead of vanilla Lua)? If not, this is practically useless (Unless you set it up with Github).

2 Likes

There are tons of good points and negative points, the most positive one is that when studio crashes and you forgot to save your code, it will not be deleted. You can find many arguments on the devforum

1 Like

Yeah, there are new plugins in VSCode, as well as already established ones that do autofill like ROBLOX Studio. You should be able to find what you are looking for with a quick google search.

1 Like

Finally, finally some decent tutorial on how to install Rojo. I was searching around for a month but then give up because it toke too long. Thanks for doing this! (And I just saw that on youtube there are tutorials, too, too bad that I tried before these tutorials were published…)

2 Likes

So does it help any way in making the games. For example I can use HTML/JavaScript in making my game through ROBLOX studio? If it some how does that then i am completely with the Idea. I will use it every time i make the game.

I’m not sure you fully understand web development, html and javascript are used for web development. Rojo is just a tool that enables external tooling and allows you to sync code from your file system into roblox studio.

4 Likes

I meant that as an example. What I mean by is that can we use another programming language in developing our game in Roblox Studio.

There is roblox-ts, which is a Lua → TypeScript transpiler which you can use with Rojo. So yes you can use TypeScript.

2 Likes

Okay thank you. That answers my question.

You may also want to cover Rojo SLI as I imagine that’s what most struggle with (which is the only Rojo that works with stuff like Rojo UI)

Hi, just so you know “ROJO” isn’t an acronym and so shouldn’t be spelt with all upper case, it is just “Rojo”.

Another thing to note, you should take a look at the latest releases of Rojo. The version that you are running in this tutorial is pretty outdated now and suffers from a lot of bugs and issues that are solved in the latest releases.

3 Likes

The ROJO link on the first drop down is for 6.0.0 which is the latest version. I use ROJO in all caps because that’s how it’s displayed on the logo but you can write it either way.

1 Like

In your post, you show screenshots of the plugin, which is on 0.5.4. You should avoid having a mismatch between versions, although I’m fairly certain that Rojo won’t connect if you’re not on identical versions of the plugin and server.
image

It’s written in full caps in the logo because that’s just a logo, it looks better. If you look anywhere else that Rojo is written (even on their official website), it is written as “Rojo”.

It will work just fine . The VSCode plug in and the ROJO plug in are two different things so they can’t be the same version.

1 Like

I’ve already used ROJO just for the syntax features alone. I didn’t know how to use this feature, but now I do. Thanks you so much!

1 Like

The VSCode extension is just a fancy frontend for the Rojo CLI. The extension and the Studio plugin should both run the same version of Rojo (in the case of the extension, you should select the correct version in settings).

1 Like

i tried getting it. and it wouldnt sync. i had to do a bunch of file concersions since it wouldnt sync and it still wouldnt work. it adds so much hastle.