Moving Code & Code Folding

[00:00:00]
>> Burke Holland: Well, we already talked about prettier inside of JavaScript files. We also need to talk about some very essential keyboard shortcuts. I'm gonna come back here to the GitBook. And I'm putting keyboard shortcuts in pretty much every single one of these exercises here. So for the first three, you're gonna get five, three to five keyboard shortcuts.

[00:00:25]
I think there's like 15 total that I give you throughout the whole amount of exercises. And those are the 15 that I feel like are most important. You don't need to know all 400 plus keyboard keyboard shortcuts in Visual Studio Code, that is too many. I know that Vim people insist that that the editor is better because they only have to use the keyboard.

[00:00:48]
And how do you know if somebody uses Vim?
>> Burke Holland: Don't worry, they'll tell you, right? So you don't have to be like that, but you do want to use your keyboard as much as you can. You're going to wanna reach for your mouse to do a lot of things in Visual Studio Code.

[00:01:05]
When you reach for your mouse, just ask yourself, could I do this with a keyboard shortcut? Do I remember Burke doing this with a keyboard shortcut? And then stop, go look up what that is, and then do it. It's gonna make you slower initially, it will, but your brain is really good at optimizing.

[00:01:22]
And it's gonna figure out, it's a lot easier for me to just use this keyboard shortcut, and then you'll be astonished at how quickly your brain catches onto that. Human beings are remarkable creatures, your brain is always looking for the easiest way to get something done. And if that's a keyboard shortcut, that's what you're gonna use.

[00:01:40]
>> Burke Holland: All right, so let's open up our index file here in our exercise three, and I have added a SVG element down here at the bottom. You don't have to worry about that just yet, but that's the only thing that I've added to our projects before, along with the requisite JavaScript to make this thing actually work.

[00:02:03]
One of the things that I use most often in VSCode is the ability to move lines. Now, when we're moving a line, like let's say we wanna move this title line up above the link line, normally, we highlight the line, cut it, and then paste it in. By the way, you can still do that.

[00:02:22]
By the way, if you didn't notice, you don't have to highlight a line to cut it in VSCode, you can just cut it with the cursor. You don't have to highlight it, that's just the default behavior. Same thing for copy, if you Ctrl+C on a line, it gets the whole line on the clipboard and you move on, so you don't need to highlight and then copy or paste.

[00:02:46]
There's also an easier way to move things around in VSCode, and that's to use the oOption key on the line. So if you're on the line, you can move lines around simply by holding down the Option key and pressing up or down, and you can move lines around.

[00:03:00]
If you grab a chunk of lines like this, then you can move them all around in one block with the Option up and down arrow. You will move that one a lot. You'll use that one a lot, you will move lines a lot. Another thing that you'll do is you'll duplicate lines, and a lot of times we copy and paste to do this.

[00:03:24]
You don't need to copy and paste in VSCode to duplicate. What you can do instead, is you can use Option+Shift and press down or up, and it would duplicate whichever line you're on exactly. So I can do down, or I can do up, you can't tell the difference, but it's duplicating them up and down.

[00:03:43]
Let's go ahead and pull this out. You will duplicate lines a lot, it's another thing you do a lot, that's another keyboard shortcut that you really, really need to know, it makes your life a lot easier. Another thing that you'll do is you'll delete lines. And again, a lot of times we need do that we grab a line, highlight it, delete it.

[00:04:05]
Instead of doing that, learn the keyboard shortcut, Cmd or Ctrl+Shift+K, that deletes lines. Again, you're saving yourselves keyboard strokes here by not having to highlight lines and then delete them or put them on your clipboard in some other fashion, Cmd+Shift+K is your friend. So that's moving, duplicating, and deleting, memorize those keyboard shortcuts.

[00:04:31]
The next time you try to do that with copy and paste or highlight and delete, stop yourself, go back and use the proper shortcut. Let's scroll down here to the bottom and take a look at this SVG element. Now, I made this SVG element myself. And the reason why you know that's the case is because it's really, really ugly, there's a lot of it.

[00:04:54]
When I said I made myself, what I did was I opened up Sketch, I made a light bulb, and I saved it as SVG. So I've pasted that in here, and the reason I've done that is it allows us to change the bulb color with the application. So if I go to the app here, it's currently broken, see this bulb?

