@stylistic/

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つの方法があります。

最初の形式は、以下に示す`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`です。

後方互換性のために、最初の文字列ショートカット形式と同等のオブジェクト`{ "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を使用していない場合は、このルールを無効にすることができます。