ESLint Stylistic

外观

@stylistic/jsx/

jsx-wrap-multilines ​

禁止在多行 JSX 周围缺少括号。

用括号包裹多行 JSX 可以提高可读性和/或便利性。

规则详细信息 ​

此规则可以选择采用对象形式的第二个参数，其中包含要应用规则的位置。默认情况下，将检查下面列出的所有语法，但声明或赋值、逻辑表达式和 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>
  )
};