If eslint can auto fix/format code why to use Prettier?

[jitendravyas]

I didn't get this part

The fix feature of eslint is pretty great and can auto-format/fix much of your code according to your ESLint config. prettier is a more powerful automatic formatter

What does it mean "prettier is a more powerful automatic formatter" ?

[kentcdodds]

Take this code and format it with eslint alone, then format it with prettier:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne(), noWayYouGottaBeKiddingMe());

ESLint will just give you a warning that it's too wide (depending on your max-len setting, which I set at 80). prettier will format it for you:

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne(),
  noWayYouGottaBeKiddingMe()
);

That's just one of many instances where prettier is a more powerful formatter than eslint. But there are some things that eslint can do that prettier can't, so I built this to combine them :)

I hope that helps.

[jitendravyas]

Ok but then What does Prettier-ESlint do which people can't achieve by installing and setup Prettier and ESLint separately?

[kentcdodds]

1. Sets the prettier options for you based on your eslint config
2. Gives you an integrated experience (as opposed to this)
3. You are now free to do: prettier-eslint "**/*.js" and it will respect your .eslintignore (which you can't do with regular prettier by itself.

[yokodev]

After the fork and all the possible solutions ... I'm confused... I'm trying to install this for Atom what packages I need in order to get the ESlint like red warnings, etc in Atom,?

1. What packages do I need to install in my project?
2. what packages I need in atom
3. what is the default .eslintrc for developing in react/JSX and standard or airbnb ?
   Thanks

[bennycode]

ESLint will just give you a warning that it's too wide (depending on your max-len setting, which I set at 80). prettier will format it for you

@kentcdodds Thanks for giving this example! Do you have some more precise examples where Prettier is superior to ESLint? There is a discussion to use Prettier within the Bootstrap project and we are looking for pros and cons: twbs/bootstrap#24323

[kentcdodds]

I suggest you try it on a less important project for a day and you'll be hooked. It's hard to explain, easy to try.

[bennycode]

I suggest you try it on a less important project for a day and you'll be hooked. It's hard to explain, easy to try.

@kentcdodds I have been using it in a smaller project of mine and I got quite unhappy with it (prettier/prettier#2716 (comment)). That's why I am looking for facts why Prettier is better than ESLint (or should be combined with ESLint) because maybe I am seeing it from the wrong perspective.

[zimme]

tbh, I don't see prettier being better than eslint. I use both in my projects. That's why I'm using this package. Format my code with prettier first, then run it through eslint --fix, making sure I have eslint-plugin-prettier and eslint-config-prettier. This way I get the best of both. Also, if I need to, in a specific project I can have my eslint config override eslint-config-prettier to override the styling of prettier if there are a eslint rule with a fix for what's bugging me.

[bennycode]

@zimme Thanks for giving your input! 😃

Running Prettier in the first place and overriding it's configuration with ESLint sounds like a very good compromise. Do you have a public example on GitHub where you do it?

I would like to override Prettier's breakup of 3 or more chained calls. For this purpose I am using prettier-eslint-cli, but it fails telling me:

success formatting 1 file with prettier-eslint
failure formatting 1 file with prettier-eslint
12 files were unchanged

[zimme]

@bennyn Weird, I've never run into that problem actually.

Anyhow, I'm not sure that eslint has a rule with a fix that would put chained calls on a single line if it finds chained calls in multiple lines.

I found this rule, https://eslint.org/docs/rules/newline-per-chained-call, which has a fix and can fix some of the errors.

I do believe that eslint --fix could fix that each chained call always gets it's own line, but not the other way around.

[bennycode]

I do believe that eslint --fix could fix that each chained call always gets it's own line, but not the other way around.

This is also my experience. 😢

So I need to use an older version of Prettier, where this formatting rule hasn't been included. 😁 I will move the discussion to prettier/prettier-eslint-cli#109.

Thanks for your help!

[zimme]

I don't believe there is anything we can do with prettier-eslint to fix this for you. You'll have to open an issue with eslint to see if a fix for this could be added.

The only thing I believe prettier-eslint could do is set prettier and eslint as peer dependencies so people can use an older version of prettier or eslint. However this would add more complexity to this package which I'm not so keen on.

[dwjohnston]

I want to point out that if the eslint's function-call-argument-newline operated in a similar manner that function-paren-newline and array-element-newline does, (that is, having a minItems option, then @kentcdodds reply would be redundant.

Some people did request this functionality but it appears to not have got much attention. eslint/eslint#12794

[kentcdodds]

That was just one example. Prettier is definitely not only valuable of that one thing over ESLint.