@stylistic/

jsx-indent-props

JSXにおけるpropsのインデントを強制します。

ルール詳細

このルールは、一貫したインデントスタイルを強制することを目的としています。デフォルトスタイルは`4スペース`です。

このルールの**不正な**コードの例

// 2 spaces indentation
<Hello
  firstName="John"
/>

// no indentation
<Hello
firstName="John"
/>

// 1 tab indentation
<Hello
  firstName="John"
/>

ルールオプション

このルールは、2番目のパラメータとして、インデントモード、またはさらなる設定を定義するオブジェクトを受け取ります。インデントモードは、タブベースのインデントの場合は`"tab"`、スペースインデントの場合は正の数値、各行の最初のプロパティをタグの最初のプロパティに揃える場合は`"first"`とすることができます。`"first"`オプションを使用すると、最初のプロパティの位置を強制するルールも有効にしない限り、非常に不整合なインデントになります。2番目のパラメータがオブジェクトの場合、インデントモードと`ignoreTernaryOperator`オプションを指定できます。このオプションは、`?`または`: `演算子によってインデントレベルを増やさないようにします（デフォルトは`false`）。

...
"@stylistic/jsx/jsx-indent-props": [<enabled>, 'tab'|<number>|'first'|<object>]
...

このルールの**不正な**コードの例

// 2 spaces indentation
// [2, 2]
<Hello
    firstName="John"
/>

// tab indentation
// [2, 'tab']
<Hello
  firstName="John"
/>

// aligned with first prop
// [2, 'first']
<Hello
  firstName="John"
    lastName="Doe"
/>

このルールの**正しい**コードの例

// 2 spaces indentation
// [2, 2]
<Hello
  firstName="John"
/>

<Hello
  firstName="John" />

// tab indentation
// [2, 'tab']
<Hello
  firstName="John"
/>

// no indentation
// [2, 0]
<Hello
firstName="John"
/>

// aligned with first prop
// [2, 'first']
<Hello
  firstName="John"
  lastName="Doe"
/>

<Hello
       firstName="John"
       lastName="Doe"
/>

<Hello firstName="Jane"
       lastName="Doe" />

// indent level increase on ternary operator (default setting)
// [2, 2]
? <Hello
    firstName="John"
    lastName="Doe"
  />

// no indent level increase on ternary operator
// [2, { indentMode: 2, ignoreTernaryOperator: true} ]
? <Hello
  firstName="John"
  lastName="Doe"
/>

使用しない場合

JSXを使用していない場合は、このルールを無効にできます。