@stylistic/jsx/

jsx-indent

JSXのインデントを強制します。

注: フィクサーは、空白とタブのインデントを修正します。

ルールの詳細

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

このルールに対する不適切なコードの例

// 2 spaces indentation
<App>
  <Hello />
</App>

// no indentation
<App>
<Hello />
</App>

// 1 tab indentation
<App>
  <Hello />
</App>

ルールのオプション

2番目のパラメーターとしてオプションを取ります。これはタブベースのインデントの場合は"tab"、スペースインデントの場合は正の数にすることができます。属性のインデントを確認するか、論理式にインデントを追加するには、3番目のパラメーターを使用してcheckAttributes（デフォルトはfalse）とindentLogicalExpressions（デフォルトはfalse）をオンにします。

...
"@stylistic/jsx/jsx-indent": [<enabled>, 'tab'|<number>, {checkAttributes: <boolean>, indentLogicalExpressions: <boolean>}]
...

このルールに対する不適切なコードの例

// 2 spaces indentation
// [2, 2]
<App>
    <Hello />
</App>

// tab indentation
// [2, 'tab']
<App>
  <Hello />
</App>

// [2, 2, {checkAttributes: true}]
<App render={
  <Hello render={
    (bar) => <div>hi</div>
}
  />
  }>
</App>

// [2, 2, {indentLogicalExpressions: true}]
<App>
  {condition && (
  <Hello />
  )}
</App>

このルールに対する適切なコードの例

// 2 spaces indentation
// [2, 2]
<App>
  <Hello />
</App>

// tab indentation
// [2, 'tab']
<App>
  <Hello />
</App>

// no indentation
// [2, 0]
<App>
<Hello />
</App>

// [2, 2, {checkAttributes: false}]
<App render={
  <Hello render={
    (bar) => <div>hi</div>
}
  />
  }>
</App>

// [2, 2, {indentLogicalExpressions: true}]
<App>
  {condition && (
    <Hello />
  )}
</App>

使用しない場合

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