'?' Should be placed at the beginning of the line in ReactJS

Question

I am working on a ReactJS project and I am getting the following error:

? should be placed at the beginning of the line operator-linebreak

Here is the snippet:

{
  index === 0 ?
    <div className='grid__row--offset--40 row'>
      <div className='small-40 columns small-centered'>
        <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
        <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x' /></a>
      </div>
    </div>
    : null
}

Answer 1

这是ESLintoperator-linebreak样式规则的一部分：

规则明细

此规则为操作员强制使用一致的换行样式。

并且默认情况下，该规则设置为允许运算符位于表达式之后，但使用?和时除外:：

默认配置是 "after", { "overrides": { "?": "before", ":": "before" } }

因此，请?按照规则指出，在JSX之前放一个换行符：

{
  index === 0
    ? <div>
        {/* Your JSX here */}
      <div>
    : null
}

如果您不喜欢它，可以在您的.eslintrc或其他配置文件中重新配置它。对于您要尝试的操作，请尝试以下配置：

"operator-linebreak": [
  "error",
  "after",
  {
    "overrides": {
      ":": "before"
    }
  }
]