Skip to content

Add mixed mode for react/jsx-curly-newline #3539

Open

Description

Is there an existing issue for this?

  • I have searched the existing issues and my issue is unique
  • My issue appears in the command-line and not only in the text editor

Description Overview

My rules are based on the Standard rules and I want to have these styles as correct for single line components:

<div>
  {someCondition &&
    <Comp1>test</Comp1>
  }
</div>


<div>
  {someCondition && <Comp1>test</Comp1>}
</div>

and this as incorrect style

<div>
  {someCondition &&
    <Comp1>test</Comp1>}
</div>

For multiline components I want these styles as corrrect:

<div>
  {someCondition &&
    <Comp1>
      <Comp1>test</Comp1>
      <Comp1>test</Comp1>
    </Comp1>
  }
</div>

<div>
  {
    someCondition &&
      <Comp1>
        <Comp1>test</Comp1>
        <Comp1>test</Comp1>
      </Comp1>
  }
</div>

Closing curly bracket should be placed below the opening one. Otherwise it is hard to find it in big components.

Standard has this rule:

    "react/jsx-curly-newline": [
      "error",
      {
        "multiline": "consistent",
        "singleline": "consistent"
      }
    ],

which moves closing bracket at the end of the last string if there was no line after the opening bracket. I didn't find any appropriate option in react/jsx-curly-newline rule. There are "consistent" | "forbid" | "require" but I don't need a newline after the opening bracket and a newline before the closing bracket should exist only when both condition and component are on the same line.

I also noticed that I can wrap the component with parenthesis like this

<div>
  {someCondition && (
    <Comp1>
      <Comp1>test</Comp1>
      <Comp1>test</Comp1>
    </Comp1>
  )}
</div>

which is also quite appropriate for multiline but it doesn't force this style and autofix doen't work.

I see there is also a react/jsx-wrap-multilines rule and if I set its 'logical' option to 'parens-new-line' it almost does what I need (forcing adding of parenthesis) but only for multiline components. How can I forbid incorrect styles for single-line components too and make autofix work?

Expected Behavior

see above

eslint-plugin-react version

v7.32.2

eslint version

v8.34.0

node version

v14.17.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions