Create-react-app: 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?

[gaearon]

Not clear to me how it should work. When would it format? On save?

[AlanFoster]

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:

npm run lint --fix

For example, my current .eslintrc file is:

{
  "extends": "react-app",
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

And my package.json

"lint": "eslint src --ignore \"**/__snapshots__/**\""

When would it format? On save?

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.

[bondz]

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, okonet/lint-staged#62 might be an issue if a pre-commit hook is added.

[viankakrisna]

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 react-scripts format and add precommit hook on the generated project

[andriijas]

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