@stylistic/

jsx-indent

强制 JSX 缩进。

注意：修复程序将修复空格和制表符缩进。

规则详情

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

此规则的不正确代码示例

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

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

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

规则选项

它以第二个参数的形式接受一个选项，可以是"tab"（用于制表符缩进）或一个正数（用于空格缩进）。要启用对属性缩进的检查或向逻辑表达式添加缩进，请使用第三个参数分别打开checkAttributes（默认值为 false）和indentLogicalExpressions（默认值为 false）。

...
"@stylistic/jsx/jsx-indent": [<enabled>, 'tab'|<number>, {checkAttributes: <boolean>, indentLogicalExpressions: <boolean>}]
...

此规则的不正确代码示例

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

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

// [2, 2, {checkAttributes: true}]
<App render={
  <Hello render={
    (bar) => <div>hi</div>
}
  />
  }>
</App>

// [2, 2, {indentLogicalExpressions: true}]
<App>
  {condition && (
  <Hello />
  )}
</App>

此规则的正确代码示例

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

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

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

// [2, 2, {checkAttributes: false}]
<App render={
  <Hello render={
    (bar) => <div>hi</div>
}
  />
  }>
</App>

// [2, 2, {indentLogicalExpressions: true}]
<App>
  {condition && (
    <Hello />
  )}
</App>

何时不使用它

如果您没有使用 JSX，则可以禁用此规则。