Video details

Angular Prettier | Michi DeWitt


Michi DeWitt

What is Prettier and how can it help you and your team? Angular community member and ngChampion Michi DeWitt explains it all in this Lightning Talk from EnterpriseNG 2020.


Hi, my name is Michi DeWitt, I am a senior software developer in San Diego. I also do some community tech organizing here and I am one of the energy champions. So I blog with the energy company. But you're not here to talk about me? Talk about Career Day. I'm going to go over three things. First is why you should use a style guide on your team. Second is why you should use an order for formatter. And third is why prettier is a tool that you can use for all of that. And we do it all in five minutes. So let's dive in first. What's the style guide? A style that is just a set of rules and coding standards that you follow in your codebase. You use it so that all of your files are formatted the same. So every touch your files can be formatted exactly the same as all of the files in your project. Same with their HTML. This is really important for teams to have especially larger enterprise teams because having files that are formatted consistently reduces the mental overhead for developers. So it's easier for them to read your files, easier for them to add more features. So it's a really good tool to use. So the first thing you have to do is agree on a cell guide. And this can be probably the most difficult part because the style guide at the end of the day is just a set of opinions that your entire team has agreed are correct. And we all know that developers are very opinionated, especially when it comes to style guides. I don't know why we're like this, but we are. But let's pretend you've you've chosen you've agreed on the style guide. Now you need to implement it. So if you already have a code base, you're going to have to go through every single one of your files, update the formatting so it matches your new formatting for your style guide to remember your rules as you're writing you code. When you onboard new people, you have to teach them that the slide rules so that there's some extra friction in onboarding. And a lot of times Salgueiro enforced through code reviews. So you'll have to do a lot of comments and there will be like, oh, move this bracket to the same line or indent this with four spaces. Whatever your style goals are, this can be a little off-putting and it's a lot of work. So there's a better way of using auto formatter and other formatter is just a tool that allows you to auto format your code based on all of your style guide rules so you can figure it with every single rule your team has agreed on and then your code will just automatically be formatted in. Based on whatever the Selgin rules are, it's best to have your formatter run at the same periods. So I personally like to have my code format on Save Me that I don't have to think about my code. I can write slightly sloppy code I save and then everything's pretty nice. I've also configured it so our auto form either runs whenever I get precommitment. This means that any code that makes it into a repo is going to be formatted according to our style guide. This is great because now our code reviews, we don't have to focus on formatting. We can just focus on logic and focus on the new features, which is what the third reviews are really for at the end of the day. And now your team doesn't have to think about code conventions when you're on board new people. They don't have to know what the rules are because you just have a formatter that does it all for you. But you still need to decide in the style guide. And as you mentioned before, developers have strong opinions and they'll have differences of opinions. I feel like most the time is going to happen if your team is going to agree on like 80 to 90 percent of the rules with me, a couple of rules that the team just can't agree on that the vehicle people to have really strong opinions on how it should be. And then you get stuck or you get a lot of meetings or you'll agree. And then a couple months later, you come back and you hash it out again. So there's a better way to use prettier. So what is prettier? It's an incredibly opinionated code format. For better you, you and your team will get to configure a couple of of conventions, like really a small handful. But for the most part, Pretty is going to choose everything for you. So it's really that style guide and the auto format are all the one tool together and it's really easy to use and it integrates with most your editors. So I use the as code. There's a prettier extension. So I just sent my former NBA star to be prettier in formats, all my code for me, there's a nice tool that you can run, so we'll format all of your files. So if you have a big code base, you don't have to go through and format. Each individual one you just run prettier is going to format everything. You check it in and now you're good to go. Now there's no more fights. There's no more arguments about what's the best convention is to use because you just trust, trust prettier to make those decisions. And then and then you move forward. So let's summarize. Everyone should use a style guide. It's going to keep your code formatted and clean and consistent. You should use it. You could always use an auto formatter to force your style guide. Otherwise your target probably just isn't going to be used. And at the end of day, you should really just use prettier because it's a really easy tool to use. You're not going to have to argue about style, and it's just it's just nice and easy. That's all I have. Thank you so much. You can follow me on Twitter at Meechie. I also on a blog post on Medium and also in the blog.