DEV Community

Boris K
Boris K

Posted on • Updated on • Originally published at Medium

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

@bokub/prettier-config

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
Enter fullscreen mode Exit fullscreen mode

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,
};
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

Then, install my config with:

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

# With Yarn
yarn add -D @bokub/prettier-config
Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

Screenshot

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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 ! 👍

Discussion (10)

Collapse
willytjandra profile image
Willy Tjandra

In addition, you can also enable format on save in vscode, which will run prettier to format your code.

I prefer this before developer commit their code.

Collapse
bokub profile image
Boris K Author

If you're developing an open-source product for example, you cannot force every contributor to use vscode and configure it exactly like you expect !

Collapse
patoi profile image
István Pató

lint-staged with husky gives ultimate power to manage your code

Collapse
tagvi profile image
Otar Natsvaladze

You can also use yarn dlx instead of npx.

Collapse
snowlyg profile image
snowlyg

what's the npx commad?

Collapse
bokub profile image
Boris K Author

npx is a tool which comes with Node.js & npm

By default, when you run npx <command>, npx will check whether <command> exists in $PATH, or in the local project binaries, and execute that. If <command> is not found, it will be installed prior to execution.

Collapse
andrewbaisden profile image
Andrew Baisden
Collapse
plabankr profile image
Plaban Kumar Mondal

Can you add commands for pnpm also?

Collapse
bokub profile image
Boris K Author

Sorry, I've never used it, but if you manage to find working commands, please post them in a comment and I'll add them to the guide!

Collapse
harithzainudin profile image
Muhammad Harith Zainudin

Thank you for sharing! Will try and use this for my next project!