Code Outline - View your code's variables at a glance

Help and Feedback Creations Feedback
, ,
#1

Get it here!

Some IDEs, like VS Code, offer a “code outline” in which your code’s variable names are parsed and displayed. Clicking a variable name jumps your cursor to the line that defines the variable.

image
(Image of VS Code Outline)

As you can imagine, that’s very useful. @Crxzycar asked if I could make that into a plugin for Roblox Studio, and I accepted the challenge.

After hours of hard work, I present my Code Outline plugin!

boolean-search

My plugin offers a lot of additional options and functionality to make it easier to use and more powerful. Using my open source lexer, it gets your variables and infers the type when possible!

image
image698×327 21.5 KB

When you click on a variable in the outline, it jumps your script editor to the line that the variable was defined on, giving you excellent and speedy code navigation at your fingertips!

navigation

You can choose to filter out specified types, or filter by name to help you find what you need as fast as possible. You can also opt to sort alphabetically instead of by line number, although I honestly don’t understand why you’d want alphabetical sorting. That’s how VS Code sorts, so I figured I’d add it as an option.

image

My plugin UI matches Studio UI rather nicely, and it even colors the type icons based on your script highlight colors. This gives a very smooth experience when working with this plugin.

image

You can choose to have it outline your currently open script, or you can set it to outline your currently selected script.
You can also set it to automatically close if you have no open editor/selected script.

image

Fun Fact: Once I had the basic prototype running, I installed it locally and used it to speed up the creation of the plugin itself. It’s such a useful workflow enhancer that I literally couldn’t wait to be finished, I just started using it as soon as I could.

thanos
thanos800×450 49.7 KB

Get it here!

Enjoying my work? I love to create and share with the community.

I make loads of free and open source scripts and modules for you all to use in your projects!
You can find a lot of them listed for you in my portfolio. Enjoy!

If you’d like to help fund my work, check out my Patreon or PayPal!

173 Likes
Lexer for RBX Lua
Code Navigator | Manage Your Variables And Functions With Ease!
Does Studio have a file preview / minimap on the right side of the editor
#4

Amazing job! Definetely will be using this!

That’s probably the most epic thing I’ve ever heard lol.

7 Likes
#5

This is going to be really useful! Already installed and docked! I’m pretty sure this is a bug though:

image
image1536×212 27.2 KB

Also, do you think you might be able to add the option to have it outline a script selected in the explorer? This’d be useful for when you create configuration/utility/API/etc. modules without needing to physically open and browse through them. Not a priority, but would be nice to have.

4 Likes
#6

That’s definitely a bug, thanks for reporting it. Could you DM me the source that is being parsed incorrectly, so I can use it to identify and fix whatever is going wrong there?

I’ll add that to the backburner for when I get a chance.

4 Likes
#7

I used the plugin to dev the plugin

Boatbomber 2020-2021 XD

But else, I really wonder why Roblox dosen‘t have this by default, it‘s‚ one of there features that really should be there by default. But our boatbomber did the job for us again, I can‘t find the words to thanks you for all the efforts that you spent on the community.

(How do you find the inspiration for your thunbails? No really, they all looks amazing, and I need to say that I really need to covet you for this…)

1 Like
#8

Do I die in 2021?! :flushed:

You just did. :blush: You’re very welcome!

10 Likes
#9

I just tried this out, it’s great. Would you consider adding a class recognition feature at some point?

Edit: Also, thanks for continuously making great modules and plugins. I’ve used a lot of your stuff and I love it all.

1 Like
#10

There are probably too many classes to include, but an Instance type would be good… :eyes:

1 Like
#11

I fixed the issue reported by @cxmeels. Update your plugins to get this fix!

image
image1789×308 47.4 KB

Edit: I’m blind, it’s still a bit wonky. There are multiple issues here, but at least I solved one of them lol

Edit 2: It’s properly fixed now. :smiley:
image

3 Likes
#12

Update!

  • New icons, courtesy of the incredible @Elttob (creator of Vanilla)!

  • Bug fixes for wonky parsing in some cases!

image
image1639×522 25 KB

16 Likes
#13

I think this will help a lot of developers that don’t know how to do these types of things! I’d say you did a fantastic job making and explaining the plug-in!
(PS I love the Thanos meme you added)

1 Like
#14

Update!

  • Typed table variables with granular controls!

image

There are now icons for each type within a table, rather than just “Table Variable”. This is much more helpful, and it also allows for individual settings of each table.Type!

7 Likes
#15

I haven’t used it yet, but it seems amazing for navigation. Just one question though, so if click one of the things in the outline widget, will it take me to location inside the script? If so it will be really helpful I can tell.

I haven’t read the entire article sadly due to time, but I will make sure to read it and try out the plugin as soon as I can.

2 Likes
#16

Yup! That’s the point. When you click on one of the listings in the outline, it scrolls to that spot in the script editor and puts your cursor on that line.

I just realized I never even mentioned that in the OP. :grimacing: Thanks for bringing it up! (Edit: Added a GIF in OP showing it being used)

3 Likes
#17

Omg amazing, definitely excited to get this plugin when I get on my computer. I can see myself using this a lot now.

3 Likes
#18

nice and pewfect! will def use when I can.

4 Likes
#19

Boatbomber has done it again! I am in absolute shock that you actually made this, with such a clean UI too. Can’t imagine the code behind this! Huge props to you!
I didn’t even know this was a thing in VSCode (please don’t hurt me) :neutral_face:

5 Likes
#20

:open_mouth: I didn’t even know what outline feature was for until now :stuck_out_tongue: but now that i know of it, i’m definitely going to use this XD (Although im a rojo user, sometimes its nice to vew scripts in studio directly lol)

3 Likes
#21

I will definitely be using this to improve my ability of finding my variables, functions, etc. in my scripts (and yes I do forget where they are :stuck_out_tongue_closed_eyes:). This is a really neat plugin and I’m looking forward to starting my 2021 scripting sessions with this.

Thanks again for contributing to the community and I wish you the best for your next open sourced module, plugin, and everything else!

2 Likes
#22

I have one question though. For tables, I usually include “mini-tables” inside the main table. Does this plugin have a drop down from a table var that shows all of the “mini-tables” within that table var or are they put on the menu as seperate variables?

Table example that I am talking about 
local tab = {
miniTable = {}
}