[New!] Roblox Studio-Like Syntax Highlighting for VSCode

Background

For developers that are using Rojo + VSCode, there were no existing themes which provided syntax highlighting similar to Roblox Studio. Until now! Here’s a link to the extension I created for this.

Why not just use Roblox Studio?

A fair question. Using Rojo + an external IDE like VSCode allows programmers to directly modify Roblox game files on their local file system, which allows the use of Github, a version control management tool. It also opens up the possibility of using open source tooling like Selene, which can be used to standardize code better and catch certain bugs. It’s not for everyone, but certainly has a use for some people.

Why make this extension?

Well, I was originally developing my game in Roblox Studio. However, I decided I wanted the benefits of version control, so I switched to Rojo + VSCode. My problem was, the code looked all different and I just thought it looked ugly. So I went to look for themes. But there were no themes that made the code look like Roblox Studio. So I decided to make my own.

Target Audience

Developers who are switching from Roblox Studio to VSCode but want their code to look as if it were in Roblox Studio.

Preview

13 Likes

I love this extension but I really need a way to turn off “Auto Insert Do, Then, End”. I would really benefit from a setting

1 Like

Hello! I love this extension you made, it really makes VSCode feel like Studio and it’s amazing, hopefully this will encourage more people to switch to the former.

There’s only a few details I would improve:

  • When defining tables the colours are not the same as in studio
  • I’m not particularly fond of variables being in italic, I find them distracting: it would be great to have an option to turn them off
  • I would mention in the extension’s description that it has some settings, and maybe tell users how to enable it (just in case someone is very new to VSCode)
  • The font looks a little different on my PC than the photos / videos in the documentation: here there’s not much to do, so you could add in the description how to change the font’s size / spacing (even just a link to a guide)
  • Some features to me seem a little out of scope (for example the Auto Insert Do, Then, End): I would keep this extension as just a syntax highlighter since most people would use it exclusively for this. But if your wish is to make it be more than that I totally get it.

Besides those small details I feel like this extension is really good and doesn’t need much more work. I really hope it gets more recognition because it’s very interesting!


P.S. I tweaked a couple parameters to have a softer color, blending the extension colours with the Modern Dark theme. Here are the parameters if anyone wants to try it:

    "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
    "editor.fontSize": 13,
    "editor.letterSpacing": 0.2,
    "editor.lineHeight": 17,
    "workbench.colorCustomizations": {
        "[Roblox Dark]": {
            "activityBar.activeBorder": "#0078d4",
            "activityBar.background": "#181818",
            "activityBar.border": "#2b2b2b",
    		"activityBar.foreground": "#d7d7d7",
            "editor.background": "#202227",
            "editor.foreground": "#bcbec8", // make text gray instead of white; to make it stand out more replace with "#d7d7d7"
            "editorBracketHighlight.foreground1": "#bcbec8",
            "editorBracketHighlight.foreground2": "#bcbec8",
            "editorBracketHighlight.foreground3": "#bcbec8",
            "editorBracketHighlight.foreground4": "#bcbec8",
            "editorBracketHighlight.foreground5": "#bcbec8",
            "editorBracketHighlight.foreground6": "#bcbec8",
            "sideBar.background": "#181818",
            "sideBar.border": "#2b2b2b",
            "sideBarSectionHeader.background": "#181818",
    		"statusBar.background": "#181818",
    		"statusBar.foreground": "#cccccc",
            "tab.activeBackground": "#1f1f1f",
    		"tab.activeBorderTop": "#0078d4",
            "tab.inactiveBackground": "#181818",
            "tab.hoverBackground": "#1f1f1f",
            "tab.unfocusedActiveBackground": "#1f1f1f",
            "titleBar.activeBackground": "#181818",
            "titleBar.border": "#2b2b2b",
        }
    }

(if you don’t know how to do it: (1) Press Ctrl + shift + P (2) in the search bar type Preferences: Open User Settings (JSON) (3) paste inside the table the code I gave you)

Edit: Been playing with a couple properties and found a setup I like better. I’ve updated the parameters!

2 Likes

Wow, this is really good!!!1!1!1! Thanks you!

1 Like