How to properly set up Prettier in less than 2 minutes

My step-by step guide to set up Prettier in any project, and integrate it with ESLint and Git Hooks

I’ve been using Prettier for more than 5 years now, and every time I create a new project or join an existing one, I ask myself the same questions:

• How do I install Prettier?

• Where should I put my configuration?

• Should I add new scripts to my package.json ?

• How to integrate it with ESLint?

• How can I setup Git hooks to ensure the code is always properly formatted?

For many years, every time I had to setup Prettier in a project, I had to read multiple documentation pages, look up tutorials, or dig into my old projects, and this took me so long that one day, I decided to create my own “step-by-step” guide, just for myself.

After using and updating my guide for 2 years, I finally decided to share it here, so everyone can benefit from it ✨

N.B: A summary of all the commands used in this guide can be found in my dedicated GitHub repo, this guide is just here to explain the different steps.

Step 1: Install Prettier

Installing Prettier can be done with one simple command

Note: for each code block in this guide, you can choose between npm and Yarn, depending on what you use in your project.

# With npm
npm i -D prettier

# With Yarn
yarn add -D prettier

Step 2: Configure your options

Prettier is installed, you can now configure the format you want to use! A Prettier configuration is nothing more than a set of “options”.

Note that this step is totally optional, because Prettier is pre-configured with default options that you can use without any additional configuration

Method 1: Configure your own options

To add your own options, create a new file called .prettierrc.js at the root of your project, and add your options using the following format:

// .prettierrc.js
module.exports = {
  tabWidth: 4,
  singleQuote: true,
};

N.B: You can find the list of all available options here. The name of each option should be the one from the “API Override” section.

Method 2: Use someone else’s options

I personally always use the same options, which are the default ones, plus:

• Single quotes instead of double quotes

• Max line length: 120 instead of 80

• A indent size of 2 spaces

• Some other niche options for .vue files

If you want to use my set of options, it’s super easy, add the following line to your package.json

{
  "prettier": "@bokub/prettier-config"
}

Then, install my config with:

# With npm
npm i -D @bokub/prettier-config

# With Yarn
yarn add -D @bokub/prettier-config

That’s it!

Step 3: Run prettier on existing code

Now that Prettier is installed and configured, you can actually run it on your existing code to properly format it.

Just run the following command:

npx prettier --write .

Prettier will replace all your existing code with properly formatted code. You can add this command to a npm script so you can run it when you need to, but I think it’s actually not necessary, because you can do something so much better: automate it!

Check out the next step to see how 😉

Step 4: Set up a pre-commit hook (optional)

Running the command from step 3 is easy, but it’s also easy to forget. It can also take a few seconds if your project is very big.

How to be sure your code is always formatted by everyone working on the project, without slowing the development workflow? Use a git hook!

By using husky and pretty-quick, you can automatically force every developer to format all the changed files (and nothing more) every time they commit.

The setup can be a little bit long if you actually read the whole documentation, but here are the commands you need to run to set everything up:

# With npm
npx husky-init
npm i -D pretty-quick
npx husky set .husky/pre-commit "npx pretty-quick --staged"

# With yarn
npx husky-init
yarn add -D pretty-quick
yarn husky set .husky/pre-commit "npx pretty-quick --staged"

That’s it ! You will now see this kind of message every time you commit something:

Step 5: Setup with ESLint (optional)

The main differences between Prettier and ESLint are the following:

• ESLint is a linter: it can detect errors in your code and also format your code if you configure it correctly

• Prettier is only a code formater, but doesn’t need a configuration to work

A lot of projects use both a linter and a formater. In this guide, I won’t explain how to setup ESLint, but instead, I’ll show you how to edit an existing ESLint configuration to make it work perfectly with Prettier.

Start by installing the following dependencies (I suppose you already have installed ESLint 7 or higher):

# With npm
npm i -D eslint-config-prettier eslint-plugin-prettier

# With yarn
yarn add -D eslint-config-prettier eslint-plugin-prettier

Then, edit your ESLint configuration file like this:

• Add "prettier" to the list of “plugins”

• Add "plugin:prettier/recommended" at the end of the list of “extends”

• Optionally, you can set the error level to warn by adding a new rule as you can see below
  

{
  "plugins": ["prettier"],
  "extends": ["<some-config>", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "warn"
  }
}

Conclusion

Following this step-by-step guide should help you configure Prettier properly in only a few minutes, without having to search through the documentation of multiple tools.

If you prefer, you can also use the “tl;dr” version of this guide which can be found in my dedicated GitHub repository.

Hope it helps ! 👍