netguru / create-react-app

Create React apps with no build configuration.
MIT License
14 stars 6 forks source link

Consider to add prettier #51

Open RusinovAnton opened 6 years ago

RusinovAnton commented 6 years ago

In my case Im using prettier extension for VScode that formats code automatically on file save so I do not need to spend extra time for that. I've just stumbled upon the conflict between prettier and CRA's eslint code style configuration. Would be nice to have an option that allows to add eslint-config-prettier that eliminates that kind of conflicts for projects that are using prettier.

RusinovAnton commented 6 years ago

Another conflict with eslint vs prettier is the code style for arrow functions parameters.

Prettier has only two options for curly braces: always or never, but eslint considers more complex cases:

Expected parentheses around arrow function argument having a body with curly braces  arrow-parens

EDIT: This issue was resolved after Dominik have suggested me to use prettier extension's option for eslint integration

prettier.eslintIntegration: true
papermana commented 6 years ago

I'd rather we keep full compatibility with projects that just use AirBnB's ESLint rules and don't use Prettier. As you said, in VSCode we may use eslintIntegration to conform Prettier's formatting to our ESLint config rather than the other way around. Under the hood, it uses prettier-eslint. For usage in the terminal, the package prettier-eslint-cli is a replacement for prettier that does this as well.

I think it's a good idea to include Prettier in CRA by default, even just to ensure that everyone will have it configured correctly (the aforementioned prettier-eslint-cli should suffice). The question is, how do we want to include Prettier? Facebook's docs for CRA suggest adding it to a precommit hook with husky. But we've had some discussions about this in the past and there are problems with this approach.

@virzen, do you have any ideas?

virzen commented 6 years ago

I think that the best use of prettier is in the editor. However, if we want to ship it with CRA, then probably a npm script would be ok?

The main problem with git hooks is that a) they might fail if the unstaged changes are incorrect in case prettier is just run over everything after commit b) there might be conflicts if you stash the files, run prettier and pop.

Npm script is a nice middle ground IMO, though it doesn't enforce the formatting in any way. 😕