Bracket Pair Colorizer 2 - VS Code Extension Highlight

The extension pulls from this array of colors in sequence when it's trying to determine how to use its words. Hello world, my name is Michael Jolley and I'm the bald bearded builder. And I want to talk about Visual Studio Code extensions. Visual Studio Code is quickly becoming the most popular IDE in the world regardless of what language you're using. But by itself, it's not that useful.

And that's where extensions come in. Extensions allow you to customize Versus Code to your language, to your coding styles, and even your UI preferences.

But there are so many. How do you know which ones to use? How can you find new ones that can help you? We're gonna pick a new extension to highlight each week and hopefully it'll help you find extensions that you're not aware of and that will make your development life a lot easier. This week's extension is bracket pair colorizer two.

That's not to be confused with Bracket Pair Colorizer. So what's the difference between them? They're both made by the same author and they do essentially the same thing, but Bracket Pair Colorizer two uses the built in Versus Code parser for identifying brackets, which makes it a little faster and more accurate. Hopefully, if we're gonna be talking about an extension, it's gonna be solving some kind of problem. Even if that problem is just making the IDE cooler, but in this case, it actually solves a need.

If you work with a language that uses brackets or parentheses heavily, well, you've no doubt experienced the moment where you have a forest of brackets and you've lost the scope of where you are. You can't tell am I inside this parentheses or outside this. This can be a common occurrence if you're dealing with a lot of logic and a lot of math. How do you know the context of the brackets or parentheses to know that you're in this scope or that scope and it can get confusing.

And that's the problem that Bracket Pair Colorizer two hopes to solve. It allows matching brackets and parentheses with colors and other UI sugar to make it clear what context you're typing in.

I'll put a link in the description below, but you can download it by clicking on the extensions icon in Code, searching for bracket pair colorizer two and then pressing the install button. Now that it's installed, let's see it in action. Here's some JavaScript that doesn't do much, but it does have some brackets and parentheses that we can use to test. Notice that the color of the bracket pairs match, but are different from other bracket and parentheses pairs. Also, when you click within the context of a bracket pair, the brackets are highlighted.

If the contents are on one line, then the contents are underlined to match the color of the bracket pair. If the pair span multiple lines, then a vertical line shows up to show the context you're in. You can see where this highlighting makes it a lot easier to identify the scope you're typing in. Luckily for us, the creator knew that all of us developers like to customize everything and they made it really easy to do so with a lot of options to change to suit your needs.

You can use the command palette to access the settings for this extension, but not all settings are available in the UI. Settings like colors and styles have to be modified manually using the settings JSON. One thing I love about Versus Code is that when I'm working with the settings JSON file, it provides IntelliSense. So I know what kind of options I have to work with. And luckily this extensions author added in some boilerplate options for some of the settings.

So what are some features you might wanna customize? Well, let's start with color. The color setting can only be changed inside of the settings JSON file. It's an array. But it does allow you to provide things like color name, hex values and RGBA values that make it really flexible for choosing the colors you wanna use.

The extension pulls from this array of colors in sequence when it's determining what color comes next for an identified bracket pair, but you can change some of the rules associated in that determination. For instance, do you want a new color for each new bracket pair? The force unique opening color setting will prevent the extension from reusing the same color each time a new bracket pair is found. If you wanna force the extension to iterate through each of the colors without repeating, you'll want the force iteration color cycle setting. Set that to true and it'll go through the entire array.

Maybe you wanna segment through brackets and have a different color for every type of parentheses or bracket. You can do that by changing color mode to independent. There's several other customizations you can make like changing the CSS that's applied to actively highlighted brackets or the styles apply to vertical and horizontal lines for active brackets. But we're not gonna get into all those details. If you wanna see all the other customization options, go check out the extension on the Versus Code marketplace and learn about it more there.

If you're using a language that makes heavy use of parentheses and brackets, try this one out. And if you enjoyed the video, hit that like button down below. What extensions do you love and wanna hear more about? Let me know in the comments below and join us on Twitch. We live stream there several days a week where we learn, teach and just have a lot of fun.

If you wanna hear more about other extensions, be sure to subscribe and hit the bell so you're notified when we release new videos. Until next time.