[00:05:13]
This is the SVG by the way, and then it puts the color at the bottom. But because there's different elements here, whenever I change the color, I can actually change the color of just this SVG circle up at the top, because it has its own separate element inside the HTML.

[00:05:29]
The problem with that is that it makes this look really bad. So this file is now way longer than it needs to be and it's hard to look at. So to make this easier on your eyes, you can fold the code. So if you come here on this line and open the command palette with Cmd or Ctrl+Shift+P, and say fold, and then just select fold.

[00:05:54]
And that will fold all of that SVG so that you don't have to look at it anymore. Now notice, I'll save this, if we reload the window,
>> Burke Holland: Still folded, okay? So folding persists however, if you close the window completely, go out and then go to a different project and come back, it will be expanded again, you'll have to fold it again but it's pretty good about persisting through your session.

[00:06:25]
Folding works not just inside of HTML but it also works inside of code files as well. So let's fold this back again.
>> Burke Holland: So let's go over to our app file here. And let's say, we wanted to fold this constructor here. What we can do is come over to this side, you might see these arrows here, you can do it this way.

[00:06:50]
And you can also fold like this. The other thing is there's a keyboard shortcut, I don't use this a lot cuz I don't fold code too often. Usually, I fold it and then I forget about it, I don't unfold it. But it is Cmd, and then Option, and then the bracket here, the left parentheses if you will.

[00:07:10]
So we should be able to fold like that and we can fold, and you see that VSCode recognizes it knows, so it can fold at the method level, it knows how to do that. It can fold here at the constructor level and knows how to do that. So it recognizes the code structure and can fold at the proper levels.

[00:07:28]
>> Speaker 2: Does the code have to be formatted for it to recognize it?
>> Burke Holland: No, it does not have to be formatted for our eyes, it does have to be correct. So like if you got extra braces in all over VSCode, it will know what to do. You can also specify your own foldable regions.

[00:07:46]
So you don't have to fold based on the regions that VSCode specifies, you can specify a region that you wanna fold. So let's say, what we want to do here is we just want to fold and hide all of the interior or internal methods in this class. To do that, we have to use something called a regions.

[00:08:04]
If you have used Visual Studio before your familiar with regions, this is a concept that makes sense to you. What we're gonna do here is come and we're going to put a comment. So I'm gonna put a comment here and then I'm gonna do a hash tag, hash tag, pound sign?

[00:08:19]
Hashtag.
>> Speaker 3: Octothorpe.
>> Burke Holland: What is it?
>> Speaker 3: Octothorpe.
>> Burke Holland: Octothorpe, nobody knows what that is.
>> Speaker 3: [LAUGH]
>> Burke Holland: And we're gonna say, region. And then we're gonna give it a name. So we'll just call this one, let's just call this region, Class Methods. Let's come down to the bottom here, right before the end of the class, and we'll do end region.

[00:08:44]
>> Burke Holland: And if we come back up here, out to the side, you can see, we've got an arrow now. And I can collapse this, and now, I've got a region that I defined, and I folded all the code. Even better, I can add a description here to make this more descriptive for people and let them know why I folded this code.

[00:09:04]
Now, interestingly enough, this also works in HTML. So you can add a comment here,
>> Burke Holland: I think it works in HTML, verbose svg, written by Burke. And then let's come down, here below that the closing we should just fold this, be a lot easier, wouldn't it? Let's do that, let's see here Cmd+Option, there we go.

[00:09:35]
And then below that, let's add a line, and by the way, you can use the keyboard shortcut Cmd and then the slash, is this a forward slash or a back slash? What's the one that goes this way?
>> Speaker 4: Forward.
>> Burke Holland: Forward slash, Cmd+/, Ctrl+/, adds a comment line automatically.

[00:09:55]
It will also comment outlines like this, your cursor can be anywhere in the line, and it will come in and out. And then we can do endregion.
>> Burke Holland: Let's see here, hashtag, octothorpe, sounds made up, endregion. And then we can actually fold it by region here. So regions work inside of HTML and they also work in your JavaScript to allow you to create custom regions.

[00:10:22]
All right, that's code folding, and if you have somebody like me writing your SVG, you're definitely gonna wanna know about code folding and region folding.