#jsx-indent

#Configuration

import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/jsx-indent': 'error',
    },
  },
]);

#Rule Details

This rule enforces a consistent indentation style for JSX. The default style is 4 spaces.

Examples of incorrect code for this rule:

<App>
  <Hello />
</App>

Examples of correct code for this rule:

<App>
    <Hello />
</App>

#Rule Options

The first option is either the string "tab" for tab-based indentation, or a non-negative integer for space-based indentation.

The second option is an object with two boolean keys (each defaulting to false):

• checkAttributes — also enforce indentation inside JSX-expression attribute values.
• indentLogicalExpressions — also indent JSX nested inside the right side of a logical (&&, ||, ??) expression.

Examples of incorrect code for this rule with ["error", 2]:

{ "react/jsx-indent": ["error", 2] }

<App>
    <Hello />
</App>

Examples of correct code for this rule with ["error", 2]:

{ "react/jsx-indent": ["error", 2] }

<App>
  <Hello />
</App>

Examples of correct code for this rule with ["error", "tab"]:

{ "react/jsx-indent": ["error", "tab"] }

<App>
	<Hello />
</App>

Examples of correct code for this rule with ["error", 0]:

{ "react/jsx-indent": ["error", 0] }

<App>
<Hello />
</App>

Examples of incorrect code for this rule with ["error", 2, { "indentLogicalExpressions": true }]:

{ "react/jsx-indent": ["error", 2, { "indentLogicalExpressions": true }] }

<App>
  {condition && (
  <Hello />
  )}
</App>

Examples of correct code for this rule with ["error", 2, { "indentLogicalExpressions": true }]:

{ "react/jsx-indent": ["error", 2, { "indentLogicalExpressions": true }] }

<App>
  {condition && (
    <Hello />
  )}
</App>

#When Not To Use It

If you are not using JSX, you can disable this rule. If you use a code formatter (e.g. Prettier) that already enforces JSX indentation, prefer relying on the formatter instead.

#Original Documentation

• react/jsx-indent