Automatic Code Formatting with Prettier
One of the greatest coding inventions known to man is Prettier. When I was first learning JavaScript, I even bought a book on formatting JavaScript because I thought it would be important to understand things like whether to use tabs or spaces, and how to properly format a function.
You don't have
Transcript
00:00 One of the greatest coding inventions known to man is Prettier. I once bought a formatting JavaScript book when I was just first learning JavaScript because I thought it would be important for me to understand, you know, whether I should use tabs or spaces, you know, how I should properly format a function. Now I don't need to worry about that at all because Prettier just handles it for
00:19 me. If we look at some code, let's say just this code here, and I add some sort of random spaces inside here, add some more spaces. When I save my file, as you probably will have noticed so far, it just jumps back into the position it's supposed to be. I can just command Z if I want to. I can
00:35 also just do a command, uh, command S. Whoops, that's not right. Command K and then S in order to save it in this state. But why would you? Prettier can just handle that all for me. So the way this is set up is I have a package.json in this file and Prettier is installed there. I
00:53 also have a Prettier VS Code extension installed too. And then I have one more thing which I've got set up, which is inside. I'm going to go command shift P and I'm going to go to my user settings
01:07 and I have a setting called format on save. What format on save does is it formats the file you're doing on save. So a formatter must be available. The file must not be saved after delay. The editor must not be shutting down. So what it means is that every time I save this file, before it commits
01:25 the save to the file system, it actually just runs Prettier on this file and this file only that's open. It's very, very fast. It means that your code is always looking beautiful and looking very, very clear. And I have no, no way of knowing how I can possibly code without it. It's just the
01:45 absolute best thing I can possibly recommend for your IDE. It's not necessarily about TypeScript even. This will work in lots of different languages. Prettier supports just plain JavaScript too, supports lots of other languages, but it's really fundamental to getting a good handle on how to work with TypeScript. And it's something that I don't even think about now. I just press save,
02:05 format's forming, it's beautiful.
