stephen koch

software engineer

Add Prettier to your project!

I'm opinionated with my tooling and Prettier is one that I think should be included from the start. When there are multiple contributors to a codebase you will invariably have competing "preferred" styles. Do you like using semi-colons? Trailing commas? Spaces or tabs?

No matter how you prefer to write your code, the code that's pushed to the remote repository will adhere to the rules you've setup.

The objective is to have Prettier setup from the get-go so that anything that's staged will be checked and fixed according to your defined styles. This depends on pretty-quick as well as husky.

Strategies

One thing you could do would be to create a .prettierignore file and add specific directories (or even the entire project!) and incrementally add in directories and/or single files. By doing this, you don't need to deal with your git history getting messed up, certain parts of larger codebases can be completely ignored (but why?), and certain parts can be updated by their respective maintainers.

If you are adding to an existing project, and aren't concerned about your git history, you can follow along below with Fix existing codebase.

If you would like to fix your code as well as adjust your git history, read this.

Add Dependencies

// yarn
yarn add --dev prettier pretty-quick husky

// npm
npm install --dev prettier pretty-quick husky

Add Scripts

Add the following scripts to package.json

Add Prettier Configuration

Your .prettierrc file will look something like this:

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "arrowParens": "avoid",
  "trailingComma": "all",
  "bracketSpacing": true,
}

Feel free to change to suit to your needs and check out the [Prettier options documentation](https://prettier.io/docs/en/options.html).

Add Git hooks

Run the prepare script.

// yarn
yarn prepare

// npm
npm run prepare

Note that the prepare script will be run whenever someone installs dependencies for the first time after a `clone`. No need to run this manually... except for the initial setup.

Add the husky pre-commit file:

npx husky add .husky/pre-commit "yarn pre-commit"

Now the next time you commit something you will see output that tells you files that have been changed and anything that was fixed:

$ git commit -am "update pre-commit hook"
yarn run v1.22.10
$ pretty-quick --staged
🔍  Finding changed files since git revision e5360ee.
🎯  Found 1 changed file.
✅  Everything is awesome!
✨  Done in 0.48s.
[add-prettier bccba70] update pre-commit hook
 2 files changed, 7 insertions(+), 6 deletions(-)
 create mode 100755 .husky/pre-commit

Last step

With a new project that you may have bootstrapped (NextJS, Gatsby) you may want to run prettier --write src/ to tidy things up.

Fix existing codebase

Check things first:

prettier --check src/

Once I check the project, I like to --write specific subdirectories in succession to make sure things aren't breaking:

prettier --write src/pages

Once I see things are working as intended I may feel brave enough to fix everything in /src:

prettier --write src/

You can also fix specific files, for example in a Gatsby project gatsby-node.js and gatsby-config.js

prettier --write gatsby-node.js gatsby-config.js

You can also jump right into using pretty-quick and have that do your magic for you. I'm not your babysitter, you do you, it's your code.

This is what we're going to hook into in a moment.

Warning: This will fix everything

// yarn
yarn pretty-quick

// npm
npm run pretty-quick

Once everything has been fixed via prettier --write I like to run the pretty-quick command from above. I like to see that things are working as intended.

Appendix

• Prettier
• Pretty Quick
• Husky
• Gist