eslint-config-prettier
Version:
Turns off all rules that are unnecessary or might conflict with prettier.
358 lines (267 loc) • 8.61 kB
Markdown
Turns off all rules that are unnecessary or might conflict with [prettier].
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].
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.
```json
{
"extends": [
"prettier"
]
}
```
A few ESLint plugins are supported as well:
- [eslint-plugin-flowtype]
- [eslint-plugin-react]
Add extra exclusions for the plugins you use like so:
```json
{
"extends": [
"prettier",
"prettier/flowtype",
"prettier/react"
]
}
```
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:
```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.)
```json
{
"extends": [
"google",
"plugin:flowtype/recommended",
"plugin:react/recommended",
"prettier",
"prettier/flowtype",
"prettier/react"
],
"plugins": [
"flowtype",
"react",
"prettier"
],
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"node": true
},
"rules": {
"prettier/prettier": "error"
}
}
```
There a few rules that eslint-config-prettier disables that actually can be
enabled in some cases.
If a block (for example after `if`, `else`, `for` or `while`) contains only one
statement, JavaScript allows omitting the curly braces around that statement.
This rule enforces if or when those optional curly braces should be omitted.
If you use the `"multi-line"` or `"multi-or-nest"` option, the rule can conflict
with prettier.
For example, the `"multi-line"` option allows this line:
```js
if (cart.items && cart.items[0] && cart.items[0].quantity === 0) updateCart(cart);
```
However, prettier might consider the line too long and turn it into the
following, which the `"multi-line"` option does _not_ allow:
```js
if (cart.items && cart.items[0] && cart.items[0].quantity === 0)
updateCart(cart);
```
[] config includes `curly` with the `"multi-line"` option
turned on by default. Since that config is very popular, it makes sense for
eslint-config-prettier to turn this rule off.
If you like this rule, it can be used just fine with prettier as long as you
don’t use the `"multi-line"` or `"multi-or-nest"` option.
Example configuration:
```json
{
"rules": {
"curly": ["error", "all"]
}
}
```
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:
```json
{
"rules": {
"max-len": ["error", {"code": 80, "ignoreUrls": true}]
}
}
```
For example, the rule could warn about this line:
```js
var x = a => 1 ? 2 : 3;
```
By default, ESLint suggests switching to an explicit return:
```js
var x = a => { return 1 ? 2 : 3; };
```
That causes no problems with prettier.
With `{allowParens: true}`, adding parentheses is also considered a valid way to
avoid the arrow confusion:
```js
var x = a => (1 ? 2 : 3);
```
However, prettier removes many “unnecessary” parentheses, turning it back to:
```js
var x = a => 1 ? 2 : 3;
```
[] config includes `no-confusing-arrow` with the
`allowParens` option turned on by default. Since that config is very popular, it
makes sense for eslint-config-prettier to turn this rule off.
If you like this rule, it can be used just fine with prettier as long as the
`allowParens` option is off.
Example configuration:
```json
{
"rules": {
"no-confusing-arrow": "error"
}
}
```
This rule forbids mixing certain operators, such as `&&` and `||`.
For example, the rule could warn about this line:
```js
var foo = a + b * c;
```
The rule suggests adding parentheses, like this:
```js
var foo = a + (b * c);
```
However, prettier removes many “unnecessary” parentheses, turning it back to:
```js
var foo = a + b * c;
```
If you want to use this rule with prettier, you need to split the expression
into another variable:
```js
var bar = b * c;
var foo = a + bar;
```
Keep in mind that prettier prints _some_ “unnecessary” parentheses, though:
```js
var foo = (a && b) || c;
```
Example configuration:
```json
{
"rules": {
"no-mixed-operators": "error"
}
}
```
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:
```json
{
"rules": {
"quotes": ["error", "backtick"]
}
}
```
eslint-config-prettier has been tested with:
- ESLint 3.19.0
- prettier 0.22.0
- eslint-plugin-flowtype 2.30.4
- eslint-plugin-react 6.10.3
Have new rules been added since those versions? Have we missed any rules? Is
there a plugin you would like to see exclusions for? Open an issue or a pull
request!
If you’d like to add support for eslint-plugin-foobar, this is how you’d go
about it:
First, create `foobar.js`:
```js
"use strict";
module.exports = {
rules: {
"foobar/some-rule": "off"
}
};
```
Then, create `test-lint/foobar.js`:
```js
/* eslint-disable quotes */
"use strict";
// prettier does not want spaces before the parentheses, but
// eslint-config-foobar wants one.
console.log ();
```
`test-lint/foobar.js` must fail when used with eslint-plugin-foobar and
eslint-plugin-prettier at the same time – until `"prettier/foobar"` is added to
the "extends" property of an ESLint config.
Finally, you need to mention the plugin in several places:
- Add `"foobar.js"` to the "files" field in `package.json`.
- Make sure that at least one rule from eslint-plugin-foobar gets used in
`.eslintrc.base.js`.
- Add it to the list of supported plugins, to the example config and to
Contributing section in `README.md`.
When you’re done, run `npm test` to verify that you got it all right. It runs
several other npm scripts:
- `"test:lint"` makes sure that the files in `test-lint/` pass ESLint when
the exclusions from eslint-config-prettier are used. It also lints the code of
eslint-config-prettier itself.
- `"test:lint-verify-fail"` is run by a test in `test/lint-verify-fail.js`.
- `"test:lint-rules"` is run by a test in `test/rules.js`.
- `"test:ava"` runs unit tests that check a number of things:
- That eslint-plugin-foobar is mentioned in all the places shown above.
- That no unknown rules are turned off. This helps catching typos, for
example.
- That the CLI works.
- `"test:cli-sanity"` is a sanity check for the CLI.
[](LICENSE).
[]: http://eslint.org/docs/rules/curly
[]: https://www.npmjs.com/package/eslint-config-airbnb
[]: https://github.com/gajus/eslint-plugin-flowtype
[]: https://github.com/not-an-aardvark/eslint-plugin-prettier
[]: https://github.com/yannickcr/eslint-plugin-react
[]: http://eslint.org/docs/rules/max-len
[]: http://eslint.org/docs/rules/no-confusing-arrow
[]: http://eslint.org/docs/rules/no-mixed-operators
[]: https://github.com/prettier/prettier
[]: http://eslint.org/docs/rules/quotes
[]: https://travis-ci.org/prettier/eslint-config-prettier.svg?branch=master
[]: https://travis-ci.org/prettier/eslint-config-prettier