Favorite extensions: Bracket Pair Colorizer - Visual Studio Code Tutorial

- [Instructor] You have to love the extensibility of VS Code. It's easy to write an extension that plugs into the editor. You can see those extensions here. There's a giant library of useful extensions that enhance the features of Visual Studio. I'll explore some of my favorite extensions throughout this course. In this video, I want to look at one for colorizing brackets, so I'll look up the word bracket. I see two that are interesting: Bracket Pair Colorizer and Bracket Pair Colorizer 2. These are both by the same author. The difference is that version number two is newer and faster, so I would recommend this is the one you use. Before I install this though, let's go take a look at what our code looks like without this extension installed. So switch over to the files. Go to this BraceColors.js file. And we'll talk about what's considered a bracket or a brace. Obviously, the curly brace is one. So here's a curly brace. So is an open and close parenthese, and also the square bracket, the open and close square bracket. Those are all considered bracket or braces, and these all get colorized. Now there's already some built in enhancement in VS Code. If I select this, or I should say if I put my cursor next to this curly brace, doesn't matter which side of the curly brace, you'll notice that there's a subtle gray background behind the curly brace. And the matching starting brace is here on line 10. You can see that same gray color. If I move my cursor next to this curly brace, you'll see the same thing happening over here, and so on. This also happens in things like these open and close parentheses. I'll turn on the colorizer and see how this changes the look and feel of this editor page. Go back over here. Pick the second item, choose to install. Once it's installed, we'll want to reload the VS Code, so it gets the changes for the editor. Once it's back up, we'll open up that BraceColors.js file, if it's not open already, and you can instantly see the differences. There are differences. There's some codes in here that didn't used to be here before, and then I can see these braces are yellow, these ones are blue, these ones are a purple color. And it's really useful for lines like line nine, where I can see at the beginning of this line, there's three braces right next to each other. And I can see the blue, yellow, and purple. I still get the highlighting, but having the extra color there just gives you one more clue, especially if you haven't moved your cursor up to that line. You're on line 11 and you glance up at line nine, and you can quickly see that this parenthese belongs to the one in here, the second, the middle one, I should say, the second one in from the left. When I first heard about colorized brackets, I didn't think I was going to like it, but I find that it enhances the way that I write code, and helps my understanding of what's going on in my code editor.