2.6 Symbols

In this lesson I'm gonna show you how to quickly browse to symbols, and by symbols I mean things like method names. So let's open a class I'm gonna hit command p, which we went over in the last lesson. And let's open up the file class that comes with this framework. So I will type file, now that's open. And if I hit cmd+R, once again we get another one of these pallets, but now this one is for browsing the symbols in our project. Now if you're thinking another keyboard shortcut I have to remember. Well, you can also use cmd+P, which is to go to anything, but if you begin with an at sign, that's now going to switch over to the method names. So you have those two choices, cmd+P, at, and then the name of your method. Main directory, notice it instantly switches there. Or Cmd+R and the only difference is it automatically applies that at symbol for you. So Cmd+R. Now I have a list of all of my methods, and this is dynamic. So if I were to delete this all, class HTML, something like that, public function, maybe static function link. Now, if I hit Cmd+R, we have that option, so we can duplicate this a couple of times, maybe for an image class, we'll do image, and items. So now, Cmd+R, and we have all of those items. So once again, fuzzy searching is available here. So if I'm at the top and this is a big file, and I think, hey, I need to edit that item's method, Cmd+R, items and I'm instantly there. And I continue on. Now a common misconception is that you can only use that for things like classes but that's not the case. We can also use it in our stylesheets. So, how would I go about editing a stylesheet? Well, once again, I can bring back the sidebar with Cmd+K+B, and I can go into my Public directory, right here, open up css, and I don't have one in this case, so let's create one. Style.css, and I'm just going to paste in some sample code here, this is from, normalized.css, which I highly recommend. Now, a better way to access that file is again, keep the sidebar closed, Cmd+P to bring up Goto Anything, and if you can't think of what the name of the stylesheet is, well, just search for the extension, and now that's going to bring up all files that have .css in them. And then I can see, oh yeah, style.css is the one. I hit Enter, and I'm immediately there. So now, we can view the symbols for the style sheet with Cmd+R, and now you'll notice that it's organized quite well. So let's say, I want to edit my buttons. Well, Cmd+R, we're going to edit buttons, and there we are, now we're instantly there. Or, maybe I need to edit the field set. Cmd+R, field set. We're there, and isn't that crazy fast? Now, I'm gonna show you something even faster that a lot of people don't know. Let's say that you know, you want to edit the field set, but you're not on style.css. Well, how would you do it? Well, so far in our learning, you would know, okay, go to Cmd+P, style.css, Cmd+R, fieldset, and you're there. But there is a faster way. You can merge those. So I can type Cmd+P, style.css and then I can immediately add the @ symbol, which now will show all of the symbols associated with that file. So you get where I am going here. When I want to edit the field set in style.css, I hit Cmd+P, type a couple letters of style. And keep in mind that even though we have matched six or seven files. If I hit the @ symbol that is going to then be applied to the topmost match. In this case style.css. So once again, style and then I'm gonna hit field set and I'm doing all of that on a single line and I'm instantly to the method that I need. So isn't that crazy cool. But let's say, you're editing you're html, and you realize oh, I need to add a background color to the body. Well cmd+P style body, and then I'm instantly there, and here you can add your background color. Once again fuzzy searching always remember fuzzy searching. So if I type bgc, well that's gonna match background color, but I could do anything that will make you remember it. And that does it, so I will right click close others, and I will see you in the next video.