Introduction to Prettier

Format your code cleanly with Prettier.

Posted on October 17, 2018


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

  • JavaScript
  • JSON
  • JSX
  • CSS
  • Markdown

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

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

Prettier is very popular because it improves code readability and make 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 looks good without ever dabbling in formatting.

Setting up Prettier

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

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 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 JavaScript semicolon after each statement, we can use “semi” rule. Here is an example of rules 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 checkout this tutorial for integrating ESLint + Prettier + AirBnB Style Guide

Related articles:

Level up your programming skills

I'm sending out an email once every Wednesday with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.