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

Daniel的答案很好用，但是却破坏了“每行jsx-one-expression-perpression”。

最新版的eslint（6.5.1）支持多行注释方法，如下所示。无需更改任何内容。

Answer 3

尝试了所有其他解决方案（包括closed issue上的解决方案），但不适用于多行属性。

这对我有用：

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

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

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

JSX中内联的eslint注释

4 个答案: