JSX 中的内联 eslint 注释

Question

我收到一个错误(eslint): Line 199 exceeds maximum line length of 120. (max-len)

为什么这个内联注释不起作用？

{/* eslint-disable-next-line max-len */}
<Chip ref="code" style={styles.chip}backgroundColor={this.state.filterSelected['School Code'] && blue300}onTouchTap={this.handleTouchTap} >
            <Avatar size={32}>C</Avatar>
            School Code
</Chip>

Answer 1

eslint-disable-line和eslint-disable-next-line仅用于内联注释。

目前在eslint 中有一个未解决的问题

因此，您必须将其编写如下：

{
  // eslint-disable-next-line max-len
}<Chip ref="code" style={styles.chip}backgroundColor={this.state.filterSelected['School Code'] && blue300}onTouchTap={this.handleTouchTap} >
            <Avatar size={32}>C</Avatar>
            School Code
</Chip>

Answer 2

丹尼尔的回答工作正常，但它打破了“jsx-one-expression-per-line”。

最新版本的 eslint (6.5.1) 支持如问题所示的多行注释方法。 没有必要改变任何东西。

Answer 3

尝试了所有其他解决方案（包括已关闭问题的解决方案），但它不适用于多行属性。

这对我有用：

{// eslint-disable-next-line
}<a
  ...
 >
 </a>

示例：

<div>
{// eslint-disable-next-line
}<a
  role="button"
  class="navbar-burger burger"
  aria-label="menu"
  aria-expanded="false"
  data-target="navbarBasicExample"
  >
    <span></span>
    <span></span>
    <span></span>
  </a>
<div>

Answer 4

如果可能碰巧您在 jsx 之前使用了要禁用 eslint 的条件，则可以执行此操作（无需 { } 仅用于注释行）：

condition && (
    // eslint-disable-next-line
    <Component props={...props} />
      {...children}
    </Component>
  )

Answer 5

如果您使用像 prettier 这样的代码格式化程序，那么下面的答案将不起作用，因为代码格式化程序会强制执行这样的丑陋代码。

{
  // eslint-disable-next-line max-len
}<Chip ref="code" style={styles.chip}backgroundColor={this.state.filterSelected['School Code'] && blue300}onTouchTap={this.handleTouchTap} >
            <Avatar size={32}>C</Avatar>
            School Code
</Chip>

我认为此解决方案适用于“更漂亮”的代码。

{
  // eslint-disable-next-line max-len
  <Chip ref="code" style={styles.chip}backgroundColor={this.state.filterSelected['School Code'] && blue300}onTouchTap={this.handleTouchTap} >
              <Avatar size={32}>C</Avatar>
              School Code
  </Chip>
}