How to properly set up Prettier in less than 2 minutes
Tags: javascript, tutorial, beginners, programming
Published: 2022-06-20 07:17:02

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

![@bokub/prettier-config](https://cdn-images-1.medium.com/max/4096/1*Vr-NO5OndRzjTJHob6mP-Q.png)

I’ve been using [Prettier](https://prettier.io/) 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](https://github.com/bokub/prettier-config), 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.

```bash
# 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:

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

N.B: You can find the list of all available options [here](https://prettier.io/docs/en/options.html). 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

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

Then, install my config with:

```bash
# 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:

```bash
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**](https://github.com/typicode/husky) and [**pretty-quick**](https://github.com/azz/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:

```bash
# 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:

![Screenshot](https://cdn-images-1.medium.com/max/2000/0*sm_LG-JLB7JNUSZx.png)

## **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):

```bash
# 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

```json
{
  "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](https://github.com/bokub/prettier-config#readme).

Hope it helps ! 👍