Check out a free preview of the full Visual Studio Code Can Do That? course

The "Course Extensions Overview" Lesson is part of the full, Visual Studio Code Can Do That? course featured in this preview video. Here's what you'd learn in this lesson:

Burke gives an overview of Peacock, an extension that allows the user to color code multiple VS code windows, and Bracket Pair Colorizer.

Preview
Close

Transcript from the "Course Extensions Overview" Lesson

[00:00:00]
>> Burke Holland: One last thing on visual stuff, and then I'm gonna let y'all work a little bit on customizing your own editor. There is an extension that is made by a fellow named John Papa called Peacock. It's a very interesting extension so I wanna talk about it, simple but interesting.

[00:00:19]
I've included it, if you open, if you go and search for peacock, you can see peacock, enter a color. So I'm gonna go ahead and do that. The only hex color I can ever remember is this one,
>> Burke Holland: Which is blue. Let's see, FF, I think Salmon is like FA 707A, something like that.

[00:00:45]
Yeah, there we go. Nice salmon colors. I can remember two colors. All right, so you can see what's happened here is that it's changed the title bar to that color. The reason why this is helpful if we go to VS code settings here, you'll see it's been added here, peacock color.

[00:01:04]
The reason why this is helpful is because you might have multiple instances of VS code open at the same time. So if we were to open another instance of VS code like this one here. So they're both themed now but you can set the title bar colors on individual instances, and so if you're working with maybe an API project and a front end project at the same time, you can set one to green and one to blue.

[00:01:28]
And then you can immediately by looking at the title bar know which project you're looking at. So it's a very helpful extension. It will also theme the activity bar and the status bar. It does a lot of other stuff. I just theme the top bar because that's enough for me to know.

[00:01:45]
>> Burke Holland: One final note here, I have included an extension called bracket pair colorizer. You'll see it. Actually let me turn off this. I don't want to a salmon title bar here. So let me take this off.
>> Burke Holland: Put this back, all right.
>> Burke Holland: See these brackets how they're yellow and you can barely see them.

[00:02:07]
It's because it's in a light theme. I've given you the bracket pair colorizer extension cuz some people really like it. It works well with dark themes. So I'm gonna switch to a dark theme. Let's see here, color theme and let's switch over to night owl. All right, so what the bracket-pair colorizer does is it changes the colors of matching brackets.

[00:02:31]
So now I can look at this line and see, well, this ends here, and it's easier for me to see that just by looking at the colors. But if you have a light theme, it's not so great as you just saw, so I don't use the bracket-pair colorizer, but if you're using a dark theme, you should take a look at that.

[00:02:47]
So I'm actually going to go ahead and disable the bracket period colorizer. So with that, what you should do, if you haven't been doing it along with me for the next few minutes, is go through and the exercise is here, install the themes and go ahead and get your editor customized.

[00:03:03]
You may decide that you don't wanna do all of the customizations that I did, but if you do, just remember, you're wrong, I'm right. You should have done the customizations. If you wanna keep your sidebar on the left, keep it on the left. A lot of people feel comfortable there.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now