What is Prettier?

Prettier is an opinionated code formatter that supports a lot of different programming languages, like:

• JavaScript
• JSON
• JSX
• CSS
• Markdown

It even has plugins for languages like Ruby, Python, and more.

Also, it integrates with popular text editors such as Atom and VSCode, and it can be run automatically on save.

Prettier is very popular because it improves code readability and makes the coding style consistent for teams. Developers are more likely to adopt a standard rather than writing their own code style from scratch, so tools like Prettier will make your code look good without you ever having to dabble in the formatting.

Setting up Prettier

Prettier is written in JavaScript and can be run from npm or yarn. You only need to install it in your project using the command line.

Install with yarn:

yarn add prettier --dev --exact
// Then test run it
yarn prettier --write index/src.js

You can use npm if you like:

npm install --save-dev --save-exact prettier
// or globally
npm install --global prettier
// Then test run it
npx prettier --write index/src.js
// or global
prettier --write index/src.js

The configuration file

Although Prettier comes with an opinionated style, we can still change the formatting by creating a configuration file in our project. You can view the full documentation here.

For example, if we want a semicolon after each statement in JavaScript, we can use the "semi" rule. Here is an example of rules that I modified for my projects.

# .prettierrc file
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

Working With ESLint

Some pro developers used Prettier, together with ESLint, to improve their productivity to the next level. If you are working on VSCode, You can check out​ this tutorial for integrating ESLint and Prettier with the AirBnB Style Guide.