eslint-config-prettier

What is eslint-config-prettier?

The eslint-config-prettier npm package is used to disable all formatting-related ESLint rules that might conflict with Prettier. This allows developers to use both ESLint and Prettier without having to deal with conflicting formatting rules. It ensures that ESLint focuses on code-quality rules, and Prettier takes care of code formatting.

What are eslint-config-prettier's main functionalities?

Disabling conflicting rules

By extending eslint-config-prettier in your ESLint configuration file, you can turn off all rules that are unnecessary or might conflict with Prettier.

{ "extends": ["prettier"] }

Integration with other ESLint configs

eslint-config-prettier can be easily integrated with other ESLint configurations like Airbnb by placing it last in the extends array, which ensures that it will override any other formatting rules that might conflict with Prettier.

{ "extends": ["airbnb", "prettier"] }

Support for plugins

eslint-config-prettier provides support for disabling conflicting rules from various ESLint plugins, such as React or TypeScript, ensuring compatibility across different codebases.

{ "extends": ["prettier/react", "prettier/@typescript-eslint"] }

Other packages similar to eslint-config-prettier

eslint-config-standard

eslint-config-standard is an ESLint Shareable Config for JavaScript Standard Style. It enforces a consistent style across your codebase. Unlike eslint-config-prettier, it does not turn off formatting rules and is not specifically designed to be used with Prettier.

eslint-config-airbnb

eslint-config-airbnb is one of the most popular ESLint configurations which enforces Airbnb's JavaScript style guide. It includes a set of rules for code quality and formatting. While it can be used with Prettier, it does not disable formatting rules by default like eslint-config-prettier does.

eslint-config-google

eslint-config-google is based on Google's JavaScript style guide. It provides a set of ESLint rules that align with Google's code style recommendations. Similar to eslint-config-airbnb, it is not tailored for use with Prettier and does not disable conflicting formatting rules.

README

eslint-config-prettier

Turns all rules that are unnecessary or might conflict with prettier off.

This let’s you use you favorite shareable config without letting its stylistic choices get in the way when using prettier.

Intended to be used together with eslint-plugin-prettier.

Installation

First, install eslint-plugin-prettier. Follow the instructions over there.

Then, install eslint-config-prettier:

$ npm install --save-dev eslint-config-prettier

Finally, add eslint-config-prettier to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

{
  "extends": [
    "prettier"
  ]
}

If you use React and eslint-plugin-react, there are exclusions for those rules as well:

{
  "extends": [
    "prettier",
    "prettier/react"
  ]
}

Do you know of some other eslint plugin that contains rules that eslint-plugin-prettier could turn off? Send a pull request!

CLI helper tool

eslint-config-prettier also ships with a little CLI tool to help you check if your configuration contains any rules that are unnecessary or conflict with prettier.

First, add a script for it to package.json:

{
  "scripts": {
    "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"
  }
}

Then run npm run eslint-check.

(Swap out .eslintrc.js with the path to your config if needed.)

Example configuration

{
  "extends": [
    "google",
    "plugin:react/all",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "react",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": 2016,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "node": true
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

Exceptions

There a few rules that eslint-config-prettier disables that actually can be enabled in some cases.

max-len

Usually, prettier takes care of following a maximum line length automatically. However, there are cases where prettier can’t do anything, such as for long strings, regular expressions and comments. Those need to be split up by a human.

If you’d like to enforce an even stricter maximum line length policy than prettier can provide automatically, you can enable this rule. Just remember to keep max-len’s options and prettier’s printWidth option in sync.

Example configuration:

{
  "rules": {
    "max-len": ["error", {"code": 80, "ignoreUrls": true}]
  }
}

no-mixed-operators

This rule forbids mixing certain operators, such as && and ||.

For example, the rule could warn about this line:

var foo = a && b || c;

The rule suggests adding parentheses, like this:

var foo = (a && b) || c;

However, prettier prints the minimum amount of parentheses technically needed, turning it back to:

var foo = a && b || c;

If you want to use this rule with prettier, you need to split the expression into another variable:

var bar = a && b;
var foo = bar || c;

Example configuration:

{
  "rules": {
    "no-mixed-operators": "error"
  }
}

quotes

If you’d like to enforce the use of backticks rather than single or double quotes for strings, you can enable this rule. Otherwise, there’s no need to. Just remember to enable the "backtick" option!

Example configuration:

{
  "rules": {
    "quotes": ["error", "backtick"]
  }
}

License

MIT.

Changelog

Version 1.0.3 (2017-02-03)

• Fixed: "extends": "prettier/react" now actually works.