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

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)

{
   "useTabs": true,
   "semi": false,
   "singleQuote": true,
   "jsxSingleQuote": true,
   "trailingComma": "none",
	 "parser": "typescript",
   // v prípade ak je potrebné formátovať len označené súbory markerom @format
   "requirePragma": true
}

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:

{
  "extends": [
    "airbnb-base",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:react/recommended",
    "prettier"
  ],
  ...

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.

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"

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"

‍

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.