Prettier is a code formatter that automatically adjusts your code to adhere to well-defined conventions. Using tools like this is a great way to ensure consistency across a project. This can be especially useful when working in teams where multiple developers are touching code across a project.

In this article, I will show how to add Prettier and add a pre-commit hook to your project.

1. Install Prettier

yarn add -D prettier
// or
npm install --save-dev prettier

2. Create a .prettierrc file and add the following

{
  "singleQuote": true,
  "bracketSpacing": true,
  "printWidth": 120
}

Note: You can edit these settings to your preference.

3. Set up Prettier to ignore certain files

Create a file named .prettierignore in the root of you project. Add files or folders you want to to ignore, for example:

./dist

4. Add a command in your package.json

In your package.json, add "format": "npx prettier --write ." in the scripts section:

...
"version": "0.0.0",
"scripts": {
    "start": "node index.js",
    "format": "npx prettier --write ."
 },
...

When we run this script, it will reformat all the files in your project. Optionally we can automate this process by installing husky and pretty-quick.

5. Install husky and pretty-quick

yarn add -D husky pretty-quick
// or
npm install --save-dev husky pretty-quick

6. Add the following to your package.json

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

Now when you commit your work, your code will automatically be formatted. It’s as simple as that! I hope you have found this useful. If so, be sure to share with friends and leave a note in the comments.

Build Micro Frontends with components

Microfrontends are a great way to speed up and scale app development, with independent deployments, decoupled codebases, and autonomous teams.

Bit offers a great developer experience for building component-driven Micro frontends. Build components, collaborate, and compose applications that scale. Our GitHub has over 14.5k stars!

Give Bit a try →

An independently source-controlled and shared “card” component (on the right, its dependency graph, auto-generated by Bit)

Learn more