Keep Track of VS Code Windows with Peacock

And there's a great command, a short son of a gun. Hello world, my name is Michael Jolley and I'm the Bald Bearded Builder. Let's talk about Versus Code extensions. So let me ask, do you ever have more than one instance of Versus Code open at a time? Maybe you're working on an API and a front end at the same time.

And a lot of times when I'm doing that, I have issues where I'll have three or four open at a time and I'll click and I'll say, let me open up the front end. I'll click an instance and I'm like, oh no, that's the API. Click on another. I ended up like hopping between three or four editors trying to find the one that I need. That's what today's extension aims to solve for us.

It's called Peacock. It's made by John Papa. It's on the Versus Code marketplace, but let's talk about what it does.

It allows you to customize your Versus Code each workspace to have different colors. So you can easily denote which one is which. To do it, you have to use workspaces. You can't just open a folder and have that folder be a different color. But if you're using Versus Code, I really recommend using work spaces anyway because it allows you to save settings of the IDE with your code.

But once you have that workspace in place, we can use Peacock and say, change the color. If I'm opening my API, make the color of everything, the title bar and the sidebars be pink. And then if I'm using my front end, make it be red. There's a lot of colors built into it. We'll get into that, but it allows you to like really like just differentiate between your editor windows and know where you're at.

Before we get into how to use it, let me remind you that if you enjoy hanging out with other developers, learning new technologies, just having a good time with other friends, we're on Twitch three days a week, Tuesday through Thursday at two Eastern seven UTC. You can find us at twitch. Tvboldbeardedbuilder. We'd love to see you there.

So I've already got this node project open and I just opened the folder. There's no workspace.

So to create a workspace, I just hit file, save workspace as, and that'll create a workspace file in the root of my project. But now that I've got that, I can use the command palette to choose a different color for this project. It'll get saved in that workspace file. So whenever I open up this folder and this workspace again, I'll get that color in the title bar and the status bar, things like that to differentiate this folder. And you'll see here, if we open up a different project and I create a workspace and then specify a different color, you can see the two colors are completely different.

I can easily recognize which one is my API, which one is my front end. So Peacock comes with several built in colors and I love that they named them like after popular technologies. So you can get like angular red and view green and Azure blue. It's just kind of a neat little tidbit but you can actually save your own colors in there as well. You can modify your list of favorite colors by going to the command palette and search for Peacock favorite.

You can't do it through the UI. You'll have to click on that little link to go to the settings. Json, but you'll see there's just an array there where you can add additional colors that you can use in the future or on this workspace. One of the nice things is that you don't have to have all of these colors pre saved. So if you wanna use a custom color in your environment, just go to the command palette and search for a peacock inner color.

And you can put in like hex values. I think some CSS values, maybe even RGB. There's a lot of customization there and you can just specify it on the fly. You can even customize colors once you've got them set. So if you were to choose, let's say angular red and it's in your environment, but you want a little darker or a little lighter, you can do that from the command palette.

Just look for Peacock and you'll see light in color or dark in color. And each time you do it, it just progressively increases either direction you go. They also actually just create command shortcuts for this. So if you use Alt plus Command or Control plus Minus, that'll darken and Alt plus Command or Control plus Equals, I believe will light en it for you. So you can just do it right there and get it just like you want it.

And the great thing is it's saving that each time to your workspace. So you don't have to do this every time you open up that particular project. Sometimes you just wanna go crazy and pick a random color. You just need something right now. You don't wanna care what it is.

Use a great shortcut, it's command or control shift K, that'll choose a completely random color and you can keep hitting it over and over till you dial it in just like you want. Some of the great customizations of this is allowing you to choose what things are customized. Like, do you want the borders or the activity bar, the title bar, the status bar, all those sorts of things are settings. You can find them in the command palette. Just do, you know, command P to get the command palette and then search for Peacock.

It'll give you all the options there. So you can say only change the title bar to this color or whatever that just enough to make it differentiate from other projects you have open. One of the things I love most about this extension is its integration with other extensions.

We've talked in previous videos about the Live Share extension. And if you haven't watched that, I'll put a little link up there so you can go check it out. But basically it allows you to share your code and your environment with someone else. Well, Peacock, you can actually customize and say, listen, if I'm in a live share session as a host or a guest, change the color of my IDE to let me know. So maybe you wanna have like everything changed to red if you're like hosting a live share, maybe change everything to green if you're a guest.

That way you just always know is the code I'm looking at in my environment or is it, somebody else's or am I actually sharing this to somebody else? It's a good trigger to know like, is it just you here or somebody else without having to remember, oh, did I click live share? Did I leave that live share? It's just really handy for that. Another great integration is with the remote containers extension.

I love this extension. We previewed it earlier and you can check it out as well.

But the great thing about that is when you're developing a container, you can set up Peacock to know when you're using that extension. So if I'm just developing in this project locally on my machine, it can be whatever I specify the color or just the default theme that I've chosen. But if I'm in a container or WSL or SSH into some other code base, then I know that it's there because I can change the colors. So you could have it go, hey, if I'm developing inside of container, go purple. Whereas if I'm just on my local machine, just use my default theme or whatever color I chose for local.

It makes it really handy to know that context that you're in to make sure, Oh, I am in that container, right? I'm not running this locally. It's very handy for that. Like all the extensions we've been featuring Peacock is open source. It's on GitHub.

We'll leave a link in the description below if you wanna get involved. But if you have an extension that you wanted to integrate with and then, know, hey, I'm using this. And when I'm in that, I wanna know that it's there. So let me change the color. Well, send the PR into Peacock.

I'm sure they'll merge it. They appreciate all that kind of stuff. How do you deal with context switching in Versus Code? Do you have the same issues I do?

Give Peacock a try and let me know if it helps. And let me know what you're doing outside of Peacock to make that better for yourself.

If you liked this video, be sure to hit this like button below and leave a comment to let me know you were sticking around. I love reading those. It's great. And if you enjoyed this kind of video, be sure to subscribe, hit the bell to know when we release new videos. Until next time.