如何在 WebStorm 中修复“react/jsx-closure-bracket-location”答案

【问题标题】：How to fix "react/jsx-closing-bracket-location" in WebStorm如何在 WebStorm 中修复“react/jsx-closure-bracket-location”
【发布时间】：2017-06-08 02:04:02
【问题描述】：

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

问题：

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

这个块会产生错误：

右括号必须与开始标签对齐（预期第 13 列）react/jsx-closure-bracket-location

（react/jsx-closing-bracket-location 的文档）

没有这个问题的相同块：

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

附：我不允许修改eslint 规则

【问题讨论】：

如果您使用 tslint 插件，您可以覆盖 tslint.json 中的选项。您的链接描述了如何做...
@Karbos538 我知道。但是我不能用团队其他人以外的方式编写代码。所以这不是一个选择

标签： reactjs webstorm react-jsx jetbrains-ide eslint

【解决方案1】：

我也面临同样的问题。这是我的代码：

 <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}
 />

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

【讨论】：

【解决方案2】：

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

但如果您已经有类似格式的代码，WebStorm 不会破坏您的格式。

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

【讨论】：