Become a VS Code Power User

Navigating the Interface

Steve Kinney
Temporal
Become a VS Code Power User

Lesson Description

The "Navigating the Interface" Lesson is part of the full, Become a VS Code Power User course featured in this preview video. Here's what you'd learn in this lesson:

Steve discusses the different features and panels including the ability to open multiple files, navigate between tabs, and split the editor into two panes.

Preview
Close

Transcript from the "Navigating the Interface" Lesson

[00:00:00]
>> Steve Kinney: Let's talk a little bit about the rest of the editor, so we've got this explorer and other activities over here. We have some other fun options, there is a panel down here with more different things. Most notably, for our purposes, 90% of the time, is this integrated terminal, which, for the most part, should be very much like the terminal that you open Visual Studio Code from.

[00:00:24]
But now you can be all in one place, right? Because a lot of our day to day lives are try thing, maybe you have tests, hopefully, you have tests. You don't have tests, try things, go to browser, see if works, go back, so on and so forth, right?

[00:00:42]
And so the more that we can kinda do without the context switching, the more micro decisions we can make every day, right? A lot of times it is like it's going to take me 100 attempts to get this right if I can cut down the time of each attempt by 10, 20, 50%, guess what?

[00:00:58]
I can make more decisions every day, and all of a sudden I look like a 10x developer. The real way to be a 10x developer is multiple cursors, which we'll talk about later, but if you have 10 cursors, you're clearly a 10x developer. It scales, great, so we've got this panel here, as you can see, you can open and close that with this little icon up here, same with this one.

[00:01:22]
Then we have another bonus paddle over here that you can assign different things in here as well, hit this little plus. In this case, it's two of the extensions, I'm gonna tell you how often I open this panel. Never, I never open it, I didn't even know it was in this panel until I was preparing for this.

[00:01:44]
So we've got that, we've got this main editor here as well, there's some little information, that's my doc. There is some information down here about what language we are in, some other fun things, what line, what my spacing is, so on and so forth, as well. And like most things, we can open up more than one file, so we can go hit, we can click here now, we've got two tabs, awesome, right?

[00:02:12]
And we can hit, in this case, Cmd+Shift and then a square bracket, go back and forth between the two of them. We can also, if we need a little more room, cuz we're on a 13 or 14 inch MacBook, you can hit Cmd+B or Ctrl+B, I think. I'm gonna be honest with you, I have not used a Windows computer in 25 years, so some of those are from memory.

[00:02:35]
But you know what happens if you if I get one wrong, Cmd+Shift+P, and you can see what it is. Especially cuz over time you will write your own key bindings and go on your own path, and there'll be none of the default ones as we go along as well.

[00:02:52]
So we can hide and show that as well, we can also split in two, so we hit Cmd + \. We're all gonna find out who has 1Password installed at the same time, cuz that might be taken by 1Password, at which point you just turn it off or change it either in 1Password here.

[00:03:10]
You can split between two editors, so you can see things side by side. So yeah, these are some empty files at this point that we can just play around in for various different exercises, but if I wanted to get from this left pane to this right pane, how would I do it?

[00:03:30]
It's a trick question, by the way.
>> Audience: Use your mouse?
>> Steve Kinney: Okay, yes, that was not the trick question answer that I was looking for, but I'm into it, that's technically, you're not wrong. There's a few other ways to discover these keyboard shortcuts, right? Cuz like I said, I can say them to you, they are written down in some of the notes that I shared in the beginning.

[00:03:49]
You're not gonna memorize them at first, you're not gonna memorize them until you do them 1000 times, right? So the first thing we'll do is figure out what the discovery process is here, right? We know Cmd+Shift+P is one of them, right? So we can go like,
>> Steve Kinney: Close editors in the left group, that's interesting, right?

[00:04:11]
Move editor group left, move the editor left, so on and so forth, right? The other way to kind of discover some of the options is to find out what's just hanging out in the menu.

[00:04:22]
And so we've got Switch Editor, and we've got Switch Group, right? An editor is any given one of these tabs, a group is like any given one of these panes, right?

[00:04:33]
And so we can see that if I hit Cmd+2, I jump over to the second pane here, you can see my cursor is flashing at this point. 1, I'm back over here, 2, 1, 2, 1, you can go ahead, and you can see that you've got lots of different layouts.

[00:04:53]
You can go, some of these are more appropriate for the 27 inch studio display I have at home. But if we wanted to, we could go to a four by four grid, we can see that there's no actual files here. If you need to move an editor, you have a few choices, right?

[00:05:08]
You could learn the keyboard shortcut, but I'm gonna stop harassing you about that for a moment, you can also drag a tab over and move it, right? I'm gonna be honest with you, I do it a lot, [LAUGH] right? Again, my trackpad is not that far, so you can drag various files over as well.

[00:05:30]
And now you can do a 1, 2, 3, 4 and jump around just like that to open a fifth one, I don't need a fifth one. The other option, if we go in here and check it out as well. Is more likely you can kind of either go to the next to previous group, which does not have one, or you can do like a group to left, group to the right.

[00:05:56]
>> Steve Kinney: And this one will actually move it and stuff along those lines as well, like I said, some of it. This is obviously at this point a very complicated setup, but generally speaking, again, finding, you will not memorize them all in one hit. Find them kinda get into the flow when you see yourself trying to do something, those are the patterns you want to optimize.

[00:06:17]
Memorizing literally everything I yell at you is probably not the way forward. But to know where the options are and what you can do and the idea that sometimes half the battle is knowing that you can just jump back and forth between the different panes, right? And there's a few other options there is like going back and forward.

[00:06:35]
The other ones that are super useful is we've got Cmd+P, which looks like a command palette, but you'll notice something slightly different here. In this case, it is files, and you can search for any file in your code base. You start typing in like package JSON you'll see something along the lines of all the package JSON's in your project and the ability to pick which one.

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