@stylistic/

jsx-indent-props

强制 JSX 中的 props 缩进。

规则详情

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

此规则的不正确代码示例

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

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

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

规则选项

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