Code Formatting with Prettier

[00:00:00]
>> Mike North: In this next section of the course, we're going to work on getting linting and code formatting working throughout our repo. It's something that we had in the beginning state of our project and we have since lost it, in part because the prettier and the linting stuff is only happening within the context of our UI package at this point.

[00:00:19]
Right, we kind of left, left the left those concerns there. So we also want to take on some other developer experience niceties. So one of these is if we look at one place where we're missing a developer experience nicety is if we pull up a component that depends on something from like seed models and we command click on this, we'll end up in a declaration file.

[00:00:54]
We're in the dist folder right now of our dependency. And if we really want to deliver on the promise of the way you navigate code, the way your tools work, the way your scripts work, it's the same. It's the same. At the end of the day, once we've converted this to a monorepo, we had better be able to jump to these source files and be able to seamlessly step through and navigate.

[00:01:20]
In particular, this is likely to be a potential hazard because this, especially with the building out to modern modules, it looks a lot like a TypeScript file, like a TS file. And it'd be very easy to kind of make the mistake that you think you're editing the source, but you're editing the build output.

[00:01:43]
And you drive yourself crazy wondering, why does my change keep getting overwritten? Why hasn't it taken effect? So we're gonna address that too. Then finally, because we're going to be working with some config files in this area, we're going to apply this concept of TypeScript project references, which will have each package generating a build information file.

[00:02:09]
That will improve the performance of our build, that'll improve the performance of our language server. Because TypeScript will have a much richer source of information in terms of what has been changed since the last build, what needs to be incrementally recompiled. It won't be on a package by package basis, it'll more be on a module by module basis.

[00:02:32]
We'll take a look at the inside of these files and it should make sense why this works so well. So first off, let's focus on prettier. If we were to run this command at the project root, we should get this error prettier. Plugins Felt is not found and a reference to a file here, which is a generated thing, so that doesn't help us too much in the air.

[00:03:05]
But if we look at our prettierrc, we can see, hey, we've got this prettier-plugin-svelte. So this is a cue that we have. Like we haven't yet pulled something that's kind of like a project wide tool up to the top of our monorepo. So when you think about linting, when you think about code formatting, things like that, you generally want those to be applied across your whole repo.

[00:03:36]
Now, it would have been fine if we left prettierrc inside ui and that's the only place we wanted code formatting to happen. That would have worked perfectly well too. We would have only been able to run this task when we're within that package. But we want the benefits of a modern repo and having the same code style applied broadly throughout all of the packages that we're authoring together.

[00:03:57]
So we're gonna go into our ui package JSON. Here it is. And there is a prettier-plugin-svelte. In fact, we can grab prettier and take it out of here as well. It's going to be running prettier will be running at the project root. It's not a dev dependency of any one project anymore.

[00:04:21]
Once we do this and we can add those here. There we go. If I was using some opinionated formatting here, maybe we'd end up making these more alphabetical. Okay, now let's try this again. Sorry. We touched a package JSON, therefore pnpm i and there we go. We can see if you're looking closely, it's probably more clear to me on my screen than it is if you're watching at home.

[00:05:02]
Some of these files you can see unchanged is missing. Next to some of them, formatting was applied. So now we're formatting in the models package, in the server package in the ui. We have sort of hoisted this tool up, so it's now working at the monorepo level. What we can do is create a nice NPM script for this.

[00:05:26]
So instead of saying the way we format across the monorepo is by invoking the format script on each Monorepo package, we're going to replace this with something that operates at the monorepo level and it's going to look like prettier write packages, any. Any package. Right. And then either the file source or tests and then any subfolder ts if you copy from the workspace notes.

[00:06:06]
So this would be a basic version of this. That'll get all of your source and tests. If you go to the workspace notes I've got a string here that you probably don't want to figure out yourself. That also will format the config files. So we'll grab that and we'll paste it here as well.

[00:06:23]
Getting the comma in the right place. PNPM format and it does basically the same thing. Looks like some of those new files that were picked up this time didn't end up getting affected. So here you can see this vitend file was in the last invocation that was picked up, but now we've got things that are not in the source folder, like these down here.

[00:06:51]
So great. Prettier formatting is working across our monorep.