Adding Prettier to a Project

While working at a smaller dev shop, our team hit the point at which the inconsistent code formats between and within projects was becoming a pain. Our needs included:

1. A consistent linter/formatter for all projects in a particular language
2. An autoformatter so developers didn't spend time "fixing" linter errors
3. A tool readily available in tools like VS Code which could apply changes on save

We decided to go with Prettier. We also added a pre-commit hook to ensure that all code changes complied with the new authoritarianism.

I initially published this as a gist to help when setting up new projects at that company. Today, it was useful for a client I was working with, so I'm sharing it now in an article in case the same use case fits for you, and you'd like a handy reference.

The Steps #

Most of these steps can be found in the docs and through other links in the docs.

1. Install prettier:

$ npm install --save-dev --save-exact prettier

2. Create an empty config file to let tools know you're using Prettier:

$ echo {}> .prettierrc.json

3. Create a .prettierignore file to let tools know which files NOT to format. node_modules are ignored by default. Some suggestions:

build
coverage
.package-lock.json
*.min.*

4. Manually run Prettier to re-format all the files in the project:

$ npx prettier --write .

5. Set up your code editor to auto-format on save for ease of use. See instructions for various editors.
6. Set up commit hooks with pretty-quick and husky. First, install them as dev dependencies:

$ npm i --save-dev pretty-quick husky

7. Finally, add the pre-commit instructions to your package.json file:

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
},

Now when you commit your changes, files in the commit will automatically be formatted!

Tools Dev Tools JavaScript