Prettier in JavaScript

[00:00:00]
>> Burke Holland: So this is what our application's gonna look like today. And then later on we're gonna have a little bulb that sits down here at the bottom that's gonna represent the LAMP. The LAMP is gonna change colors, your bulb is gonna change colors in real time. We're gonna use Azure SignalR to do that, which is a real time updating service.

[00:00:16]
And we've got an API that's running in Azure functions, which we'll actually look at a little bit later on. All right, a couple more productivity tricks, we talked about Prettier. I wanna open a code file here for a second and show you something else with Prettier. So I'm gonna move, I'm actually going to move into exercise-3, but you don't have to.

[00:00:36]
Let's go up one, let's go to exercise-3, I'm gonna bring that up
>> Burke Holland: And then I wanna look at a code file that's inside of this start file, so let's bring up the app.js file here. There we go, I'm gonna collapse the sidebar. Now, we talked about Prettier, Prettier also works in code files, and is most often used with formatting JavaScript.

[00:01:01]
So for instance, there are some people who think that this is okay.
>> Burke Holland: And my opinion on this is that, yes, semicolons in JavaScript are optional. Kind of like brushing your teeth is optional. So you can do it, but in my opinion, you should have semicolons. That's a joke, if you don't wanna use semicolons, you don't have to.

[00:01:24]
But if you do, then you want everybody else to also use semicolons. And so what Prettier will do is it will automatically format some of these things for you. Some people like to do this, right? I prefer single quotes as well. But again, you wanna standardize this across your application.

[00:01:43]
And a lot of times when you're copying and pasting code in from Stack Overflow,
>> Burke Holland: As one does, maybe it has single quotes and you need double quotes. So what we can do here is we're just gonna format the document with safe. And if you'll notice, all the semicolons came back and the quotes changed back to double quotes.

[00:02:01]
That's Prettier is doing that, it's formatting that for us behind the scenes, which is really nice. Another place that Prettier comes in handy is that when you have something like a promise. So let's just come down here and do a promise here. So let's assume instead we're doing the fetch.

[00:02:22]
In fact, let's grab this whole line. And I'm using async await but we're gonna do a fetch instead and use the promise API. So then we have a then, and that result goes in, and we're gonna take that to json. And then out of that we're gonna say then again, and now we have json and now we can do something with the json.

[00:02:43]
Let me go ahead and close this.
>> Burke Holland: I don't know what we're gonna do with it. Let's say we're gonna do something, okay. So now we've got a promise here. And I'm gonna turn off the formatting for a second here, I'm gonna toggle Format on Save. And a lot of times what we'll do is we'll come down and we'll say, okay, this goes here.

[00:03:04]
I'm gonna indent this and this goes here. No, you know what, I don't like that. I'm gonna pull this back up. Formatting promises is just kind of a pain, everybody does it differently. But if we change this, if we toggle the formatting, toggle Format on Save, then we can come back and let's see here.

[00:03:21]
I've got an error somewhere. Where's my error?
>> Burke Holland: Let's see, let's see, let's see.
>> Burke Holland: Maybe it's here, maybe it doesn't like this. Can I console.log it? Okay.
>> Burke Holland: There we go. And then Prettier will format this for us, just like this. So it's automatically formatting your promises.

[00:03:45]
Just less things for you to have to worry about and argue about with your co workers, which is nice. And you can also run Prettier on check in. I'm not exactly sure how to do that. But you can set your source control up so that Prettier's run automatically on all files that are coming in.