ESLint Stylistic

外観

@stylistic/jsx/

jsx-wrap-multilines ​

複数行のJSX周りの括弧の欠落を禁止します。

複数行のJSXを括弧で囲むことで、可読性と利便性を向上させることができます。

ルール詳細 ​

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

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

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

ルールオプション ​

parensまたはparens-new-lineで設定した場合、このルールに対する不正なコードの例

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

parens-new-lineで設定した場合、このルールに対する不正なコードの例

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

このルールに対する正しいコードの例

jsx
var singleLineJSX = <p>Hello</p>

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

declaration ​

{ declaration: "parens" }で設定した場合、このルールに対する不正なコードの例

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

{ declaration: "parens" }で設定した場合、このルールに対する正しいコードの例

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

{ declaration: "parens-new-line" }で設定した場合、このルールに対する不正なコードの例

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

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

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

assignment ​

{ assignment: "parens" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

{ assignment: "parens-new-line" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

return ​

{ return: "parens" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

{ return: "parens-new-line" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

arrow ​

{ arrow: "parens" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

{ arrow: "parens-new-line" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

condition ​

{ condition: "parens" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

{ condition: "parens-new-line" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

logical ​

{ logical: "parens" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

{ logical: "parens-new-line" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

prop ​

{ prop: "parens" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

{ prop: "parens-new-line" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

propertyValue ​

{ propertyValue: "parens" }で設定した場合、このルールに対する不正なコードの例。

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

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

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

MITライセンスの下でリリースされています。

Copyright OpenJS Foundation and other contributors, www.openjsf.org。
Copyright © 2023-現在 ESLint Stylistic contributors。