Add Prettier to ESLint

This article goes over how add Prettier to your ESLint config.

Prerequisites

This article assumes you have eslint installed and an .eslintrc created.

npm install --save-dev prettier eslint-plugin-prettier

Or with Yarn:

yarn add --dev prettier eslint-plugin-prettier

If you don’t want the default prettier format options, create a .prettierrc:

touch .prettierrc

For example, to use single quotes instead of double quotes:

{
  "singleQuote": true
}

Add prettier to plugins and rules in .eslintrc:

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Remove or disable any ESLint rule that conflicts with Prettier.

For example, remove indent since this conflicts with Prettier’s default indent of 2 spaces:

 {
   "plugins": ["prettier"],
   "rules": {
-    "indent": ["error", 4],
     "prettier/prettier": "error"
   }
 }

To lint all files in the current directory:

npx eslint .

Or with Yarn:

yarn eslint .

To automatically fix lint problems:

npx eslint . --fix

Or with Yarn:

yarn eslint . --fix

Here’s an example repository that has ESLint and Prettier set up.