@stylistic/jsx/

jsx-wrap-multilines

Disallow missing parentheses around multiline JSX.

Wrapping multiline JSX in parentheses can improve readability and/or convenience.

Rule Details

This rule optionally takes a second parameter in the form of an object, containing places to apply the rule. By default, all the syntax listed below will be checked except the conditions out of declaration or assignment, logical expressions and JSX attributes, but these can be explicitly disabled. Any syntax type missing in the object will follow the default behavior displayed below.

{
  "declaration": "parens",
  "assignment": "parens",
  "return": "parens",
  "arrow": "parens",
  "condition": "ignore",
  "logical": "ignore",
  "prop": "ignore",
  "propertyValue": "ignore"
}

Note: conditions are checked by default in declarations or assignments.

Rule Options

Examples of incorrect code for this rule, when configured with parens or parens-new-line:

var Hello = createReactClass({
  render: function() {
    return <div>
      <p>Hello {this.props.name}</p>
    </div>;
  }
});

Examples of incorrect code for this rule, when configured with parens-new-line:

var Hello = createReactClass({
  render: function() {
    return (<div>
      <p>Hello {this.props.name}</p>
    </div>);
  }
});

Examples of correct code for this rule:

var singleLineJSX = <p>Hello</p>

var Hello = createReactClass({
  render: function() {
    return (
      <div>
        <p>Hello {this.props.name}</p>
      </div>
    );
  }
});

declaration

Examples of incorrect code for this rule, when configured with { declaration: "parens" }:

var hello = <div>
  <p>Hello</p>
</div>;

Examples of correct code for this rule, when configured with { declaration: "parens" }:

var hello = (
  <div>
    <p>Hello</p>
  </div>
);

var hello = (<div>
  <p>Hello</p>
</div>);

Examples of incorrect code for this rule, when configured with { declaration: "parens-new-line" }:

var hello = <div>
  <p>Hello</p>
</div>;

var hello = (<div>
  <p>Hello</p>
</div>);

Examples of correct code for this rule, when configured with { declaration: "parens-new-line" }.

var hello = (
  <div>
    <p>Hello</p>
  </div>
);

assignment

Examples of incorrect code for this rule, when configured with { assignment: "parens" }.

var hello;
hello = <div>
  <p>Hello</p>
</div>;

Examples of correct code for this rule, when configured with { assignment: "parens" }.

var hello;
hello = (
  <div>
    <p>Hello</p>
  </div>
);

var hello;
hello = (<div>
  <p>Hello</p>
</div>);

Examples of incorrect code for this rule, when configured with { assignment: "parens-new-line" }.

var hello;
hello = <div>
  <p>Hello</p>
</div>;

var hello;
hello = (<div>
  <p>Hello</p>
</div>);

Examples of correct code for this rule, when configured with { assignment: "parens-new-line" }.

var hello;
hello = (
  <div>
    <p>Hello</p>
  </div>
);

return

Examples of incorrect code for this rule, when configured with { return: "parens" }.

function hello() {
  return <div>
    <p>Hello</p>
  </div>;
}

Examples of correct code for this rule, when configured with { return: "parens" }.

function hello() {
  return (
    <div>
      <p>Hello</p>
    </div>
  );
}

function hello() {
  return (<div>
    <p>Hello</p>
  </div>);
}

Examples of incorrect code for this rule, when configured with { return: "parens-new-line" }.

function hello() {
  return <div>
    <p>Hello</p>
  </div>;
}

function hello() {
  return (<div>
    <p>Hello</p>
  </div>);
}

Examples of correct code for this rule, when configured with { return: "parens-new-line" }.

function hello() {
  return (
    <div>
      <p>Hello</p>
    </div>
  );
}

arrow

Examples of incorrect code for this rule, when configured with { arrow: "parens" }.

var hello = () => <div>
  <p>World</p>
</div>;

Examples of correct code for this rule, when configured { arrow: "parens" }.

var hello = () => (
  <div>
    <p>World</p>
  </div>
);

var hello = () => (<div>
  <p>World</p>
</div>);

Examples of incorrect code for this rule, when configured with { arrow: "parens-new-line" }.

var hello = () => <div>
  <p>World</p>
</div>;

var hello = () => (<div>
  <p>World</p>
</div>);

Examples of correct code for this rule, when configured with { arrow: "parens-new-line" }.

var hello = () => (
  <div>
    <p>World</p>
  </div>
);

condition

Examples of incorrect code for this rule, when configured with { condition: "parens" }.

<div>
  {foo ? <div>
      <p>Hello</p>
    </div> : null}
</div>

Examples of correct code for this rule, when configured with { condition: "parens" }.

<div>
  {foo ? (<div>
      <p>Hello</p>
  </div>) : null}
</div>

<div>
  {foo ? (
    <div>
      <p>Hello</p>
    </div>
  ): null}
</div>

Examples of incorrect code for this rule, when configured with { condition: "parens-new-line" }.

<div>
  {foo ? <div>
      <p>Hello</p>
    </div> : null}
</div>

<div>
  {foo ? (<div>
      <p>Hello</p>
  </div>) : null}
</div>

Examples of correct code for this rule, when configured with { condition: "parens-new-line" }.

<div>
  {foo ? (
    <div>
      <p>Hello</p>
    </div>
  ): null}
</div>

logical

Examples of incorrect code for this rule, when configured with { logical: "parens" }.

<div>
  {foo &&
    <div>
      <p>Hello World</p>
    </div>
  }
</div>

Examples of correct code for this rule, when configured with { logical: "parens" }.

<div>
  {foo &&
    (<div>
      <p>Hello World</p>
    </div>)
  }
</div>

<div>
  {foo && (
    <div>
      <p>Hello World</p>
    </div>
  )}
</div>

Examples of incorrect code for this rule, when configured with { logical: "parens-new-line" }.

<div>
  {foo &&
    <div>
      <p>Hello World</p>
    </div>
  }
</div>

<div>
  {foo &&
    (<div>
      <p>Hello World</p>
    </div>)
  }
</div>

Examples of correct code for this rule, when configured with { logical: "parens-new-line" }.

<div>
  {foo && (
    <div>
      <p>Hello World</p>
    </div>
  )}
</div>

prop

Examples of incorrect code for this rule, when configured with { prop: "parens" }.

<div foo={<div>
    <p>Hello</p>
  </div>}>
  <p>Hello</p>
</div>;

Examples of correct code for this rule, when configured with { prop: "parens" }.

<div foo={(<div>
    <p>Hello</p>
  </div>)}>
  <p>Hello</p>
</div>;

<div foo={(
  <div>
    <p>Hello</p>
  </div>
)}>
  <p>Hello</p>
</div>;

Examples of incorrect code for this rule, when configured with { prop: "parens-new-line" }.

<div foo={<div>
    <p>Hello</p>
  </div>}>
  <p>Hello</p>
</div>;

<div foo={(<div>
    <p>Hello</p>
  </div>)}>
  <p>Hello</p>
</div>;

Examples of correct code for this rule, when configured with { prop: "parens-new-line" }.

<div foo={(
  <div>
    <p>Hello</p>
  </div>
)}>
  <p>Hello</p>
</div>;

propertyValue

Examples of incorrect code for this rule, when configured with { propertyValue: "parens" }.

var hello = {
  foo: <div>
    <p>Hello</p>
  </div>
};

Examples of correct code for this rule, when configured with { propertyValue: "parens" }.

var hello = {
  foo: (
    <div>
      <p>Hello</p>
    </div>
  )
};