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.

Prettier

Save prettier and eslint-plugin-prettier to devDependencies:

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

# 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
}

ESLint

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"
   }
 }

CLI

To lint all files in the current directory:

# npx
$ npx eslint .

# yarn
$ yarn eslint .

To automatically fix lint problems:

# npx
$ npx eslint . --fix

# yarn
$ yarn eslint . --fix

Example

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



Please support this site and join our Discord!