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. @GPTelos 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
- Go to the “extensions” tab on the left hand side of your screen
- Type “ROJO” into the extension search bar, and then press “Install”.
- When the new ROJO landing page pops up select “MANAGE IT FOR ME”
Setting Up A New Project
- Make a new folder on your desktop. This is where VSCode will save your code files to
- In VSCode , Open your new project folder by going to File > Open Folder and selecting your folder.
- Now we are going to open the command bar (by pressing Ctrl + Shift + P) and type in “rojo”
- When the command bar is open, select the “Rojo: Initialize” option.
- 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.
- 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
- To start, we will need to right click on the explore tab, and select “New Folder”, press enter then type in “ServerStorage”
- 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”.
It should look like this when finished:
- 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.
Our folder structure should look like the one below:
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.
- Inside of your VSCode workspace open the command bar ( CTRL + Shift + P) , type “rojo”, and select the “Rojo: Start server” option.
If this has started correctly, you will see this small pop up box come up in the bottom right hand corner of VSCode :
- Once this is done, open your Roblox Studio then click on the ROJO button in the Studio Plugins tab.
This window should show up, normally in the bottom right hand corner of Studio:
- Click the "Connect " button, and you should see this:
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!
