Visual Studio Code Can Do That?

Tweaking Default Settings

Burke Holland

Burke Holland

Microsoft
Visual Studio Code Can Do That?

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

The "Tweaking Default Settings" 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 tweaks default settings in VS Code, including turning off the minimap, moving the sidebar panel to the right, and hiding activity bar items.

Preview
Close

Transcript from the "Tweaking Default Settings" Lesson

[00:00:00]
>> Burke Holland: Another thing that I wanna recommend that you do inside of VSCode, let's get this, let's see. Let's take this out. Let's get this out too, good to go. There is a thing over here called the minimap. And the minimap, what it is supposed to do is allow you to quickly move through your code if you have a really long file, and so you can just sort of move like this over here.

[00:00:30]
So here's what I want you to do with the minimap, disable it. So you're gonna go to Settings, and you're gonna search for minimap, and you're going to turn it off like this. The reason why you're gonna do that is because you don't use it, so turn it off.

[00:00:46]
Some people are like, no, but I do use the minimap and I say, no, you don't, turn the minimap off. I'm gonna give you some very strong opinions today on VSCode. I want you to be the most productive, so I recommend that you turn the minimap off. The reason for this is we're just maximizing the space that we have in the editor and we're removing, however, 75 pixels we now have back in our screen, which is nice.

[00:01:07]
By default, folks, the sidebar appears on the left-hand side of the screen, I would like to propose to you today that that's the wrong side of the screen for the sidebar to be on, tt should be on the other side. And you can move it by opening the command pallet and saying, toggle side bar position, and it will put it on the right.

[00:01:30]
Now, if you've been using VSCode with the sidebar on the left, this is immediately going to feel like something nobody should do. But I'm gonna show you why you should do this, okay? So let's move it back, toggle sidebar position. Now, I want you to watch the code as I toggle the sidebar.

[00:01:46]
Watch what happens. You see how it's jumping back and forth, and back and forth. Now, you don't sit here and do this, unless you're bored and trying to think of which tool song you're gonna listen to next. But you do this a lot, and every time you do, your eyes have to follow the code to the right and then follow it back to the left.

[00:02:07]
Now, I'm gonna move it to the other side. Now, watch the code, when I collapse the sidebar, you see? It's a little thing but you're helping your brain out just a little bit by keeping things still in the editor, and putting this thing on the right-hand side. This is because we are English speakers and we read left to right, we're reading left to right, then anything that's gonna change the width of the screen needs to be on the right-hand side so that our cognition is not affected.

[00:02:40]
That's moving the sidebar to the right. By default In VSCode, we have this thing appear at the top called Open Editors. I find that I don't use this, I recommend that you turn it off, we're turning a lot of things off today. So what you want to do here is look for open editors

[00:03:01]
>> Burke Holland: And then you're going to go down here and you'll see Open Editors Visible. And it says 9, and you're gonna change that to 0, and then watch up here on the right-hand side, it's gone. All right, so it's completely gone. Now, you have all of this space in the sidebar, just for your files and your projects which is what you want.

[00:03:23]
All right, by default, our Settings is a UI.
>> Burke Holland: And what I mean by that is, we have this UI that sits on top of a Settings file. We're not actually looking at the Settings, we're looking at the UI. We can change that if we go to, if we look at settings json, we should be able to change the Settings editor.

[00:03:50]
So here it says, Determines which settings editor to use by default, change this to json. And then, if we close this, and then if reopen it with Command or Control comma, now we're looking at the json instead. Now, here's why I think you should do this. It's because you can see all your settings at the same time.

[00:04:10]
You're smart, folks, you can do this. If you need to add a setting just open quotes, and you'll get IntelliSense here, and as you start to search, you'll get all of the different items that align with the service that you're using. So I highly recommend doing that. Now, here's the thing, if you would also like to have the UI, you can have both, you can do both.

[00:04:32]
So what we can do here is we can map a keyboard shortcut that opens the settings UI, and the settings JSON. So what I do is, if we open the command palette, we can go to Open Keyboard Shortcuts, and then we can search for settings. And I'm gonna have to decrease my font size to see, open settings,

[00:04:56]
>> Burke Holland: Let me collapse this a bit. So it says Preferences, Open Settings, and see that little UI after it? So what I've done is I've mapped mine. So what you would do is you'd click on this or double-click, and you'd say, what I do is just because settings is controller command, comma, I do Command or Control option, comma, and then I can use that instead.

[00:05:18]
So now, If I close this, if I wanna go to Settings, its Command comma. If I wanna go to the settings UI, its Command Option, comma, and that gets me into the settings UI. The thing that's nice about the settings UI is that it actually uses Azure's artificial intelligence on the backend, to try to help you with search.

[00:05:38]
So you can use natural language like I want to change the theme. Let's s ee if this works. There we go, so look, and it says Workbench Color Customizations, maybe that's what you want. So you do want the UI from time to time, and especially as the AI gets better, because the more that people use it and search in the UI, the better it's gonna get.

[00:06:04]
So just know that there is an AI that's working behind the scenes that you can use in VSCode. And everybody can thank Azure for that one, or is it Bing? It's one of the two, all right? [LAUGH] That's the default settings view. How are we doing on time?

[00:06:19]
We're doing all right. Let's, yes?
>> Speaker 2: For the AI to work, do you have to be on the web or?
>> Burke Holland: Yes, you do have to be connected to the Internet, yeah, the AI is in the cloud, it's Skynet, it has to be able to go up and, yeah.

[00:06:34]
>> Burke Holland: You see this up here at the top? These are called breadcrumbs, and they allow you to navigate by clicking on them. Kinda cool, I don't use them, so I recommend that you turn them off. So we're gonna go breadcrumbs.enabled, false, boom, they're gone. It gives you more space back in your editor.

[00:06:52]
Let's see here,
>> Burke Holland: Another one that you can do is, down here in the status bar, this was just added in a newer updated VSCode. You can right-click items and hide them, so if you're like I don't need to see for instance, like Live Share, let's just hide this, we can just hide it, and it's gone.

[00:07:13]
So you can reclaim space in your status bar now in VSCode which was nice. Before, you didn't have control over that stuff, now you do. The activity bar over here can also be hidden if you wanna have a little extra space. If you do toggle activity bar visibility.

[00:07:31]
Now, it's gone, okay? I'm gonna put it back. You can bind a keyboard shortcut to this. So we go and search for toggle activity bar.
>> Burke Holland: And you can see, I've mapped mine to Control Command B. Now, the reason that I've done that is that Command B collapses the sidebar, and if I add Control Command B, now I can collapse the activity bar too.

[00:07:59]
So I'm just making more space for myself in my editor. By the way, we'll talk about this in a minute, but you can navigate to these things in the activity bar with keyboard shortcuts, right? So you don't have to click on them to move around between them. And once you learn those keyboard shortcuts, you can get rid of the activity bar and it's more space for your code.

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