Hello! This tutorial will teach you how to setup Visual Studio Code (VSC) and Roblox Studio so you can use Rojo and GitHub for your workflow!
This tutorial is for anyone! You don’t have to be a seasoned developer, you could be fresh off the ‘I want to learn how to code!’ train and you’ll still be able to do this. (If you are coming from that train, then welcome to the developer community! It’s great to see you here.)
The resources we’ll be using for this tutorial can be found just below here, make sure to download all of them - if you haven’t already!
- Roblox Studio: which can be downloaded here.
- Git: which can be downloaded here.
- Visual Studio Code (VSC): which can be downloaded here.
- Rojo VSC Extension: which can be downloaded here.
- Rojo Roblox Studio Extension: which can be downloaded here.
That’s it! Now we can get to the magic.
The VSC Part
Am I actually using HTML tags for titles? Yes. Yes, I am.
Now there are actually two ways we can get started with VSC for Rojo. You can either:
- a) Make a new folder/workspace.
- b) Clone a GitHub repository,
I’ll show you how to do both.
Using a GitHub Repository
Basically, once you’ve cloned the repo and done the steps below, just drag the scripts to where they need to be so they can be synced.
First off, we’ll start with a fresh, clean slate of a new project (not cloning a GitHub repo).
You’ll want to make a new folder on your desktop, it should look something like this:
Now from here you can either do the following part the old-fashioned way (opening a blank terminal and traversing the path to your new folder) or you can do it the quick way (the better way) which I’ll show you how to do below:
-
First off, click on the file path, it’s this thing at the top:
-
Once you’ve clicked on it, it should look something like this (unless you have the same name and folder as me!):
-
Done? Amazing, let’s keep going. Now you’ll want to delete the text in that box - no this won’t delete anything don’t worry. Just press the backspace key!
-
Now you’ll want to type ‘cmd’ in that box:
-
Then press enter! It might take a few seconds but a command terminal should pop up!
-
Got it? Great, we’re almost to the fun bit! Now you want to type ‘code .’ - this will open up a VSC window/project for our folder!
-
Did it work? If it did you should see something like this:
Disclaimer: Yours won’t look the exact same as mine since I’ve got some extensions installed but that’s okay! -
Now, do you remember that Rojo VSC extension that I made you install earlier? (If you didn’t install it you can get it here). This is where the fun begins! (You can close that terminal window that you probably still have open by the way.)
-
Now in VSC, click on the ‘View’ tab you can find it here:
-
After that, select ‘Command Pallete’:
Or alternatively you can do Ctrl + Shift +P which is quicker. -
It should look at little something like this:
-
Once you’ve got the command palette open, you want to type in ‘Rojo’ in the search bar:
If you’ve installed the Rojo extension for VSC then you should see the option to open the Rojo menu as seen above. If you don’t see it then you need to install the extension for VSC! -
Click on the ‘Open Menu’ option for Rojo.
Now we’re getting somewhere! It’s time to actually get Rojo going in our project now.
- Now since Rojo isn’t installed on our project yet, we need to install it - ‘Midnight, I thought the extension was all we needed! Yes, you need the extension but this option allows us to get the Rojo tree going so we can start developing!’. Click on the option shown below:
Once you’ve done that, you should see an ‘aftman.toml’ file in your workspace, that’s intended and 100% okay. Also, you kinda need it :).
Now go back to the command palette and open the Rojo menu again, and it’ll look a bit different than last time! And that’s great! That means we’ve done everything correctly so far!
-
Now click on the ‘Create one now’ option:
Midnight, holy smokes I’ve got folders and scripts and ahhhhh what do I do?! Fear not! That’s all intended and it’s just Rojo installing the things it needs to run! -
Your command palette should still be open, but if it isn’t then reopen the Rojo menu via the command palette.
-
Your menu should look different again! It should look something like this:
-
Now click the green outlined arrow! This will start Rojo on VSC!
-
If that worked then you should get a notification like this:
If you’ve made it this far, congrats! You’ve done everything you have to do in VSC to get Rojo set up and the Roblox Studio part of this is a breeze, we’re almost there!
But first… A disclaimer! (no, this isn’t an ad break don’t worry!)
Disclaimer: If you already have scripts in your studio then Rojo will unfortunately delete those scripts! Midnight, I NEED those scripts! Fear not! Take a look here and follow the guide for your problems to be solved!
The Roblox Studio Part
Now it's time for the final leg of your journey, I would make this sound really hard to do but it honestly takes 2 seconds to do so it's not really worth the effort I guess... Maybe another time?-
Right-o, let’s get started. The first step is…
to open Roblox Studio! -
Once you’ve opened Roblox Studio then you can open any project/experience of yours - or you can create a new one!
-
Once you’ve opened Roblox Studio, you want to navigate to the top of your screen where you should see a buncha view tabs for different things! It should look like this:
-
Now we want to select the ‘PLUGINS’ tab. This one:
-
Now I have a buncha plugins - hopefully, you don’t have as many or worse… more! Now you want to find the Rojo extension, see if you can beat me to it! Ready? 3, 2, 1 GO!
-
Haha, I found it! Let me know if I beat you! Anyhow, it should look something like this:
Midnight… Why do you have 2 Rojo extensions?! Uhhh… I’m a Rojo enthusiast?? (you only need 1). -
Now you want to click on that extension and the Rojo Roblox Studio menu should pop up somewhere - it varies from person to person depending on your Studio layout. It should look something like this (the menu that is):
My Studio layout is the best. -
Now you want to click the ‘Connect’ button and then you’re done!
Happy developing!
Using GitHub and Rojo
This is a VSC thing and I’ll keep this short and brief.
-
On the side of VSC you should see some more view tabs down the side of it:
-
You want to click on the thing that looks like a fork, this one:
-
Now you want to set up source control - basically just do the things it tells you to do and select a GitHub repository + a branch (if you have multiple).
-
Then you’re good to go, anytime you make changes it’ll detect them and make them ready for a commit/pull request to GitHub!
Just remember to add a commit message even if it’s just ‘a’ because otherwise, it won’t work!
Congratulations! You’ve made it, you’ve done it, completed the quest, killed the dragon and freed the kingdom! And perhaps stole princesses’ heart?
If you’ve got any questions, let me know!
Thanks and happy developing,
Midnight