How to Add Prettier to a Project

This content originally appeared on Bits and Pieces - Medium and was authored by Ivo Nederlof

Format code in your project with prettier and husky pre-commit

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

How to Add Prettier to a Project was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.

This content originally appeared on Bits and Pieces - Medium and was authored by Ivo Nederlof

Print Share Comment Cite Upload Translate Updates

APA

Ivo Nederlof | Sciencx (2021-12-30T22:53:04+00:00) How to Add Prettier to a Project. Retrieved from https://www.scien.cx/2021/12/30/how-to-add-prettier-to-a-project/

MLA

" » How to Add Prettier to a Project." Ivo Nederlof | Sciencx - Thursday December 30, 2021, https://www.scien.cx/2021/12/30/how-to-add-prettier-to-a-project/

HARVARD

Ivo Nederlof | Sciencx Thursday December 30, 2021 » How to Add Prettier to a Project., viewed ,<https://www.scien.cx/2021/12/30/how-to-add-prettier-to-a-project/>

VANCOUVER

Ivo Nederlof | Sciencx - » How to Add Prettier to a Project. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/30/how-to-add-prettier-to-a-project/

CHICAGO

" » How to Add Prettier to a Project." Ivo Nederlof | Sciencx - Accessed . https://www.scien.cx/2021/12/30/how-to-add-prettier-to-a-project/

IEEE

" » How to Add Prettier to a Project." Ivo Nederlof | Sciencx [Online]. Available: https://www.scien.cx/2021/12/30/how-to-add-prettier-to-a-project/. [Accessed: ]

rf:citation

» How to Add Prettier to a Project | Ivo Nederlof | Sciencx | https://www.scien.cx/2021/12/30/how-to-add-prettier-to-a-project/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.