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

Daniel 的回答很好，但它打破了 "jsx-one-expression-per-line"。

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

如果碰巧你在 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>

我认为此解决方案适用于 '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>
}

JSX 中的内联 eslint 注释

Inline eslint comment in JSX

javascript

reactjs

eslint