Choose linting options

[mathieuhendey]

We're currently using https://github.com/azz/pretty-quick to run Prettier when building/deploying, but we don't actually have any rules defined in .prettierrc.

We should choose a common style guide and refrain from editing it. No one will be happy with everything, so better to choose one that everyone is slightly happy with.

We should also get pretty-quick to run ESLint, as Prettier's configuration seems limited to things like white-space and punctuation. This may be enough but ESLint offers far more rules.

[barrymcgee]

The ‘.prettierrc’ file is for override options, not setting up initial rules. It’s present but empty as many devs, including myself, configure their editors to auto format on save but only run if a Prettier config file is present.

Prettier is different to Eslint in that it’s only concerned with code style, not code correctness. If you wish to implement Eslint, I’d recommend doing it in such a way that Prettier is solely concerned with code formatting and Eslint is solely concerned with code correctness.

https://prettier.io/docs/en/integrating-with-linters.html

This is the approach favoured by the React team.

[bgribben]

autoslap is a great tool for setting up linting or Prettier in JS projects which I would highly recommend using here; once run against a project, ESLint and Prettier will be set up to run on any staged files through a pre-commit hook. It's probably the least intrusive way of ensuring everyone is adhering to the same standards when contributing.

There's some initial work needed after setup e.g. doing an initial run of ESLint/Prettier against all files in the project, or configuring ESLint to play nicely with a React app (use the create-react-app ESLint config), but once that's all taken care of it makes life so much easier.