You have decided to start programming in Visual Studio Code for Roblox.
There could be many motivations for this choice, but that is beyond the scope of this thread, and for another article.
This article serves as a guide for a late 2019 development workflow that myself, and many others, have decided to embark on.
Tools required for this tutorial:
- Visual Studio Code
- Ability to use and open ports on your device(you most likely can do this)
Installation
To begin, install Visual Studio Code (stable) on your device at https://code.visualstudio.com/
Upon installing and running, your interface should look something like this:
Extensions!
To begin, let’s install some extensions.
Extensions are tools that can improve your workflow or productivity
- Selene — A linter by Kampfkarren. This will display error messages that we make.
- Rojo — This is only required if you don’t have the CLI installed. You most likely don’t if you are switching from Roblox Studio to Visual Studio Code, so this extension will sync files from Visual Studio Code into your Studio session.
- Roblox Lua Autocompletes — A great extension by Kampfkarren that will make your workflow super fast!
- Atom One Dark Theme — The theme I use. Feel free to get your own!
- lua —Basic lua features, including IntelliSense, goto definition, autocompletion, and other workflow tools!
- vscode-rbxlua — Roblox Lua syntax highlighting
- lua-indent — Indents your lua code
😅 that was quite a lot of extensions to install! Your Visual Studio Code will probably look vastly different by now. Feel free to adjust settings to your need!
One setting you will need to adjust is disabling Lua by Sumneko’s linting, as we will use Selene for that. To do this, go to file > preferences > settings, and search Lua.diagnostics.enable and ensure that this option is disabled.
Rojo
During that process, Rojo may have opened a welcome screen. If you closed it and need to re-open it, press win key + shift + p and select Rojo: Show Welcome Screen
For this article, we will be using the Roblox.com plugin, so select that option! Install the plugin it prompts you to install on Roblox Studio. After installing the plugin for Roblox Studio, you can safely close this tab.
Now, we need to get a way to move our scripts from Studio to our device. This is super easy with rbxlx-to-rojo
To start Rojo from our computer, we simply press the “Start Rojo” button in the bottom right.
Now, we can open the extension in Roblox Studio and press “connect” to sync the files! Any changes we make in Visual Studio Code will be polled into Roblox Studio. This process takes a few ms.
The https://rojo.space/ website has more information about Rojo and how to use it.
Linting
It’s time to configure Selene now. We can tell Selene to use the Roblox standard library by creating selene.toml in the root of our project and having the source of the file the following:
std = "roblox"This will automatically download data from Selene about Roblox’s core libraries and how to use them. This will automatically update!
You can learn more about Selene at https://kampfkarren.github.io/selene
But I want more autocomplete!
Roblox LSP might be a great option for you. Roblox LSP provides large amounts of IntelliSense for Luau, and has neat tricks like adding end to your if statements. The config for Roblox LSP depends on your system setup, so I highly advise reading over the docs at the devforum page.
Conclusion
Switching to Visual Studio Code may seem a daunting task, however it is well worth the hour investment in my opinion, and has many benefits!
On a sidenote, If you use AeroGameFramework, the extension AeroGameFramework is perfect for you.
You may also want to check out external libraries such as roblox-ts which could also enhance your workflow. There are many options, and I look forward to the development of this community in 2020.
