jsx-indent.md

Validate JSX indentation (react/jsx-indent)

This option validates a specific indentation style for JSX.

Fixable: This rule is automatically fixable using the --fix flag on the command line. Fixer will fix whitespace and tabs indentation.

Rule Details

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

The following patterns are considered warnings:

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

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

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

Rule Options

It takes an option as the second parameter which can be "tab" for tab-based indentation or a positive number for space indentations.

...
"react/jsx-indent": [<enabled>, 'tab'|<number>]
...

The following patterns are considered warnings:

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

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

The following patterns are not warnings:

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

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

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

indentLogicalExpressions

...
"react/jsx-indent": [<enabled>, 'tab'|<number>, {indentLogicalExpressions: true}]
...

By default this is set to false. When enabled, an additional indentation is required when the JSX is the right of a LogicalExpression

The following patterns are considered warnings:

// 2 spaces indentation with indentLogicalExpressions as false
// [2, 2, {indentLogicalExpressions: false}]
<App>
  {
    condition &&
      <Container>
        <Child></Child>
      </Container>
  }
</App>

// 2 spaces indentation with indentLogicalExpressions as true
// [2, 2, {indentLogicalExpressions: true}]
<App>
  {
    condition &&
    <Container>
      <Child></Child>
    </Container>
  }
</App>

The following patterns are not warnings:

// 2 spaces indentation with indentLogicalExpressions as true
// [2, 2, {indentLogicalExpressions: true}]
<App>
  {
    condition &&
      <Container>
        <Child></Child>
      </Container>
  }
</App>

// 2 spaces indentation with indentLogicalExpressions as false
// [2, 2, {indentLogicalExpressions: false}]
<App>
  {
    condition &&
    <Container>
      <Child></Child>
    </Container>
  }
</App>

When not to use

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