ESLint Proposal: jsx-curly-spacing

[tsullivan]

This is a proposal to implement the react/jsx-curly-spacing from https://github.com/yannickcr/eslint-plugin-react

This will help ensure consistency around spacing around props in JSX syntax. In other words, we shouldn't have a mix and match of code that looks like:

<MyComponent {...props} status={status}/>
<MyComponent { ...props } status={ status }/>

I would recommend implementing this rule as a warning instead of error, because the rule itself has issues which has created annoyances in the community:
jsx-eslint/eslint-plugin-react#857

• It only lints against props, not child objects (values and variables for other React component instances)
  • In other words, curly spacing around the child object in this component would not be ignored and pass linting:

    <MyComponent>{value}</MyComponent>
    

• Although the documentation says this rule can be auto-fixed, that might not be true: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md

As with all ESLint rules, stricter rules help readability of the code and make integrating changes smoother, because we won't see comments about this type of code in PRs.