Comments (14)
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.
from prettier-eslint.
- Sets the prettier options for you based on your eslint config
- Gives you an integrated experience (as opposed to this)
- You are now free to do:
prettier-eslint "**/*.js"
and it will respect your.eslintignore
(which you can't do with regularprettier
by itself.
from prettier-eslint.
Ok but then What does Prettier-ESlint do which people can't achieve by installing and setup Prettier and ESLint separately?
from prettier-eslint.
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.
from prettier-eslint.
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.
from prettier-eslint.
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.
from prettier-eslint.
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
from prettier-eslint.
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,?
- What packages do I need to install in my project?
- what packages I need in atom
- what is the default .eslintrc for developing in react/JSX and standard or airbnb ?
Thanks
from prettier-eslint.
@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
from prettier-eslint.
@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.
from prettier-eslint.
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!
from prettier-eslint.
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.
from prettier-eslint.
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
from prettier-eslint.
That was just one example. Prettier is definitely not only valuable of that one thing over ESLint.
from prettier-eslint.
Related Issues (20)
- how to integrate with prettier vscode extension? no longer has "prettier.eslintIntegration" option HOT 5
- ability to capture (non-fixable) eslint errors/warnings? HOT 5
- Integration with CI/CD (gitlab) HOT 1
- Error: Failed to load plugin '@next/next' declared in 'CLIOptions': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received '' HOT 2
- Remove `--prettier-last` option because it's out scope HOT 2
- Support for `padded-blocks` corner cases HOT 3
- Error: `reportUnusedDisableDirectives` must be any of "error", "warn", "off", and null HOT 2
- prettier-eslint fails due to an eslint config error; eslint works if called directly. Typescript overrides issue? HOT 1
- Only Prettier (but not ESLint) formatting is applied to `.cjs` files HOT 7
- prettier-eslint installs vue-eslint-parser 8.30, instead of 9.1.0 HOT 3
- `prettier-eslint` command fails due to unknown environment key `jest/globals` HOT 4
- Configuring reportUnusedDisableDirectives to true in .eslintrc will cause prettier-eslint to not work properly. HOT 1
- TypeError: Expected `input` to be a `string`, got `object` HOT 5
- Is this tool still needed? HOT 1
- Shouldn't this be the other way around? "This formats your code via prettier, and then passes the result of that to eslint --fix." HOT 6
- Status of capturing eslint warnings/errors? HOT 1
- feat: support flat config with `FlatESLint` HOT 7
- [meta] a new OpenCollective home for all `prettier` + `eslint` integration tools HOT 6
- How to use it? HOT 1
- prettier-eslint default trailingComma is not the same as Prettier v3 default trailingComma
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from prettier-eslint.