Automating code formatting with Prettier

ESLint can be used to improve any aspect of your code, including how it's formatted. The problem with using something like ESLint for this job is that it only tells you about the formatting issues that it finds. You still have to go fix them.

This is why the ESLint configuration from create-react-app doesn't specify any code formatting rules. This is where a tool like Prettier comes in. It's an opinionated code formatter for your JavaScript code. It understands JSX out of the box, so it's ideally suited to format your React components.

The create-react-app user guide has a whole section on setting up Git commit hooks that trigger Prettier to format any code before it's committed: https://github.com/facebookincubator/create-react-app#user-guide.

I won't repeat this guide here, but the basic idea is that having Git hooks in place that invoke Prettier on any JavaScript source that's committed will ensure that everything is formatted, well, pretty. The downside...