Basic editing - Visual Studio Tutorial

- [Instructor] Visual Studio Code is a powerful text editing application, and it can be used to edit all kinds of text-based files. Of course where it really shines is in editing code, and it provides a rich set of features to make code editing very productive. In this video, I'll introduce some of the basic editing features that you'll find yourself using all the time. So, let's open the Exercise Files folder, and click on the index.html file, and I'll close the Welcome page. Now the usual editing commands such as Cut, Copy, and Paste work as you'd expect them to. However, since programs are usually built out of individual lines of code, these commands take lines into account as well. For example I commonly find myself copying or pasting lines of code, and rather than having to first select the line to do so, VS Code operates on the entire line if there's no selection. So if I just click on this line and type Command + X or Control + X on other platforms, you can see the entire line is cut. So I'll undo that and put it back. I can also copy the entire line using Command + C or Control + C when there's no selection, and then just paste as many times as I want. It's just a nice efficient way of working on individual lines of code. So let me undo those. One of the most common ways of making code easier to read is to use indentation, and I can indent one or more lines by selecting them, and the selection doesn't have to be exact lines either. Then by typing Command + Right Angle Bracket to indent to the right, or Command + Left Angle Bracket to outdent to the left. On Windows and Linux that would be the Control instead of the Command key. You can also apply automatic formatting to your code. If I right-click when there's no selection, you'll see the Format Document command, or I can type Option + Shift + F, or Alt + Shift + F on other platforms. So I'll show that, and you can see that the document is formatted. All right so I'll undo that and I'll make a selection now. I'll just select this header, and you can see now that if I right-click, there's a command for Format Selection, or I can type Command + K, Command + F, or Control + K, Control + F, so I'll do that, and you can see that just the selection is formatted. All right so I'll undo that. Now to select the content of an entire line, you can just type Command or Control + I and you can see that if I keep on typing Command + I, that more lines are selected, the selection expands. To move the lines up and down, you can type the Option + Up or Option + Down Arrows, and you can see that this works with multiple lines, and it's great for manipulating things like lists. VS Code's smart editing features aren't just for HTML however. Let's open up the scripts.js file in the scripts folder, and what I'm going to do is just add a function, so I'll type function f, and you can see that when I type the open parentheses, a closed one is automatically added for me to keep it balanced, and the same thing happens when I type the opening brace for a function. The closing brace is automatically added. The same things happens when I add angle brackets for declaring an array, so for example, I can say var a equals, and then open bracket, and you can see the closed bracket is automatically added. Now this kind of automatic balancing really helps avoid a lot of common coding errors, and you can also see that when I place the cursor next to a brace or a parentheses, or the bracket, that the matching one is also selected, and I can jump to the matching one by typing Command or Control + Shift + Backslash. You can see I can jump between them right there. So those are just some of the basic editing features available within VS Code. There are plenty more to discover and I highly recommend getting familiar with them.