@stylistic/

jsx-wrap-multilines

複数行のJSXの周りに括弧がないことを許可しません。

複数行のJSXを括弧で囲むと、可読性や利便性が向上します。

ルールの詳細

このルールは、オプションで、ルールを適用する場所を含むオブジェクト形式の2番目のパラメータを取ることができます。デフォルトでは、以下の構文はすべて、宣言または代入、論理式、JSX属性を除く条件がチェックされますが、これらは明示的に無効にできます。オブジェクトにない構文タイプは、以下に示すデフォルトの動作に従います。

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

注：条件はデフォルトで宣言または代入でチェックされます。

ルールオプション

parens または parens-new-line で設定された場合の、このルールの不正なコードの例

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

parens-new-line で設定された場合の、このルールの不正なコードの例

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

このルールの正しいコードの例

var singleLineJSX = <p>Hello</p>

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

declaration

{ declaration: "parens" } で設定された場合の、このルールの不正なコードの例

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

{ declaration: "parens" } で設定された場合の、このルールの正しいコードの例

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

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

{ declaration: "parens-new-line" } で設定された場合の、このルールの不正なコードの例

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

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

{ declaration: "parens-new-line" } で設定された場合の、このルールの正しいコードの例。

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

assignment

{ assignment: "parens" } で設定された場合の、このルールの不正なコードの例。

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

{ assignment: "parens" } で設定された場合の、このルールの正しいコードの例。

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

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

{ assignment: "parens-new-line" } で設定された場合の、このルールの不正なコードの例。

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

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

{ assignment: "parens-new-line" } で設定された場合の、このルールの正しいコードの例。

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

return

{ return: "parens" } で設定された場合の、このルールの不正なコードの例。

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

{ return: "parens" } で設定された場合の、このルールの正しいコードの例。

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

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

{ return: "parens-new-line" } で設定された場合の、このルールの不正なコードの例。

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

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

{ return: "parens-new-line" } で設定された場合の、このルールの正しいコードの例。

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

arrow

{ arrow: "parens" } で設定された場合の、このルールの不正なコードの例。

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

{ arrow: "parens" } で設定された場合の、このルールの正しいコードの例。

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

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

{ arrow: "parens-new-line" } で設定された場合の、このルールの不正なコードの例。

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

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

{ arrow: "parens-new-line" } で設定された場合の、このルールの正しいコードの例。

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

condition

{ condition: "parens" } で設定された場合の、このルールの不正なコードの例。

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

{ condition: "parens" } で設定された場合の、このルールの正しいコードの例。

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

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

{ condition: "parens-new-line" } で設定された場合の、このルールの不正なコードの例。

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

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

{ condition: "parens-new-line" } で設定された場合の、このルールの正しいコードの例。

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

logical

{ logical: "parens" } で設定された場合の、このルールの不正なコードの例。

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

{ logical: "parens" } で設定された場合の、このルールの正しいコードの例。

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

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

{ logical: "parens-new-line" } で設定された場合の、このルールの不正なコードの例。

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

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

{ logical: "parens-new-line" } で設定された場合の、このルールの正しいコードの例。

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

prop

{ prop: "parens" } で設定された場合の、このルールの不正なコードの例。

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

{ prop: "parens" } で設定された場合の、このルールの正しいコードの例。

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

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

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

{ prop: "parens-new-line" } で設定された場合の、このルールの正しいコードの例。

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

propertyValue

{ propertyValue: "parens" } で設定された場合の、このルールの不正なコードの例。

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

{ propertyValue: "parens" } で設定された場合の、このルールの正しいコードの例。

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