@stylistic/jsx/

jsx-closing-bracket-location

JSX の複数行要素の終了角かっこを強制します。

ルールの詳細

このルールは JSX の複数行の要素をすべてチェックし、終了角かっこが正しい位置にあることを確認します。デフォルトでは、終了角かっこは開始タグと同じ位置に揃える必要があります。

このルールにとって **正しくない** コードの例

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

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

このルールにとって **正しい** コードの例

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

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

ルールのオプション

このルールを設定する方法は 2 つあります。

1 つ目の形式は、下記で指定された location 値に対応する文字列ショートカットです。省略すると、デフォルトで "tag-aligned" になります。

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

2 つ目の形式では、空ではないタグと単独で閉じられるタグを区別できます。両方のプロパティはオプションで、どちらもデフォルトでは "tag-aligned" です。また、値を false に設定して特定のタイプのタグに対するルールを無効にすることもできます。

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

location

終了角かっこに対する強制的な配置です。

• tag-aligned: 開始タグと同じ位置に揃える必要があります。
• line-aligned: 開始タグを含む行と同じ位置に揃える必要があります。
• after-props: 最後のプロパティの直後に配置する必要があります。
• props-aligned: 最後のプロパティと同じ位置に揃える必要があります。

デフォルトは tag-aligned です。

下位互換性のために、1 つ目の文字列ショートカット形式と同等の { "location": <location> } というオブジェクトを渡せます。

このルールにとって **正しくない** コードの例

// '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-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 を使用していない場合は、このルールを無効にできます。