Consider including a code formatter?

[kasperpeulen]

I have not much experience with this in javascript. I know from languages like dart and go, that they ship a dartfmt and gofmt 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:

• using tabs or spaces
• how much spaces (tabs)
• how much is the max line length (80, 120, whatever)
• space after if or not, line-break after {}, etc

I 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 :-) ).

[ludofischer]

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).

[lacker]

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.

[gaearon]

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!

[psankar]

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.

[gaearon]

Let's reopen, we should at least document this.

[gaearon]

https://github.com/jlongster/prettier looks promising.

[kasperpeulen]

@gaearon that is exactly the kind of tool that I meant

[Anahkiasen]

Would love for Prettier to be integrated into CRA and I think it'd be the perfect candidate for it.

[gaearon]

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.

[MichaelDeBoey]

I think we can speak of enough adoption at this moment to consider adding @prettier by default?