September 5th, 2022

Adding color to bracket pairs

Mads Kristensen
Principal Product Manager

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.

Image image 7

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).

Image theme colors 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.

Image options

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.

Image menu

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.

Author

Mads Kristensen
Principal Product Manager

Mads Kristensen is a principal program manager on the Visual Studio team and has published over 150 free Visual Studio extensions. He blogs about anything related to Visual Studio and can often be found hosting various shows on the Visual Studio YouTube channel..

41 comments

Discussion is closed. Login to edit/delete existing comments.

  • Daite Dve · Edited

    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. 🙂

  • peter sz

    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!

  • Brian Thomson

    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.

  • J. Larry Aultman

    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.

  • Lillian Prodanich

    this would simplify reading code extensively!! hope to be able to use soon!

  • designerferg

    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...

    Read more
  • Jinming Mu

    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?

  • Hamed

    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.

    • painterofflight

      Would that be soft dome ish?

  • Nathan Ferreira · Edited

    They forgot something, add colorization options for both < and > in generic types.

  • MgSam

    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.