FREELessons: 11Length: 32 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Beautify

The Beautify extension for Brackets does exactly what its name implies. It takes sloppy, unformatted markup and makes it look beautiful by adding spacing and indents that make it easier to read.

Related Links

2.3 Beautify

Hello and welcome back. In this lesson, I wanna talk about an extension that we can use to make our code look a little bit prettier. This isn't gonna help us in writing our code, it's just gonna make our code prettier and more readable. So let's open up our extensions and this plug in or extension is called Beautify, so I'm just gonna do a search for Beautify and here it is down here. It's Beautify by Drew Hamlet. We'll click on install. And initially you won't notice anything different because you actually have to run the command in order to get it to Beautify, but you can find that command in the edit window near the very bottom. You have two options, one called Beautify, one called Beautify on Save. So if we were to run Beautify and you'll notice there is a default keyboard shortcut for it, Ctrl + Alt + B or Command + Option + B if you're using a Mac, and when you click on that and you'll see that it just makes our HTML look a little bit better. It takes care of indents and things like that. So if you're too lazy to do those things while you're coding, then this can help clean up your code just a little bit for you. As you can see, not a whole lot changed, but it changed just enough to make it look a little bit nicer. If we hit Ctrl + Z to undo that, we can see that it basically added some spaces between our head and body. But if we also had, let's say, these list items and they were nudged over here to the left, maybe these were nudged over as well and they were nudged over too far. We can now run that Beautify command, Ctrl+Alt+B, and it will not only put the spacing between the head and the body, but it will also make sure that everything is properly indented. And as we mentioned before, you can also set up your options here again under the Edit menu, and turn on this Beautify on Save. So I'm gonna click on that and now when we look at that again, you'll see that there's a check mark next to it. And so now let's go in and make some changes again. Let's unindent some of this, move this over as well. And now if I hit Ctrl+S to save it, not only will it save the document, but right before it saves it, it's going to Beautify the document and fix all of the formatting. So, again, it's a very simple plug in and it does one thing really well. So, again, I highly recommend that plug in for you. It will save you some time or at least make your code look a little prettier. And those are the basics of using the Beautify plug in in Brackets. Thank you for watching.

Back to the top