You wanna add prettier? Go no further.

add-prettier.md

Add Prettier to your project!

The following process will get you all setup with a new project.

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 Fix existing codebase to add and then you will need to "fix" the existing codebase.

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

Let's do this

Add Dependencies

With yarn

yarn add --dev prettier pretty-quick husky

With npm

npm install --dev prettier pretty-quick husky

Add Scripts

Add the following scripts to package.json

{
  "scripts": {
    ...
    "prepare": "husky install",
    "pretty-quick": "pretty-quick",
    "pre-commit": "pretty-quick --staged"
  }
}

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.

Add Git hooks

Run the prepare script.

With yarn

yarn prepare

With 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 eveything 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

With yarn

yarn pretty-quick

With 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