如何在 WebStorm 中修复 "react/jsx-closing-bracket-location"

Question

如何解决 WebStorm（Idea、PhpStorm 等）中的 react/jsx-closing-bracket-location 问题？

问题：

 getElem(name) {
    return (<input type="text"
      value={this.state.value}
    />);
  }

这个块会产生一个错误：

The closing bracket must be aligned with the opening tag (expected column 13) react/jsx-closing-bracket-location

同块没有那个问题：

 getElem(name) {
    return (<input type="text"
      value={this.state.value}
            />);
  }

P.S。我不允许修改 eslint 规则

Answer 1

您不能将 WebStorm 配置为根据此规则自动格式化您的代码，这是一个相关的功能请求：https://youtrack.jetbrains.com/issue/WEB-19721

但是如果您已经有这样格式的代码，WebStorm 不会破坏您的格式。

您可以手动格式化它或使用 ESLint --fix 选项（在错误上点击 alt-enter 并 select 使用 ESLint 修复或运行 eslint --fix filename在终端）。

Answer 2

我也遇到了同样的问题。这是我的代码：

 <input
    className="input__field input__field--haruki"
    type="text" id="input-1"
    onFocus={this.onFocus}
    onBlur={this.onBlur}/>

为了工作，我这样做了：

 <input
    className="input__field input__field--haruki"
    type="text" id="input-1"
    onFocus={this.onFocus}
    onBlur={this.onBlur}
 />

刚刚创建了一个新行，其中 /> 与原始标记对齐。

How to fix "react/jsx-closing-bracket-location" in WebStorm