JSX 中的内联 eslint 注释答案

【问题标题】：Inline eslint comment in JSXJSX 中的内联 eslint 注释
【发布时间】：2017-04-14 07:29:13
【问题描述】：

我收到一个错误(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>

【问题讨论】：

注释应该可以正常工作，错误是关于第二行的长度，如您的 eslint 配置中指定的那样
使用 ESLint 4.19.1 对我来说效果很好。

标签： javascript reactjs eslint

【解决方案1】：

eslint-disable-line 和 eslint-disable-next-line 仅在内联 cmets 中。

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>

【讨论】：

链接的问题已经被关闭了——然而，似乎很多人认为解决方案并不完整——如果是这样，你可以点赞这条评论：github.com/eslint/eslint/issues/7030#issuecomment-290866531

【解决方案2】：

丹尼尔的回答很好，但它破坏了“jsx-one-expression-per-line”。

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

【讨论】：

【解决方案3】：

如果你在想要禁用 eslint 的 jsx 之前使用了条件，你可以这样做（不需要 { } 仅用于注释行）：

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

【讨论】：

不太确定这个技巧在其他哪些情况下会奏效

【解决方案4】：

尝试了所有其他解决方案（包括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>

【讨论】：

【解决方案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>
}

【讨论】：