ESLint 样式

外观

@stylistic/

jsx-closing-bracket-location ​

强制 JSX 多行元素的结束括号位置。

规则详情 ​

此规则检查所有 JSX 多行元素，并验证结束括号的位置。默认情况下，结束括号必须与开始标签对齐。

此规则的错误代码示例

jsx
<Hello
  lastName="Smith"
  firstName="John" />;

<Hello
  lastName="Smith"
  firstName="John"
  />;

此规则的正确代码示例

jsx
<Hello firstName="John" lastName="Smith" />;

<Hello
  firstName="John"
  lastName="Smith"
/>;

规则选项 ​

有两种方法可以配置此规则。

第一种形式是字符串快捷方式，对应于下面指定的 location 值。如果省略，则默认为 "tag-aligned"。

js
"@stylistic/jsx/jsx-closing-bracket-location": <enabled> // -> [<enabled>, "tag-aligned"]
"@stylistic/jsx/jsx-closing-bracket-location": [<enabled>, "<location>"]

第二种形式允许您区分非空标签和自闭合标签。这两个属性都是可选的，并且都默认为 "tag-aligned"。您还可以通过将值设置为 false 来禁用对特定类型标签的规则。

js
"@stylistic/jsx/jsx-closing-bracket-location": [<enabled>, {
  "nonEmpty": "<location>" || false,
  "selfClosing": "<location>" || false
}]

location ​

强制结束括号的位置。

  • tag-aligned: 必须与开始标签对齐。
  • line-aligned: 必须与包含开始标签的行对齐。
  • after-props: 必须放在最后一个属性之后。
  • props-aligned: 必须与最后一个属性对齐。

默认为 tag-aligned。

为了向后兼容，您可以传递一个对象 { "location": <location> }，它等效于第一个字符串快捷方式形式。

此规则的错误代码示例

jsx
// 'jsx-closing-bracket-location': 1
// 'jsx-closing-bracket-location': [1, 'tag-aligned']
// 'jsx-closing-bracket-location': [1, 'line-aligned']
<Hello
  firstName="John"
  lastName="Smith"
  />;

<Say
  firstName="John"
  lastName="Smith">
  Hello
</Say>;

// 'jsx-closing-bracket-location': 1
// 'jsx-closing-bracket-location': [1, 'tag-aligned']
var x = <Hello
  firstName="John"
  lastName="Smith"
/>;

var x = function() {
  return <Say
    firstName="John"
    lastName="Smith"
  >
    Hello
  </Say>;
};

// 'jsx-closing-bracket-location': [1, 'line-aligned']
var x = <Hello
  firstName="John"
  lastName="Smith"
        />;

var x = function() {
  return <Say
    firstName="John"
    lastName="Smith"
         >
    Hello
         </Say>;
};

// 'jsx-closing-bracket-location': [1, 'after-props']
<Hello
  firstName="John"
  lastName="Smith" />;

<Say
  firstName="John"
  lastName="Smith">
  Hello
</Say>;

// 'jsx-closing-bracket-location': [1, 'props-aligned']
<Hello
  firstName="John"
  lastName="Smith"
  />;

<Say
  firstName="John"
  lastName="Smith"
  >
  Hello
</Say>;

此规则的正确代码示例

jsx
// 'jsx-closing-bracket-location': 1
// 'jsx-closing-bracket-location': [1, 'tag-aligned']
// 'jsx-closing-bracket-location': [1, 'line-aligned']
<Hello
  firstName="John"
  lastName="Smith"
/>;

<Say
  firstName="John"
  lastName="Smith"
>
  Hello
</Say>;

// 'jsx-closing-bracket-location': 1
// 'jsx-closing-bracket-location': [1, 'tag-aligned']
var x = <Hello
  firstName="John"
  lastName="Smith"
        />;

var x = function() {
  return <Say
    firstName="John"
    lastName="Smith"
         >
    Hello
         </Say>;
};

// 'jsx-closing-bracket-location': [1, 'line-aligned']
var x = <Hello
  firstName="John"
  lastName="Smith"
/>;

var x = function() {
  return <Say
    firstName="John"
    lastName="Smith"
  >
    Hello
  </Say>;
};

// 'jsx-closing-bracket-location': [1, {selfClosing: 'after-props'}]
<Hello
  firstName="John"
  lastName="Smith" />;

<Say
  firstName="John"
  lastName="Smith"
>
  Hello
</Say>;

// 'jsx-closing-bracket-location': [1, {selfClosing: 'props-aligned', nonEmpty: 'after-props'}]
<Hello
  firstName="John"
  lastName="Smith"
  />;

<Say
  firstName="John"
  lastName="Smith">
  Hello
</Say>;

何时不使用它 ​

如果您没有使用 JSX，则可以禁用此规则。