@stylistic/jsx/

jsx-indent-props

强制执行 JSX 中的 props 缩进。

规则详情

此规则旨在强制执行一致的缩进样式。默认样式为 4 个空格。

此规则的错误代码示例

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

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

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

规则选项

它将一个选项作为第二个参数，该选项可以是缩进模式或用于定义进一步设置的对象。缩进模式可以是基于制表符的缩进的 "tab"、基于空格的缩进的正数或将每行的第一个 prop 与标签的第一个 prop 对齐的 "first"。请注意，除非同时启用强制执行第一个 prop 位置的规则，否则使用 "first" 选项会导致非常不一致的缩进。如果第二个参数是一个对象，则可用于指定缩进模式以及选项 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，则可以禁用此规则。