Webstorm 忽略 JSX 的 ESLint 缩进

Question

当我执行“重新格式化代码”时，我的多行 JSX 组件缩进如下：

<SubTabBar clickHandler={subtab => this.setState({ subtab })}
           currentSubtab={subtab}
           sport={sport} />

然后他们有一个 ESLint 错误，例如“ESLint: Expected indentation of 10 个空格但发现 19.(indent)”

当我右键单击并进行 ESLint 修复时，我得到了这个，ESLint 对此很满意：

<SubTabBar clickHandler={subtab => this.setState({ subtab })}
  currentSubtab={subtab}
  sport={sport}/>

但这是站不住脚的，因为“重新格式化代码”给出了错误的缩进，尤其是因为我在 Commit 上运行了重新格式化代码！所以总是出错！

我确实从 .eslintrc 中执行了“应用 ESLint 代码样式规则”，但它们对这种情况没有帮助。我在首选项中找不到任何适用的内容（经常建议取消选中“多行时对齐”并不能解决此问题。）

如何解决这个问题？

Answer 1

哎呀，想通了！我认为这里值得一提，因为它与我想的很不一样。这些不仅仅是 JS 设置。它们不是 JSX 设置的部分，但是你在 JSX 中做什么？ 编写 HTML。

在 HTML 代码样式部分，取消选中“对齐属性”解决了我的问题。