Navigating VS Code, Refactoring & More Shortcuts

[00:00:00]
>> Burke Holland: All right, let's open up the command palette and look at something else when it comes to finding things. I had you turn off the breadcrumbs. Mark made me turn them back on, but I had you turn them off. And I'm gonna turn them off as soon as this workshop is over.

[00:00:12]
Mark, I just want you to know that and that's because I don't think you need them. I think that you can find stuff in other ways. So we looked at the find and replace. The other thing that you can do is use something called the symbol browser. If we open up the command palette, you see this little caret that's up in the left hand side here?

[00:00:35]
If you take this out, you get the file switcher. And this allows you to move between files, right? So these are all the other files that I've got that I can jump to. So maybe we wanted to go to the start file. Now here's something that you're gonna do a lot.

[00:00:51]
You're gonna jump between the index file and the app.js file a lot. In VS code, you can move to the most recent file you are in. And you're gonna remember this keyboard shortcut, I promise you. It's command PP, all right? Command PP takes you to the last file that you were at.

[00:01:14]
We toggle between two files a lot. So you're gonna want to remember that one. If you keep pressing p, it just sort of moves down the list here. But command pp is probably the one that you're looking for. You can also use the arrow key. So we have this user interface element, the command palette and when we press Command Shift P, we get a carrot.

[00:01:35]
If we take it out, we get to the file switcher. If we just do Control or Command P, then we get directly to the file switcher, but it's the same UI element. And so you can add in other modifiers here to do other things with this particular UI element to browse your code.

[00:01:56]
So for instance, if we use an at sign, it will list out all of the different items that are in our HTML file. This is called the symbol browser. And if you go down here, you can see if it's got an ID, it will include that. So if you're trying to get to that circle bulb that I'm changing with JavaScript, we can jump directly there with the symbol browser.

[00:02:17]
The other thing is, you can use a colon after the symbol, the at symbol here and that will segment things off into groups. And so now we've got our classes. And here's our fields. We'll look at code in a minute. It works a little bit better with code here.

[00:02:37]
The other thing that you can do is you can use the pound sign to search for a certain set of symbols. So maybe we're searching for app and then we get directly to the app here. And you can see, we're searching across, so now we're actually searching across files for symbols.

[00:02:56]
So just sort of work with this. Work with the at sign, with the colon, with the pound sign, and you can really navigate through your code pretty easily using the command palette, which is a construct you're gonna be using a lot anyway. Let me go over to the app.js file here for a second and show you it works a little bit better in code than it does in HTML.

[00:03:15]
So let's open that again and now we can see, here's all our symbols. If I do the colon now we've got classes, functions, methods, and variables That we can jump around in here. And just a very simple way to navigate through our code. So if we knew that we wanted to go to the event listener for the go button in HTML, there it is right there, we can jump directly to it.

[00:03:40]
So between the file switcher here, right command PP, That's the one and the symbol browser at sign and the colon, you can move really fast throughout your project. One other keyboard shortcut that I wanna give you here or set of them is you will find yourself moving between the sidebar and the editor a lot.

[00:04:07]
You can use a keyboard shortcut to mitigate that. One of them is Cmd+0 and the other is Cmd+1. So here's what you do. Cmd+0 puts your focus in the sidebar, okay? And you can move down with the arrow key and select a file. Now, I should point out that if you're on a Mac and you hit enter, it will try and rename the file which is probably not what you were expecting, but that's how all browsers work in or file browsers work on Mac.

[00:04:38]
If you hit enter, you go to rename. It doesn't open the file. On Windows, enter just opens the file like you would expect. So if you're on a Mac and you actually want to open the file, you have to press command down and that will open the file.

[00:04:52]
So it's a little bit of a quirk there for Mac people, for Windows people, it's gonna work the way that you would think that it should probably work. And then, so you're in the sidebar, if you select, it's gonna put your cursor back into the editor anyway. But if you wanna go back to the editor, you press Cmd+1 and your cursor is back on the editor side, okay?

[00:05:15]
So Cmd+0 to get to the sidebar. Cmd+1 to get back to the editor. That, again, just stops you from having to move your mouse to select the contents of the sidebar.
>> Student: How do you get to the terminal?
>> Burke Holland: The terminal is control backtick,
>> Burke Holland: Which is above the Tab key.

[00:05:40]
Yeah, the tilde, there we go, yeah.