How to format code with Prettier tool step-by-step guide
Web
3
 min read
February 21, 2022

How to format code with Prettier tool step-by-step guide

Roman Haluška
Roman Haluška
Frontend developer
LinkedIn Logo

Many of you have certainly dealt with various styles of code writing and formatting, whether within a project or within a team, that have caused clutter and unnecessary merg conflicts. Therefore, in this article, I would like to introduce you to how to deal with these problems forever and easily avoid them. Of course, it won't be "free" and it will "hurt" someone a bit. 😃

In the introduction, I will briefly look at the advantages, disadvantages of prettier and then show how to set up prettier and what settings we use in GoodRequest.

Prettier is a code formatting tool that supports javascript, typescript and other languages. At the same time, it ensures that the code style is consistent across the team after formatting.

Why choose prettier as formatting tool?

Because it is the only formatting tool that is fully automatic, yet easy to set up without a large configuration file. Although we could consider this a small disadvantage, as it does not provide 100% functionality for all cases that would need to be solved with uniform formatting.

Since in GoodRequest we mostly use React framework and we write applications in typescript, so when setting up prettier I to this language and framework.

Installation of necessary modules

First you need to install these two node modules:

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

and (in case of integration with existing eslint)

npm install --save-dev eslint-config-prettier

After installation, you need to create package.json-level files named .prettierrc.json

echo {}> .prettierrc.json

copy config (I have selected these settings that meet our standards, if you need some more, visit the official website https://prettier.io/docs/en/options.html)

and the .prettierignore file (In this file you can set files that prettier should ignore when formatting.)

echo '# Ignore everything:\\n/*\\n/src/styles/main.css\\n\\n# Except src folder:\\n!/src'> .prettierignore

Integration with eslint

If you already have integrated eslint and want to use prettier at the same time, you need to add it to the eslint (.eslintrc) config, and if you have warnings enabled for the object-curly-newline rule, you need to set it to "off". The prettier may not be compatible with multiple eslining rules, so if you run into a problem, you will need to Google. 🙂

Example:

Pre-commit hook

If you want formatting linked to a commit action, you must have the husky tool installed and set up.

npx husky-init
npm install --save-dev pretty-quick
npx husky set .husky/pre-commit "npx pretty-quick --staged"

Manual formatting

Prettier provides the ability to format the entire project manually with a command npx prettier --write.

If you want to check before manual formatting, enter the command npx prettier --check .

Formatting of individual folders / files npx prettier --require-pragma=false --insert-pragma --write [file/dir/glob ...]

Formatting existing projects

For a smooth and seamless transition to prettier formatting for medium to large projects, it is recommended to add the "requirePragma": true option to the prettier config (.prettierrx.json) to ensure that only files with the added @format mark are formatted at the beginning, and therefore if several developers are working on the project and someone starts formatting, only those files that have been checked and tested after formatting will be formatted. If you use the requirePragma option and want to format the project's code base, use the command mentioned above (marked with a bold).

Marker:

/** @format */

or

/** @prettier */

Have a look to the interesting way in which Facebook itself dealt with the transition and implementation of the prettier formatting tool.

Ready for the challenge? Our Frontend team is looking for new team mates!
Open position for Frontend developer

Automatic formatting settings for IDE

If you want automatic formatting for the "on save" action, you need to set the IDE that you use when developing through their settings. I will show you how to set up a webstorm and visual studio code.

How to setup Webstorm

  1. Webstorm → Preferences → Languages & Frameworks → Prettier
  2. check “On save”
A step-by-step guide to setting up automatic formatting for the Webstorm IDE

How to setup Visual studio code

  1. Install extension
  2. Code → Preferences → Settings
  3. Enter "default formatter" in the search
  4. Set as default formatter Prettier - Code formatter
  5. Enter "format on save" in the search
  6. check “Editor: Format On Save“
A step-by-step guide to setting up automatic formatting for the Visual Studio Code IDE

Is it worth investing time and energy in prettier formatting?

As I mentioned above, prettier provides easy auto-formatting options and settings that keep the code consistent, so you avoid problems and save time, so I definitely recommend it.

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.