Adding a formatter with Prettier

[00:00 - 00:08] In this lesson, we're going to add a formatter to our monoripple. Why do we need a formatting tool?

[00:09 - 00:24] The first reason is that we want to ensure a consistent style throughout the whole repository. We want to make sure that all files in all projects, which can be written by different teams, follow the exact same styling.

[00:25 - 00:40] We want to offload any code style decisions out to a tool and we don't want humans to have to make those decisions manually. Instead, the team should decide on those rules and then apply them automatically.

[00:41 - 00:50] This will work to remove friction from the team. As code reviews, we will no longer be bogged down by arguments about where do we place the semicolon.

[00:51 - 00:57] And finally, we chose prettier because it's an industry standard. There are other options.

[00:58 - 01:05] For example, biome is another great alternative. If it fits your needs, then it's worth considering it.

[01:06 - 01:15] So let's go back to the command line. We're in the root of the monoripple and we need to add a dependency to the root .

[01:16 - 01:32] We do this with the dash w switch and then dash uppercase d to say that this is a dev dependency. And finally, save exact because we want the exact version of prettier rather than a version range to be installed.

[01:33 - 01:48] We're adding both prettier and a plugin called three-vago, prettier plugin sort imports. If we check package JSON, we'll see that both dependencies were added with an exact version just as we want them to be.

[01:49 - 02:00] Now we're going to create a new file called prettier.config.mjs. The .mjs extension marks the file as an es-module file.

[02:01 - 02:12] This is something that we will explore in further detail later in the course. But suffice to say, this allows us to use import/export syntax.

[02:13 - 02:33] I'm going to paste a config that I prepared ahead of time and I want to call out the use of a type annotation using a comment that allows us to have auto-complete in our IDE for other settings of prettier. For example, tab width.

[02:34 - 02:41] The config specifies that we're going to be using that plugin we installed. Critier plugin sort imports.

[02:42 - 02:52] That plugin adds two new options to prettier, import order and import order separation. By default, prettier does not sort imports.

[02:53 - 03:22] So using this plugin, we're going to get sorted imports and even more usefully, they're going to be sorted in a particular way. The config I've chosen gives you a block of imports that are your dependencies, followed by a block of imports that are your monoripal imports, other packages in your own monoripal, and finally a block of imports that are other files in the same project.

[03:23 - 03:48] For example, it would look like this, it would have low dash as our third-party dependency, followed by a monoripal dependency and finally any local file from the current project that we import. Before we apply formatting with prettier, the first thing that we want to do is to check which files would be changed by prettier.

[03:49 - 04:00] To do this, we're going to run pmpm_priter-list_different. We can see that there are several files that are not desirable and that we don 't want to format with prettier.

[04:01 - 04:29] Everything in the .next_jectory in our front-end next.js project, anything in the dist_jectory in our front-end_vit project, and finally the pmpm_lock file. I'm going to open a file called .priter_ignor and I'm going to tell it to ignore any directory that matches .next, any directory that matches dist and specifically the pmpm_ lock file.

[04:30 - 04:46] Save that and when we run the changed list file, we now see something much more reasonable. I'm now happy to actually change the files and then we're going to look at the diff of what was changed.

[04:47 - 04:55] So most of the changes are trivial, like adding commas or changing quotations. The more interesting ones are the imports.

[04:56 - 05:05] Now all imports are sorted and as you can see, it separates local imports from dependency imports. Everything looks great.

[05:06 - 05:16] Let's just go and add a formatting script to our package JSON, run that and everything works as expected.