Skip to content

Latest commit

 

History

History
478 lines (385 loc) · 7.34 KB

jsx-wrap-multilines.md

File metadata and controls

478 lines (385 loc) · 7.34 KB
Raw

Prevent missing parentheses around multiline JSX (react/jsx-wrap-multilines)

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

Fixable: This rule is automatically fixable using the --fix flag on the command line.

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"
}

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

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>;