jsx/jsx-indent-props

Enforce props indentation in JSX.

Rule Details

This rule is aimed to enforce consistent indentation style. The default style is 4 spaces.

Examples of incorrect code for this rule:

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

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

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

Rule Options

It takes an option as the second parameter which can either be the indent mode or an object to define further settings. The indent mode can be "tab" for tab-based indentation, a positive number for space indentations or "first" for aligning the first prop for each line with the tag's first prop. Note that using the "first" option allows very inconsistent indentation unless you also enable a rule that enforces the position of the first prop. If the second parameter is an object, it can be used to specify the indent mode as well as the option ignoreTernaryOperator, which causes the indent level not to be increased by a ? or : operator (default is false).

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

Examples of incorrect code for this rule:

// 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"
/>

Examples of correct code for this rule:

// 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"
/>

When Not To Use It

If you are not using JSX then you can disable this rule.