如何修复＆＃34; react / jsx-closing-bracket-location＆＃34;在WebStorm中

Question

如何修复WebStorm中的react/jsx-closing-bracket-location问题（Idea，PhpStorm等）？

问题：

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

此块将产生错误：

  

结束括号必须与开口标记对齐（预期   第13列）react / jsx-closing-bracket-location

（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并选择Fix with 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}
 />

刚刚使用/＆gt;创建了一个新行与原始标签对齐。