@stylistic/jsx/

jsx-indent-props

JSX でプロパティのインデントを適用します。

ルール詳細

このルールは、一貫したインデントスタイルを強制することを目的としています。デフォルトのスタイルは 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

使用しない場合