Adding color to bracket pairs
Mads Kristensen
When dealing with deeply nested brackets in Visual Studio, it can be hard to figure out which brackets match and which do not. For people with color blindness or other optic maladies, the problem can be even worse. By color-coding bracket pairs, we’re making this much easier.
Various IDE’s and editors offer this feature today – usually done through extensions. For example, the Viasfora extension for Visual Studio has provided this feature for many years. What’s interesting about all these implementations is how they all do things a bit differently. Granted, they all colorize bracket pairs, but the way they do it differs and a lot of them provide additional features and options.
A feature request on the Visual Studio Developer Community is also now gaining steam asking for colorized bracket pairs, so please vote and comment if you agree.
So, with increased interest and multiple viable solutions, what would the right implementation look like for Visual Studio users?
Let’s do an experiment to find out.
The experiment
We’re starting out with an extension to kick off the experiment. We call it Rainbow Braces and the first iteration adds basic colorization to curly brackets, square brackets, and parentheses (see image above).
Figure 1: Colorized bracket pairs in both light and dark theme
It has four unique colors that it will cycle through and repeat for as many levels deep as needed. The colors work equally well for both light and dark themes and can be customized in the Fonts and Colors options page.
You can easily toggle the colorization on and off from the Edit -> Advanced top-level menu. Or use the keyboard shortcut Ctrl+Shift+9 to execute the Toggle Rainbow Braces command.
Next steps
If this feature is interesting to you, please install the Rainbow Braces extensions and take it for a ride. Make sure to share any ideas and bugs on the GitHub issue tracker, and feel free to send pull requests too. The feature request ticket is a suitable place to share your comments and thoughts, so make sure to vote and comment there as well.
Do you like the idea of community experiments like this one? Let us know in the comments below.
Light
Dark
41 comments
I suggest verticle structure guide lines should also use the same rainbow color as open/close “flower” brackets as this will add more clarity to the code block. Currently, it is showing gray color and this can be improved by forcing it to use the same color as the open/close flower bracket.
Imagine a function whose code length is running multiple pages with many IF{…} ELSE IF {..} ELSE{..} blocks; with rainbow-colored verticle structured guide lines it will be very easy to know which part of the code block level is being worked on without scrolling up and down.
I really appreciate that too
This is a great idea and was suggested on the GitHub repro already. See it here: https://github.com/madskristensen/RainbowBraces/issues/7
Really cool extension, installing it right away. Especially useful when navigating nasty legacy code where we have tons of nesting levels.
The name is a bit misleading though… as we know, rainbows don’t have only 4 colors… I hope the name wasn’t chosen as some sort of veiled virtue signal and/or won’t be used as such. Calling it “Colored Braces” would’ve not only made more sense, but also been more intuitive to users as well, particularly when navigating menus to find the setting.
The name comes from similar extensions for other editors/IDEs, such as this one or this one.
The JetBrains one is really good, use it all the time, I inherited a project with sometimes 10+ levels of indents stretching over more than the screen, it is a real lifesaver.
vscode does this, but I only find it useful for when multiple sets of brackets of the same kind are present on the same line. This mostly happens with parentheses due to nested/inline method calls, casts, parenthetical math expressions, etc.
For brackets that are on their own line, indentation (especially with vertical guides) is more than enough for me to understand where blocks start and end. Likewise, I never have trouble with square brackets for indexers because even when they’re nested in a bunch of other brackets, those outer brackets tend to be parentheses, not extra square brackets. So given that I’m not (personally) experiencing a confusion problem there, I find the seemingly inconsistent syntax colouring to be more of a distraction than anything else.
That said, I’m taking a very C#-centric view here, so maybe it’s more helpful in other languages, but for me personally it’s not a feature that I am entirely sold on. Unless it’s made a bit smarter/more configurable, it might end up being something I disable (which is not to say it isn’t valuable for other users, of course.)
I’ve just noticed looking at the feature request thread that there’s an extra screenshot Mads posted of the extension which shows you can disable it for curly braces and square brackets individually. I think that probably solves most of my issues here 👍
We I tell ya, up creampie king so the square panted also has the in the bag so go speak the one that twirled the hair finger wise and still does but only had braces in Jr. High school. So hurry get it off to her quick [RAT] IN SWUARE BRACKETS.!!!!
I’d want to enable colorization for parentheses but not others. Curly braces are generally well formatted and aligned, while nested parentheses are really an issue.
You can have it enabled just for parentheses. Just disable the other bracket types from the Tools -> Options dialog
You can enable \ disable:
https://github.com/madskristensen/RainbowBraces/raw/master/art/options2.png
This is the killer feature! Viasfora doesn’t have it.
Thank you!
Viasfora support multiple languages not just C# …….. and you can enable/disable per language. Consider using extension first.
Your VS extensions are awesome! Thank you for what you are doing for VS devs community!
I would suggest to take a look at Visual Studio Code bracket colorization settings and make something similar (Editor->Bracket Pair Colorization, Editor->Guides: Bracket Pair etc.).
I personally would like to have independent color pool per bracket type.
Also having content of the bracket underlined with matching color is quite useful.
Angle brackets would be a welcome addition.
I would also suggest to have independent color pool per bracket type. And the default colors are too dark/powerfull in my opinion. They draw the attention way too much on them.
Nice, “Sticky Scroll” like VS Code last addition also would be really welcome!
https://code.visualstudio.com/updates/v1_70#_editor-sticky-scroll
You know I love your work, but why spend time creating a clone of Viasfora, which does a terrific job. Is there something you intend to add that they don’t do?
The purpose of this extension is to figure out how best to design this feature so we can build it into Visual Studio. By giving developers an extension and having them open bugs and give feedback is what we’re experimenting with here. Instead of asking what users want, we can now measure and iterate in collaboration with the community to identify the best design from actual usage.
Is there something you intend to add that they don’t do?
Already: in this extension you can enable \ disable colorization of curly \ parentheses \ square bracers.
Viasfora can’t do it: https://github.com/tomasr/viasfora/issues/151
About viasfora: https://devblogs.microsoft.com/visualstudio/adding-color-to-bracket-pairs/#comment-27556
Are you guys aware of:
https://marketplace.visualstudio.com/items?itemName=TomasRestrepo.Viasfora
Because I’m pretty sure this is ~99% identical, maybe better to join forces?
They even use the same terminology, it’s called Rainbow Braces 🙂
Did you read the article? They literally mentioned that very extension with a link to it in the second paragraph.
The reasons why it is important to integrate common functionality instead of relying on a third party is quite long. Just as a start
– VS developers have better exposure to the code and what optimizations can be done to make it faster/more stable.
– Helps identify challenges in extension writing that might require additional endpoints to be exposed.
– With MS support it becomes lockstep with the VS release so you don’t “lose” functionality when the third party dev stops supporting, doesn’t update, etc the code.
– Many companies have a policy that prohibit using non-MS software (for reasons I don’t understand).
– Unless you know about the extension it is unlikely you’ll find it to use it as the marketplace doesn’t make any of this easy to find.
– Installing extensions is still, in my opinion, an advanced concept and not something beginner or intermediate devs do.
Problems of Viasfora:
1. TELEMETRY. No way under any circumstances! It’s not their business what VS I use or what colors I prefer.
2. As any “small” extension, it become BLOATWARE, appending absolutely STUPID features (like “highlight of closing tag different color” – seriously?!!! THAT you name “improvement”??)
3. Ideally if extension does ONE job and does it well. If you include tens of features, EACH of them must be optional (switched off). Not sure Viasfora has it.
4. Mads’ extension will be integrated into VS. Sure it’s good quality code, which don’t need a whole month of “code inspection”.
I much prefer highlighting a matching bracket when I place the cursor on it.
The UI is already cartoonish enough, I do not need/want more colors to distract me.
I agree. Visual clutter can be overwhelming sometimes. It’s a super useful feature to have, but I’d prefer it to be something that can be quickly and easily toggled on/off (e.g. via a toolbar button).
Control-shift-9 toggles it on and off, according to the article.
I would tend to agree that it shouldn’t draw attention to itself unless you care. However the most common use case for this feature, I believe, is in code bases where you cannot see the entire block on one screen and/or the code is so mangled you cannot find it. In the “can’t find it” case then I think hovering over it and causing it become highlighted would be good.
But it is not useful in the case where the related punctuator is not on the same screen as scrolling up/down would cause you to lose the focus. So anything that would be contextual would need to handle this common case. Perhaps you “click” the punctuator and it highlights the related one so you can scroll up/down to find it. Alternatively being able to right-click and “jump to” the related one (if any) would be good as well. Yet another approach that could be useful is to allow you to scroll up/down and as you cross the visible page boundary it transitions to a “peek definition” mode where you can see the one you care about and the area you’re scrolling but skip everything in between.
Great Job!!! I will use it definitely!!! 👍😍💖
I think this is a great idea. Though I think the default colors you guys picked are too similar. 3 of the 4 are reddish in tone (orange, red, pink). Better defaults are definitely needed.
They forgot something, add colorization options for both < and > in generic types.
I used it for some days and I definitely like it, except the default red color was too much and I changed it to a soft blue.
Would that be soft dome ish?
From namespace to function via class three bracket pairs will be used defaults
Four levels are insufficient. seven levels are Ok
or just start from level four？
Very useful for parenthesis nesting.
Have to agree that the default colors aren’t great, but they are easy enough to change. Switched to a more visually distinct set with more contrast between levels and it’s much easier to parse.
Will be glad to see this as a supported feature. Once angle brackets and the vertical markers for code blocks get added to the feature list, it should cover any use cases I have. Definitely plan to keep using this.
this would simplify reading code extensively!! hope to be able to use soon!
Speaking as a colorblind individual. It actually made my condition worse. I only see brightness/contrast with very little color. The darker the color the more dim it becomes fading into gray. I can see color in the green to bright orange range but reds and deep blues are either not there (red) or black (deep blues). I turned it off, at least black and white work for me.
Visual Studio has always had the feature where highlighting one brace highlights the matching brace. (Its a little flaky on my install, but mostly works).
So: if the coder highlights a brace, why not show a context menu to add this colouring – and turn it off when no longer needed. That should keep everyone happy.
One of the top and certainly my most requested features is coloring the angular brackets, that’s the used for deeply nested C++ templates when doing meta-programming magic. I think of a naive implementation based of textual analysis is quite difficult so none of the extensions provide this feature. Microsoft please make it happen!
It’s cool extension, thanks Mads! But I left only parentheses to highlight (because it’s the one case when you need help) As an option, it could be nice to see some UNDERLINE between paired parentheses (to easier catch what portion of expression is bracketed).
Advice #2: I made first color to highlight as BLACK, so when you have only single brackets, they look like normal code. No need to convert code into parrot sh***t. 🙂