react/jsx-curly-newline rule in conflict with eslint-config-airbnb

[naoisegolden]

eslint-config-airbnb enabled the rule [react/jsx-curly-newline]() in version 18.

https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react.js#L477-L480

This is in conflict with the current config for eslint-config-prettier. Would it be ok to open a PR enabling it here too?

[lydell]

Hi! That rule seems to be already turned off:

https://github.com/prettier/eslint-config-prettier/blob/dcca556e260af985ece4d9af92531fa649268f80/react.js#L11

Maybe you forgot to add "prettier/react" to the "extends" array in your ESLint config? Also make sure that the Prettier configs come last so it gets a chance to override.

[naoisegolden]

@lydell the request is to turn it on/enable it, so that it replicates what eslint-config-airbnb (a de facto standard) does.

This would of course mean removing that line from prettier/eslint-config-prettier too, but I started the conversation here.

[lydell]

react/jsx-curly-newline conflicts with Prettier ("consistent" seems to only be unnecessary when using Prettier after a quick glance at it) so it has to be turned off if you want to use Prettier.

Am I missing something? What would you gain by enabling this rule when using Prettier?

[naoisegolden]

For people using prettier together with eslint-config-airbnb, this rule creates a conflict, one has it to off and the other to error. This is proposing to use the same rule changing Prettier's config. Does that make more sense?

[lydell]

No, I’m sorry, that makes no sense at all.

There is nothing special about the react/jsx-curly-newline rule. Here is the full list of rules in eslint-config-airbnb that are unnecessary of conflict with Prettier:

❯ npx eslint --print-config index.js | npx eslint-config-prettier-check
The following rules are unnecessary or might conflict with Prettier:

- array-bracket-spacing
- arrow-parens
- arrow-spacing
- block-spacing
- brace-style
- comma-dangle
- comma-spacing
- comma-style
- computed-property-spacing
- dot-location
- eol-last
- func-call-spacing
- function-paren-newline
- generator-star-spacing
- implicit-arrow-linebreak
- indent
- jsx-quotes
- key-spacing
- keyword-spacing
- linebreak-style
- new-parens
- newline-per-chained-call
- no-extra-semi
- no-floating-decimal
- no-mixed-spaces-and-tabs
- no-multi-spaces
- no-multiple-empty-lines
- no-spaced-func
- no-trailing-spaces
- no-whitespace-before-property
- nonblock-statement-body-position
- object-curly-newline
- object-curly-spacing
- object-property-newline
- one-var-declaration-per-line
- operator-linebreak
- padded-blocks
- quote-props
- react/jsx-closing-bracket-location
- react/jsx-closing-tag-location
- react/jsx-curly-newline
- react/jsx-curly-spacing
- react/jsx-equals-spacing
- react/jsx-first-prop-new-line
- react/jsx-indent
- react/jsx-indent-props
- react/jsx-max-props-per-line
- react/jsx-one-expression-per-line
- react/jsx-props-no-multi-spaces
- react/jsx-tag-spacing
- react/jsx-wrap-multilines
- rest-spread-spacing
- semi
- semi-spacing
- semi-style
- space-before-blocks
- space-before-function-paren
- space-in-parens
- space-infix-ops
- space-unary-ops
- switch-colon-spacing
- template-curly-spacing
- template-tag-spacing
- unicode-bom
- wrap-iife
- yield-star-spacing

The following rules are enabled with options that might conflict with Prettier. See:
https://github.com/prettier/eslint-config-prettier#special-rules

- curly
- no-confusing-arrow

The following rules are enabled but cannot be automatically checked. See:
https://github.com/prettier/eslint-config-prettier#special-rules

- arrow-body-style
- max-len
- no-mixed-operators
- no-tabs
- no-unexpected-multiline
- prefer-arrow-callback
- quotes

eslint-config-prettier has one job: Turning off all of those.

eslint-config-airbnb is not compatible with Prettier. That’s just how it is. That’s why eslint-config-prettier exists. It turns off all conflicting (or unnecessary) rules, so that you can use both without trouble.

If you prefer airbnb’s choices, you might want to look into prettier-eslint.

[naoisegolden]

Thanks for the thorough response and suggestions.