-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Consider including a code formatter? #451
Comments
I would not include a formatter, because I think you would want to use the same formatting on your react-create-app projects as in your other JavaScript projects, and there are no dominant conventions in the JavaScript community (think of 4 space vs 2 space indent). |
A code formatter is essentially an even-stricter version of ESLint. Since the lint config we're using here is a fairly relaxed one - aiming to detect only bugs, rather than enforce a particular style - a code formatter is probably something you would want to add on yourself, rather than include in create-react-app. |
I agree with what @lacker said, you can easily add it on top. We wouldn’t want to pick any default style, and we also don’t want to configuration, so it seems out of scope. Thanks for the suggestion though! |
Just in case, someone lands here in future from google, can any of you give an example of how to add a strict eslint/fmt tool, via an example/tutorial ? Thanks. |
Let's reopen, we should at least document this. |
https://github.com/jlongster/prettier looks promising. |
@gaearon that is exactly the kind of tool that I meant |
Would love for Prettier to be integrated into CRA and I think it'd be the perfect candidate for it. |
We’ve documented how to do it: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#formatting-code-automatically We might wait for more adoption and at some point add it by default. |
I think we can speak of enough adoption at this moment to consider adding @prettier by default? |
Not clear to me how it should work. When would it format? On save? |
Prettier is the only addition I frequently add to my generated create-react-app repositories now. The flow I follow is attaching prettier to eslint directly with eslint-plugin-prettier, that way prettier can be invoked with the normal eslint workflow:
For example, my current
And my package.json
If developers want to have their editors configured with prettier, sure! Otherwise, it's just part of the normal linting workflow. I wouldn't expect create-react-app to have any opinions here. The advice of adding a pre-commit hook with husky is still sound, but could be left kept within the user guide still. |
I agree, prettier is the dominant way to format JS code. It supports just about every popular editor via extensions and it is configurable. I'm not so sure about setting style rules as errors though but some users might want to enforce it. Also, lint-staged/lint-staged#62 might be an issue if a pre-commit hook is added. |
i think changing the recommendation from lint-staged to https://github.com/azz/pretty-quick in the doc would make it more concise. Or maybe wrap it in |
Closing. These days the documentation is helpful on how to get a code formatter like prettier going with CRA. If anyone wants to add pretty-quick to the readme just open a PR. Thanks |
I have not much experience with this in javascript. I know from languages like dart and go, that they ship a
dartfmt
andgofmt
command, and I really find that super helpful.Basically, it is a very opinionated automatic formatter for your code. So before I send a PR in any kind of Dart project, I always run that, so there are never any arguments about whitespace or whatever, because this is just the standard 95% of the people use.
So this is not about semicolons or whatever, but about whitespace. For example:
if
or not, line-break after{}
, etcI was wondering, if react-scripts could also ship a formatter. I have not much experience here. I normally just use webstorms formatter. But I'm sure similar tools as
gofmt
exists in the ecosystem. I found this tool after searching on npm:https://www.npmjs.com/package/esformatter
This is not something that create-react-app has to provide of course, but I like how opinionated create-react-app is, this could be something create-react-app could be opinionated about (and one less choice I have to make :-) ).
The text was updated successfully, but these errors were encountered: