How To Use Code Formatting In Visual Studio Code

Great code formatting separates the ones that know what they’re doing cough bracket on the same line cough and those that don’t. Luckily, in this video, Josh shows us how by using the PowerShell extension in Visual Studio Code, we can not only fix all of those brackets on new lines but a whole lot more!

This snip is going to be a quick look at Visual Studio Code's built-in formatting tool. The document you can see on screen is actually the HTML source for the techsnips website. Of adjusted the HTML somewhat to look less legible than it normally would be. And to run the formatting tool against it, we can press control shift P to bring up the command palette and search for format document. There's also a keyboard shortcut theory of shift out if on windows and on. Other operating systems that would show you the. Key binding for that system. But if we run this. You can see very quickly adjusted the formatting of this document to look a lot more legible. You can see all of the CSS S. And if we scroll down further we can see the HTML. And it's a lot easier to read now. But running the formatting tool manually isn't the only way to use it. There's a number of user settings, you can configure to tweak. Win the tool runs. For example, this format on paste. Which if I turn that on and save my settings? Let's say you have found some code on Reddit. But whoever posted it didn't do a good job of formatting it. So. We want to tweak this little bit so we grab the code and go and Drop it into our visual studio code. As you can see it instantly as soon as we pasted it. Adjusted the formatting so that it's a lot more legible. If you do want to go back and look at what the code originally looked like you can press CTRL Z to undo that formatting. Press CTRL Y to redo the formatting. I'm going to undo it again to show off the next way of running the formatting tool. Which is format on save? So if I turn that on. Save my settings and come over here and save this file by pressing control is. And say it again. Visual Studio code his formatted that. Script for us. The next way of triggering the formatting is actually format on type. So it will continuously format. As you Finish typing a line of code. So if we jump back to our demo after saving my user settings and you'll notice it's now reformatted my user settings for me. When I saved it. For Jump over here and I start writing a hashtable. So I'll keep this nice and simple I do. One equals a I entered new line and you can see that it's put spaces. On either side of the equals sign. To line things up a little bit. And then do 2 equals B and before I head into here, you can see. I don't have a space next to the 2 but I do have a space next to the B when I press enter it's become uniform. So this will continue as I keep typing. Powershell or rather. Visual Studio code will. Keep formatting my document as I type. Which will help keep things legible as I go through? Now, if you working with. PowerShell, a lot. The powershell extension for Visual Studio Code has a lot of inbuilt. Code formatting options, which you can configure as you can see is go down there's once for. Adding a new line after a closing brace. Adding a new line after an open brace siddaram. This also. A code formatting preset. So I've configured the Stew. Otb is or the one true brace style. And to see this in action. Let's create an if statement. So nice and simple The actual content of this doesn't matter. But if we say if true. Overturned true. And else. Notice it just move that else statement up to the same line as my closing brace on the if statement. Just to show what would happen if I didn't have otb yes turned on. Go back and adjust that. And. Open false. And put else back on its own line. Now, when I run the formatting tool. El stays on its own line. And just to reaffirm that this is all. Coming out of the pre suit. Turn the preset back on. Come back here. Format the document and else is moved back up to its own line. That's been a very quick look at the formatting tool and visual studio code. Thank you for watching.