Pre-commit formatting with pretty-quick

[00:00 - 00:23] In this lesson, we're going to set up a pre-commit hook using Lefthook and a tool called pretty-quick to automatically format code every time you commit changes in git. This ensures consistent code formatting across your team without relying on individual developers having correctly set up their editors for auto-formatting.

[00:24 - 01:00] Let's dive in. We'll start by installing "pretty-quick" as a development dependency in our Monorepo. I'm going to run the command "pnpm add -w pretty-quick" to add it to our root workspace. pretty-quick is a two maintained by the developers of Prettier itself. It allows you to only run Prettier on changed files, rather than on the whole repository. Next I'm going to open the Lefthook configuration file: lefthook.yaml and I'm going to define configuration for the pre-commit hook.

[01:01 - 01:16] As it's evident by its name, pre-commit is executed before every commit. We're going to add a command to automatically format files on commit, and that's going to be "pnpm pretty-quick --staged".

[01:17 - 01:51] The "--staged" option means that it's only going to run on files that would actually be added to your commit, instead of running on the whole repository. I'm going to go back to the command line, and I'm going to add all changed files and then display them. We can see that we have lefthook.yaml changed package.json and pnpm-lock.yaml. Next I'm going to run "pnpm pretty-quick --staged", and what it's going to do, it's going to find that we have two changed files and verify their formatting.

[01:52 - 02:17] The reason why it's showing two instead of three changed files is that pretty-quick will correctly follow * .prettierignore and we have pmpm-lock.yaml ignored by Prettier. The last step I need to do to enable our hook is to run "pnpm lefthook install", which is going to set up the new pre-commit hook that we just added.

[02:18 - 02:28] We can then execute "pnpm lefthook run pre-commit". What this does is it's going to run the hook as if we were just committing.

[02:29 - 02:38] And as you can see, it's run incredibly fast. This is again, because we don't actually run Prettier on all files, but only on the changed files.

[02:39 - 02:50] Now I'm going to run an actual commit. And again, it's going to flash very briefly as I execute it and run pretty-quick and make sure that our formatting is correct.

[02:51 - 03:15] So let's test it out. I'll make a small intentional mistake in the formatting of package.json by adding a script with incorrect indentation. Let's say that I added a script called "format" that runs "prettier --write" on the whole repository. I'm intentionally going to add it with the wrong indentation, adding extra spaces in the beginning.

[03:16 - 03:24] I'm going to add all changes for commit. I'm going to run "git status" and we see that we just have package.json slated for commit.

[03:25 - 04:13] I'm going to display package.json, and we can see that line 13 has the wrong indentation. Then I'm going to run "git commit -m 'Add format script to package.json'". And if I print the file again we're going to see that line 13 now has the correct indentation. What happened was that before our last commit was actually committed, the pre-commit hook ran, Prettier formatted the file and only afterwards was the file committed. This approach is great for maintaining code quality, but it's very important to ensure that pre-commit hooks are as fast as possible to avoid slowing down the development workflow.

[04:14 - 04:24] That's why in the next lesson, we're going to look at how to measure the performance of command line tools and how we can speed up the execution of our formatting pre-commit hook.